Контейнер

Container — коробка вокруг одного виджета. Через неё задаются фон, форма, размер и положение того, что внутри. По сути это способ разбить экран на логические куски и оформить каждый отдельно.

Нужно посадить текст на цветную подложку со скруглением и отступами — берите Container.

Свойства

Ограничение размеров

Если ширина и высота не заданы, контейнер подстраивается под содержимое. На разных экранах это даёт разброс: где-то блок расплывается на всю ширину, где-то схлопывается. Ограничители Min W, Min H, Max W, Max H задают коридор.

Типичный случай: кнопка должна тянуться вместе с экраном, но не растягиваться до нелепой ширины на десктопе. Минимум гарантирует, что по ней можно попасть пальцем, максимум — что она не займёт полэкрана.

• Min W / Min H — нижняя граница, в пикселях или процентах.

• Max W / Max H — верхняя граница, в пикселях или процентах.

Clip Content

Обрезать ли содержимое, которое вылезает за границы контейнера. Когда включено, всё за пределами коробки не отрисовывается — это то, что нужно скруглённой карточке с картинкой внутри: без обрезки картинка перекроет скруглённые углы.

Тень

Блок Box Shadow добавляет контейнеру тень:

• Shadow Color — цвет тени. Обычно задаётся в hex вместе с альфа-каналом, например #33000000. Можно взять цвет темы или подобрать в палитре.

• Blur — радиус размытия. Больше значение — мягче и рассеяннее тень, меньше — резче край.

• Spread — насколько тень «раздувается» за пределы виджета.

• Offset X / Offset Y — смещение тени по горизонтали и вертикали. Положительные значения двигают её вправо и вниз, отрицательные — влево и вверх.

Как это выглядит в редакторе:

Градиент

Блок Gradient заливает контейнер переходом цветов:

• Angle (Degrees) — направление. 0° — горизонтальный градиент, 90° — вертикальный.

• Colors — участвующие цвета: из темы, из палитры или по hex-коду. По умолчанию их два.

• Add Color — добавить ещё один цвет и задать ему точку перехода.

• Transition Point — доля от длины градиента (от 0 до 1), на которой цвет вступает в силу:

В примере выше:

• у первого цвета точка перехода 0 — он стоит в самом начале;
• у второго 0.5 — он начинается ровно посередине;
• у третьего 1 — он приходится на конец градиента.

Фоновая картинка

Блок Background Image ставит изображение фоном контейнера.

Содержимое

• Child Alignment — где внутри контейнера встанет вложенный виджет. Сетка задаёт позицию (центр, верх, низ, края), поля X и Y — точное смещение по горизонтали и вертикали.

Неявная анимация

Implicit Animation сглаживает изменение свойств контейнера: ширина или цвет меняются не рывком, а плавно.

Сначала — как ширина и цвет меняются без неё:

А теперь то же самое с включённой **Implicit Animation**:

Настройки анимации:

• Animation Curve — характер движения: Ease In, Ease In Out, Ease Out, Bounce, Linear, Elastic.

• Duration (ms) — длительность в миллисекундах.

Безопасная зона

Переключатель Safe Area удерживает контейнер в области, свободной от вырезов камеры, скруглённых углов и системных панелей. Без него верхняя строка текста может уехать под «чёлку».

Включается в Properties Panel переключателем Safe Area.

:::tip[Видеоверсия] Если удобнее смотреть:

:::