Перейти к основному содержимому

Flex

Виджет Flex можно использовать как альтернативу Row и Column. Он позволяет динамически устанавливать ось макета (горизонтальную или вертикальную) на основе конкретных условий или логики. Это особенно полезно для творческих адаптивных макетов — где дочерние элементы должны располагаться горизонтально при широком экране и вертикально при узком.

flex.png

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

Чтобы использовать виджет Flex, добавьте его из раздела Layout Elements палитры виджетов, затем добавьте дочерние виджеты внутрь него. В панели свойств установите условие для свойства Is Horizontal. Когда это условие оценивается как True, элементы будут размещены горизонтально.

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

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

Лучшие практики
  • Если вам требуется простое вертикальное или горизонтальное расположение, рассмотрите использование виджетов Row или Column.
  • Для очень большого количества дочерних элементов рассмотрите использование ListView или GridView вместо Flex, поскольку они обеспечивают лучшую производительность при прокрутке больших списков элементов.
  • Когда содержимое превышает пределы экрана, вы можете включить прокрутку, чтобы сделать содержимое доступным. Однако если вы хотите полностью избежать прокрутки и все же уместить все содержимое на экране, рассмотрите использование виджета Wrap.

Настройка

Когда свойство Is Horizontal отключено, виджет Flex ведет себя как Column, а когда включено — как Row. Настройки, такие как выравнивание по главной оси, выравнивание по поперечной оси, возможность прокрутки и отступы, работают так же, как и для виджетов Column и Row.