Wrap

Виджет Wrap похож на Row и Column: он отображает дочерние элементы последовательно. Если места недостаточно для отображения элемента, виджет Wrap автоматически размещает его в новой строке или столбце.

Добавление виджета Wrap

Вот пример того, как вы можете использовать виджет Wrap в своем проекте:

1. Перетащите виджет Container из вкладки Layout Elements (в панели виджетов) или добавьте его напрямую из дерева виджетов, установите его ширину в бесконечность и высоту в 200.

2. Добавьте виджет Wrap из вкладки Layout Elements внутрь Container.

3. Добавьте виджет Button внутрь виджета Wrap.

4. Скопируйте и вставьте еще несколько виджетов Button.

Обратите внимание, как кнопка, которая не помещается в оставшееся пространство, размещается на следующей строке.

Настройка

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

Изменение направления

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

Чтобы изменить направление добавления элементов:

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

Горизонтальное направление заставляет виджет Wrap работать как Row, а вертикальное — как Column.

Добавление пространства между элементами

Чтобы добавить пространство между элементами:

1. Выберите Wrap в дереве виджетов или на холсте.

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

3. В поле ввода Spacing введите значение 10. Если Direction установлено в Horizontal, Wrap вставит пустое пространство в 10 пикселей вертикально между элементами. А если Direction установлено в Vertical, Wrap вставит пустое пространство в 10 пикселей горизонтально между элементами.

4. В поле ввода Run Spacing введите значение 15. Если Direction установлено в Horizontal, Wrap вставит пустое пространство в 15 пикселей горизонтально между элементами. А если Direction установлено в Vertical, Wrap вставит пустое пространство в 15 пикселей вертикально между элементами.

Настройка выравнивания

Ось Main Axis для виджета Wrap по умолчанию — горизонтальная, поэтому ее настройка изменит, как дочерние виджеты распределяются горизонтально в виджете Wrap.

Чтобы изменить выравнивание:

1. Выберите Wrap в дереве виджетов или на холсте.

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

3. Выберите из отображаемых вариантов: Start, Center, End, Space evenly, Space between или Space around.

Настройка выравнивания Run

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

Чтобы изменить выравнивание Run:

1. Выберите Wrap в дереве виджетов или на холсте.

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

3. Выберите из отображаемых вариантов: Start, Center, End, Space evenly, Space between или Space around.

Добавление элементов снизу

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

Чтобы добавлять элементы снизу вверх:

1. Выберите Wrap в дереве виджетов или на холсте.

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

3. Установите значение выпадающего списка в Up.

4. Попробуйте добавить элементы.

Обрезка элементов

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

Чтобы обрезать выходящие за пределы элементы:

1. Выберите Wrap в дереве виджетов или на холсте.

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

3. Измените его на Clip Content.

---

Видеоурок

Если вы предпочитаете видеоурок, вот он для вас: