Wrap

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

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

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

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

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

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

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

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

Настройка

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

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

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

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

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

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

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

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

1. Выберите Wrap из дерева виджетов или из области холста.
2. Перейдите к редактору свойств и прокрутите вниз до раздела Wrap Properties.
3. В поле ввода Spacing введите значение 10. Если Direction установлено на Horizontal, Wrap вставит пустое пространство 10px вертикально между элементами. А если Direction установлено на Vertical, Wrap вставит пустое пространство 10px горизонтально между элементами.
4. В поле ввода Run Spacing введите значение 15. Если Direction установлено на Horizontal, Wrap вставит пустое пространство 15px горизонтально между элементами. А если Direction установлено на Vertical, Wrap вставит пустое пространство 15px вертикально между элементами.

Регулировка выравнивания

Основная ось по умолчанию для виджета Wrap - горизонтальная ось, поэтому ее изменение изменит способ горизонтального распределения дочерних виджетов в виджете Wrap.

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

1. Выберите Wrap из дерева виджетов или из области холста.
2. Перейдите к редактору свойств и прокрутите вниз до Alignment.
3. Выберите из отображаемых опций, включая Start, Center, End, Space evenly, Space between, и Space around.

Регулировка вертикального выравнивания

Основная ось Run для виджета Wrap - вертикальная ось, поэтому ее изменение изменит способ вертикального распределения дочерних виджетов в виджете Wrap.

Чтобы изменить Run Alignment:

1. Выберите Wrap из дерева виджетов или из области холста.
2. Перейдите к редактору свойств и прокрутите вниз до Run Alignment.
3. Выберите из отображаемых опций, включая Start, Center, End, Space evenly, Space between, и Space around.

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

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

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

1. Выберите Wrap из дерева виджетов или из области холста.
2. Перейдите к редактору свойств и прокрутите вниз до Vertical Direction.
3. Установите значение Dropdown на Up.
4. Попробуйте добавить элементы.

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

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

Чтобы обрезать лишние элементы:

1. Выберите Wrap из дерева виджетов или из области холста.
2. Перейдите к редактору свойств и прокрутите вниз до Clip Behaviour.
3. Измените его на Clip Content.

---

Видео-руководство

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