Flow Builder создаёт адаптивные макеты. Вы не перетаскиваете элементы на точные координаты — вместо этого вы вкладываете их в контейнеры, которые автоматически расставляют дочерние элементы. Контейнер определяет направление дочерних элементов (вертикальное или горизонтальное), их выравнивание и отступы. Каждый элемент может самостоятельно настраивать размер и поля, а при необходимости — выходить из общего потока с помощью абсолютного или фиксированного позиционирования.

Компоновка

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

• Вертикальный контейнер: Размещает дочерние элементы сверху вниз
• Горизонтальный контейнер: Размещает дочерние элементы слева направо
• Разделитель: Визуальный разделитель между элементами
• Карусель: Горизонтально прокручиваемый набор слайдов
• Bottom Sheet: Выдвигающаяся панель, которая показывает дополнительный контент при нажатии кнопки Контейнеры — это основные строительные блоки экрана. Вы можете вкладывать их друг в друга, чтобы создавать сложные макеты. У каждого контейнера есть раздел Layout на правой панели, который управляет расположением дочерних элементов.

Чтобы сгруппировать элементы в новый контейнер, используйте действие слоя Wrap layer action. Чтобы убрать контейнер и поднять его дочерние элементы на уровень выше, используйте Unwrap.

Direction

• Free: Без автоматического расположения. Дочерние элементы позиционируются независимо (полезно, когда дочерние элементы используют абсолютное позиционирование)
• Vertical: Дочерние элементы выстраиваются сверху вниз, как строки в столбце
• Horizontal: Дочерние элементы располагаются слева направо, как элементы в строке

Порядок элементов

Дочерние элементы отображаются в том порядке, в каком они расположены на панели Layers. В вертикальном контейнере верхний элемент списка оказывается в верхней части экрана, в горизонтальном — в левой. Перетаскивайте элементы на панели Layers для изменения порядка или используйте Move Up и Move Down в действиях слоя.

Выравнивание

Сетка выравнивания определяет, как дочерние элементы располагаются вдоль поперечной оси контейнера. В вертикальном контейнере выравнивание задаёт горизонтальное положение дочерних элементов (по левому краю, по центру или по правому краю). В горизонтальном — вертикальное (по верхнему краю, по середине или по нижнему краю).

Распределение

Распределение определяет, как пространство делится между дочерними элементами вдоль главной оси:

• Gap (по умолчанию): фиксированное расстояние в пикселях между соседними дочерними элементами
• Space Between: дочерние элементы распределяются до краёв, а между ними появляются равные промежутки
• Space Around: каждый дочерний элемент окружён равными промежутками, при этом у краёв промежутки вдвое меньше
• Space Evenly: равные промежутки перед всеми дочерними элементами, между ними и после них

Обрезка контента

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

Позиция

По умолчанию позиция каждого элемента определяется автоматически на основе лейаута контейнера. Переключатель Position позволяет вывести элемент из обычного потока и задать его положение вручную.

Относительное (по умолчанию)

Элемент остаётся в обычном потоке разметки. Его положение определяется правилами родительского контейнера — свободно перетаскивать его нельзя. Используйте Margin для настройки отступов вокруг относительного элемента.

Относительное позиционирование подходит для большинства элементов контента: текстовых блоков, изображений, карточек, кнопок и элементов списков.

Абсолютное позиционирование

Элемент выходит из обычного потока и накладывается поверх другого контента. Он больше не влияет на расположение соседних элементов.

При выборе Absolute появляются дополнительные настройки:

• Поля смещения (T, L, R, B): задают расстояние в пикселях от элемента до каждого края родительского контейнера
• Сетка привязки: нажмите на точку сетки 3×3, чтобы выбрать угол, край или центр родительского элемента, к которому будет привязан элемент
• Горизонтальная привязка (Left / Center / Right) и Вертикальная привязка (Top / Center / Bottom): выпадающие списки, которые управляют той же точкой привязки, что и сетка
• Z-index: числовое поле, которое определяет порядок наложения элемента относительно соседних. Элементы с большим значением отображаются поверх остальных Используйте абсолютное позиционирование для декоративных наложений, значков, кнопок закрытия и иконок, размещённых поверх изображений.

Фиксированное

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

Фиксированное позиционирование использует те же настройки, что и абсолютное (отступы, сетка привязки, Z-индекс). Все отступы отсчитываются от краёв экрана, а не от родителя.

Используйте фиксированное позиционирование для прикреплённых кнопок внизу экрана, плавающих панелей навигации и постоянных шапок.

Размер

У каждого элемента есть элементы управления Width и Height. Нажмите на выпадающий список, чтобы выбрать режим задания размера:

• Fill: Элемент растягивается, занимая всё доступное пространство родителя. Показанное значение в пикселях — это вычисленный результат.
• Hug: Элемент сжимается, подстраиваясь под размер содержимого. Показанное значение в пикселях — это вычисленный результат.
• Fixed: Элемент использует точное значение в пикселях, которое вы задаёте, независимо от размера родителя или содержимого. Единственный доступный режим для элементов с абсолютным или фиксированным позиционированием.

Отступы

Задайте значения отступов отдельно для каждой стороны элемента.

• Margin: Пространство между элементом и соседними элементами. Не выходит за границы родительского контейнера, какое бы значение ни было задано.
• Padding: Пространство между границей элемента и его содержимым.

У текстовых элементов есть только margin. У экранов — только padding. Для контейнеров и других элементов с дочерним содержимым доступны оба варианта.

Порядок наложения

Относительные элементы никогда не перекрывают друг друга — каждый контейнер выстраивает дочерние элементы последовательно. Перекрытие возникает только тогда, когда элемент выходит из обычного потока с помощью позиционирования Absolute или Fixed.

Когда элементы всё же перекрываются, последующие сиблинги на панели Layers отображаются поверх предыдущих — даже если последующий сиблинг относительный, а предыдущий абсолютный. Absolute и Fixed элементы получают поле Z-index для более точного управления: чем выше значение, тем выше приоритет. У Relative элементов Z-index отсутствует — порядок в стеке определяется только их позицией в списке слоёв.

Чтобы изменить порядок элементов, используйте действия со слоями Move up и Move down.