Wrap
Wrap ставит потомков друг за другом, как Row и Column, но с одним отличием: если очередной элемент не помещается, он переносится на новую строку.
Как добавить
-
Перетащите Container из вкладки Layout Elements и задайте ему width = infinity, height = 200.
-
Внутрь положите Wrap из той же вкладки.
-
В Wrap добавьте Button.
-
Скопируйте кнопку несколько раз.
Кнопка, которой не хватило места в строке, уходит на следующую.
Настройки
Внешний вид и поведение задаются в панели свойств.
Направление
По умолчанию элементы добавляются по горизонтали.
- Выделите Wrap в дереве виджетов или на холсте.
- Прокрутите панель свойств до раздела Wrap Properties.
- В списке Direction выберите Vertical.
С горизонтальным направлением Wrap ведёт себя как Row, с вертикальным — как Column.
Промежутки между элементами
-
Выделите Wrap.
-
Прокрутите панель свойств до раздела Wrap Properties.
-
В поле Spacing введите, например, 10 — это промежуток между соседними элементами внутри строки.
-
В поле Run Spacing введите 15 — это промежуток между самими строками.
Какое расстояние окажется вертикальным, а какое горизонтальным, зависит от Direction: при горизонтальном направлении Spacing разводит элементы по горизонтали, а Run Spacing — строки по вертикали; при вертикальном всё наоборот.
Выравнивание внутри строки
Главная ось у Wrap по умолчанию горизонтальная, поэтому эта настройка распределяет потомков по ширине строки.
-
Выделите Wrap.
-
Прокрутите панель свойств до Alignment.
-
Выберите Start, Center, End, Space evenly, Space between или Space around.
Выравнивание строк
Ось строк по умолчанию вертикальная, поэтому эта настройка распределяет сами строки по высоте.
-
Выделите Wrap.
-
Прокрутите панель свойств до Run Alignment.
-
Выберите Start, Center, End, Space evenly, Space between или Space around.
Заполнение снизу вверх
Новые элементы добавляются сверху вниз. Редко, но требуется обратный порядок.
-
Выделите Wrap.
-
Прокрутите панель свойств до Vertical Direction.
-
Установите значение Up.
Обрезка лишнего
Если элементов больше, чем помещается в родителя, Wrap продолжает рисовать их за его пределами. Свойство Clip Behaviour это прекращает.
-
Выделите Wrap.
-
Прокрутите панель свойств до Clip Behaviour.
-
Установите Clip Content.