Wrap

Wrap ставит потомков друг за другом, как Row и Column, но с одним отличием: если очередной элемент не помещается, он переносится на новую строку.

Как добавить

  1. Перетащите Container из вкладки Layout Elements и задайте ему width = infinity, height = 200.

  2. Внутрь положите Wrap из той же вкладки.

  3. В Wrap добавьте Button.

  4. Скопируйте кнопку несколько раз.

Кнопка, которой не хватило места в строке, уходит на следующую.

Настройки

Внешний вид и поведение задаются в панели свойств.

Направление

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

  1. Выделите Wrap в дереве виджетов или на холсте.
  2. Прокрутите панель свойств до раздела Wrap Properties.
  3. В списке Direction выберите Vertical.

С горизонтальным направлением Wrap ведёт себя как Row, с вертикальным — как Column.

Промежутки между элементами

  1. Выделите Wrap.

  2. Прокрутите панель свойств до раздела Wrap Properties.

  3. В поле Spacing введите, например, 10 — это промежуток между соседними элементами внутри строки.

  4. В поле Run Spacing введите 15 — это промежуток между самими строками.

Какое расстояние окажется вертикальным, а какое горизонтальным, зависит от Direction: при горизонтальном направлении Spacing разводит элементы по горизонтали, а Run Spacing — строки по вертикали; при вертикальном всё наоборот.

Выравнивание внутри строки

Главная ось у Wrap по умолчанию горизонтальная, поэтому эта настройка распределяет потомков по ширине строки.

  1. Выделите Wrap.

  2. Прокрутите панель свойств до Alignment.

  3. Выберите Start, Center, End, Space evenly, Space between или Space around.

Выравнивание строк

Ось строк по умолчанию вертикальная, поэтому эта настройка распределяет сами строки по высоте.

  1. Выделите Wrap.

  2. Прокрутите панель свойств до Run Alignment.

  3. Выберите Start, Center, End, Space evenly, Space between или Space around.

Заполнение снизу вверх

Новые элементы добавляются сверху вниз. Редко, но требуется обратный порядок.

  1. Выделите Wrap.

  2. Прокрутите панель свойств до Vertical Direction.

  3. Установите значение Up.

Обрезка лишнего

Если элементов больше, чем помещается в родителя, Wrap продолжает рисовать их за его пределами. Свойство Clip Behaviour это прекращает.

  1. Выделите Wrap.

  2. Прокрутите панель свойств до Clip Behaviour.

  3. Установите Clip Content.


Видеоразбор

перевод официальной документации FlutterFlow

обновлено

⌕ ESC