Контейнеры компоновки (макеты). FlexLayout

Содержание

Направление расположения элементов
Перенос элементов
Распределение пространства между дочерними элементами (свойство JustifyContent)
Итого

Изначально, за основу этого контейнера компоновки была взята концепция модуля CSS FlexBox. Как и StackLayout, FlexLayout позволяет размещать элементы в строках или столбцах, но, при этом, имеет ряд особенностей, позволяющих создавать «гибкий» интерфейс.

Направление расположения элементов

Свойство Direction контейнера FlexLayout определяет направление и основную ось дочерних элементов. Это свойство может принимать следующие значения:

Значение	Описание
`Column`	Дочерние элементы упорядочиваются по вертикали (в столбец). Основная ось — Y
`ColumnReverse`	Дочерние элементы упорядочиваются по вертикали в обратном направлении. Основная ось — Y
`Row`	Дочерние элементы упорядочиваются по горизонтали (в строку). Основная ось — X
`RowReverse`	Дочерние элементы упорядочиваются по горизонтали в обратном направлении. Основная ось — X

Например, разместим четыре кнопки в столбцах:

<FlexLayout Direction="Column">
    <Button Text="Item 1" Background="Red"></Button>
    <Button Text="Item 2" Background="Aqua"></Button>
    <Button Text="Item 3" Background="Green"></Button>
    <Button Text="Item 4" Background="DarkOrange"></Button>
</FlexLayout>

Теперь в столбец, но в обратном направлении (ColumnReverse):

Как можно видеть по рисунку, ColumnReverseприводит к тому, что элементы начинают размещаться снизу вверх. Аналогичным образом работают и два других значения свойства Direction

Direction = "Row"Direction = "RowReverse"

Как и в случае со StackLayout, мы можем управлять размерами элементов в контейнере, используя их собственные свойства HeightRequest и WidthRequest. При этом, если общий размер всех элементов будет больше, чем доступное в контейнере пространство, то дочерние элементы будут «сжиматься» таким образом, чтобы поместиться в контейнере. Например, рассмотрим следующий пример:

<FlexLayout Direction="RowReverse">
    <Button Text="Item 1" WidthRequest="200" Background="Red"></Button>
    <Button Text="Item 2" WidthRequest="200" Background="Aqua"></Button>
    <Button Text="Item 3" WidthRequest="200" Background="Green"></Button>
    <Button Text="Item 4" WidthRequest="200" Background="DarkOrange"></Button>
</FlexLayout>

Теперь запустим приложение и попробуем изменить ширину окна таким образом, чтобы его размер был явно меньше, чем ширина всех кнопок:

Перенос элементов

Не всегда необходимо и целесообразно, чтобы элементы в контейнере «сжимались». Чтобы дочерние элементы контейнера сохраняли свой размер по основной оси, мы можем использовать свойство Wrap. Это свойство может принимать три значения:

Значение	Описание
`NoWrap`	Не переносить элементы (значение по умолчанию)
`Wrap`	Переносить элементы. В этом случае элементы сохраняют свой размер по основной оси
`Reverse`	Переносить элементы в обратном порядке

Вернемся к нашему предыдущему примеру и установим для контейнера одно из значений свойства Wrap:

<FlexLayout Direction="RowReverse" Wrap="Wrap">
    <Button Text="Item 1" WidthRequest="200" Background="Red"></Button>
    <Button Text="Item 2" WidthRequest="200" Background="Aqua"></Button>
    <Button Text="Item 3" WidthRequest="200" Background="Green"></Button>
    <Button Text="Item 4" WidthRequest="200" Background="DarkOrange"></Button>
</FlexLayout>

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

Распределение пространства между дочерними элементами (свойство JustifyContent)

Еще одним широко используемым свойством FlexLayout является свойство JustifyContent. Это свойство управляет тем, как будет распределяться свободное пространство между дочерними элементами контейнера вдоль основной оси и может принимать следующие значения:

Значение	Описание
`Start`	Значение по умолчанию. Элементы «прижимаются» к началу основной оси и всё свободное пространство контейнера остается только в одной стороны (например, справа, если значение Direction равно Column
`Center`	Все элементы выстраиваются в центре. Свободное пространство распределяется поровну слева и справа от элементов
`End`	Элементы «прижимаются» к концу основной оси и всё свободное пространство контейнера остается только в одной стороны (например, слева, если значение Direction равно Column
`SpaceBetween`	Элементы распределяются равномерно таким образом, чтобы первый элемент прижимался к началу оси, а последний — к концу оси. Свободное пространство распределяется равномерно между элементами
`SpaceAround`	Аналогично предыдущему значению, однако первый и последний элемент «отстают» от начала и конца основной оси на равное расстояние
`SpaceEvenly`	Все элементы располагаются равномерно по основной оси, причем, между элементами, а также сначала и с конча основной оси остается равное пространство

Например, распределим дочерние элементы в контейнере, используя значение SpaceBetween

<FlexLayout Direction="RowReverse" Wrap="Wrap" JustifyContent="SpaceBetween">
    <Button Text="Item 1" WidthRequest="200" Background="Red"></Button>
    <Button Text="Item 2" WidthRequest="200" Background="Aqua"></Button>
    <Button Text="Item 3" WidthRequest="200" Background="Green"></Button>
    <Button Text="Item 4" WidthRequest="200" Background="DarkOrange"></Button>
</FlexLayout>

В итоге, мы получим вот такой внешний вид приложения:

Итого

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