ConstrainedBox

This page has not been translated into English yet. The Russian original is below.

Накладывает на ребёнка дополнительные ограничения размера: «не уже», «не шире», «не ниже», «не выше». В отличие от SizedBox , не задаёт размер, а только ставит границы, в которых ребёнок выбирает его сам.

Тип: single-child

ConstrainedBox
  #constraints minWidth:100 minHeight:50
  ColoredBox color:#4f46e5
    Center
      Text "Не меньше 100×50"

Вложенные структуры

#constraints

Длина — число (пиксели) или строка с единицей: "100svh" , "50%" .

Первым позиционным словом можно выбрать готовый режим: expand (занять всё, при желании с width: / height: ), tight , tightFor , loose :

ConstrainedBox
  #constraints expand width:200
  Text "Ширина зафиксирована, высота — всё доступное"

Параметров прямо на ConstrainedBox ( maxWidth:150 и т. п.) нет — только #constraints .

Примеры

Колонка не шире читаемой ширины

Center
  ConstrainedBox
    #constraints maxWidth:640
    Column spacing:8 crossAxisAlignment:start
      Text "Заголовок"
      Text "Длинный абзац не растягивается шире 640 пикселей на широком экране."

Кнопка не уже 120

ConstrainedBox
  #constraints minWidth:120 minHeight:44
  Button onPressed:"navigate:/home"
    Center
      Text "ОК"

Различия между приложением и сайтом

• На сайте читаются только minWidth , maxWidth , minHeight , maxHeight . Именованные режимы ( expand , tight , tightFor , loose ) на сайте не действуют — ограничения не появятся.
• Если родитель задаёт жёсткий размер ( SizedBox width:800 ), в приложении он перекрывает maxWidth ребёнка, а на сайте maxWidth остаётся в силе — получится 640, а не 800.

Best practices

• Читаемая ширина текста на странице — ConstrainedBox с maxWidth внутри Center ; на узком экране он просто сжимается до ширины окна.
• Нужен точный размер — SizedBox ; нужны только границы — ConstrainedBox .

See also

• SizedBox — фиксированный размер
• Container — то же через #constraints , плюс отступы и оформление
• AspectRatio — размер из соотношения сторон