Ряды, Колонки и Стек

В Flutter Row (Ряды), Column (Колонки) и Stack (Стек) являются фундаментальными виджетами макета, которые позволяют вам структурировать пользовательский интерфейс, организуя другие виджеты в различных визуальных расположениях. Вот как каждый из них работает:

• Row (Ряд): Row располагает свои дочерние виджеты в горизонтальной линии. Это полезно, когда вы хотите разместить элементы рядом по всей ширине экрана.

• Column (Колонка): Column организует свои дочерние виджеты вертикально, располагая их сверху вниз. Это идеально подходит для размещения элементов, которые должны появляться в вертикальной последовательности, таких как список сообщений в чат-приложении или записи в форме.

• Stack (Стек): Stack располагает свои дочерние виджеты друг над другом, позволяя наложение элементов. В Stack виджеты могут быть позиционированы абсолютно относительно краев Stack, что дает вам контроль над точным расположением каждого элемента.

Каждый из этих виджетов служит разным целям, и выбор между ними зависит от того, как необходимо организовать компоненты пользовательского интерфейса:

Общее Свойство: Выравнивание

Основная Ось

Основная ось - это основное направление, в котором располагаются дочерние виджеты в виджете Row или Column.

Row (Ряд): Основная ось проходит горизонтально. Дочерние виджеты располагаются слева направо.

FlutterFlow позволяет установить свойство Основной Оси для Ряда со следующими типами:

Свойство Основной Оси Ряда имеет следующие типы: Начало, Конец, Центр, Равномерно, Равномерно по обе стороны, Между элементами

Column (Колонка): Основная ось проходит вертикально. Дочерние виджеты располагаются сверху вниз.

FlutterFlow позволяет установить свойство Основной Оси для Колонки со следующими типами:

Свойство Основной Оси Колонки имеет следующие типы: Начало, Конец, Центр, Равномерно, Равномерно по обе стороны, Между элементами

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

Перпендикулярная Ось

Перпендикулярная ось перпендикулярна основной оси и контролирует выравнивание и расстояние между виджетами вдоль этого вторичного направления. Она имеет типы: Начало, Центр, Конец.

Row (Ряд): Перпендикулярная ось проходит вертикально. Она определяет, как дочерние виджеты выравниваются сверху вниз внутри ряда.

Типы Перпендикулярной Оси для Ряда. Основная Ось Ряда установлена на Центр.

Column (Колонка): Перпендикулярная ось проходит горизонтально. Она контролирует, как дочерние виджеты выравниваются слева направо внутри колонки.

Типы Перпендикулярной Оси для Колонки. Основная Ось Колонки установлена на Центр

Выравнивание Стека

Для Stacks концепция основной и перпендикулярной осей менее применима, поскольку виджеты выравниваются относительно всей области Stack. В FlutterFlow вы можете контролировать выравнивание дочерних виджетов Stack с помощью свойства Stack под названием Выравнивание По Умолчанию (Default Child Alignment), которое позиционирует дочерние виджеты, используя координаты X и Y.

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

Расширение и Гибкость (для Row & Column)

Когда виджеты размещаются внутри Row или Column в макете, они получают доступ к дополнительному свойству, называемому Расширение и Гибкость. Это свойство контролирует поведение виджета в отношении занимаемого им доступного пространства внутри его родительского Row или Column.

Expanded

Свойства Расширения выглядят следующим образом:

• По умолчанию: Виджет НЕ заполняет пространство вдоль основной оси (горизонтально для Row, вертикально для Column), занимая минимальное пространство, необходимое для его содержимого.

• Гибкость: Позволяет виджету занимать доступное пространство вдоль основной оси (горизонтально для Row, вертикально для Column). Можно представить это как "Максимальная Ширина" равную доступному пространству. Виджет может занимать меньше пространства, если он меньше, но иначе будет ограничен доступной шириной.

  Понимание Макетов

  Гибкость будет отключена, если дочерний виджет находится в Row с неограниченной шириной или Column с неограниченной высотой.

• Расширенное: Делает виджет заполняющим пространство вдоль основной оси (горизонтально для Row, вертикально для Column).

Использование Expanded & Flexible на Примере

1. Поведение По Умолчанию: Здесь вы видите два дочерних виджета, отображаемых рядом друг с другом, каждый занимает только необходимое пространство для отображения своего содержимого без расширения.

2. Использование Расширенного Виджета: Первый дочерний виджет (выделенный красным) обернут в виджет Expanded. Это заставляет его занимать все оставшееся пространство в контейнере после учета места, занимаемого другими виджетами. Здесь первый дочерний виджет растягивается, чтобы заполнить все дополнительное пространство, выталкивая другие виджеты в сторону или уменьшая их до минимального размера.

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

4. Все Гибкие Виджеты: В последнем примере каждый дочерний виджет обернут в виджет Flexible. Это позволяет виджетам расширяться, чтобы заполнить доступное пространство, но в отличие от Expanded, они могут также уменьшаться ниже своего выделенного пространства, если необходимо, в зависимости от факторов гибкости и минимального пространства, требуемого каждым виджетом. Если все виджеты имеют один и тот же коэффициент гибкости, они будут делить пространство равномерно, но смогут уменьшаться, если размер контента требует меньше места.

Давайте разберем концепцию Гибкости на другом примере:

Концепция Гибкости

• В левом изображении Дочерние 2 (в фиолетовом) и Дочерние 3 (в зеленом) сохраняют свои первоначальные размеры из-за стандартных настроек, что вызывает обрезку их содержимого, когда ширина контейнера ограничена. Они не могут адаптироваться к более маленьким пространствам, что может привести к обрезке содержимого. Это показывает ограничения стандартных настроек в ограниченных пространствах, где динамическое изменение размера улучшило бы видимость содержимого.

• В отличие от этого, на правом изображении используется виджет Flexible для Дочерних 2 и Дочерних 3, что позволяет им динамически адаптироваться к ограничениям ширины контейнера. Вместо сохранения первоначальных размеров эти виджеты могут уменьшаться или увеличиваться, делая макет адаптивным и обеспечивая, что содержимое остается видимым и хорошо выровненным вне зависимости от изменений размера экрана. Это адаптивное поведение критично для поддержки доступности и визуальной когерентности в различных окружениях отображения.

Гибкость

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

Поведение по умолчанию

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

При назначении коэффициента гибкости виджет может расширяться, чтобы заполнить доступное пространство в родительском контейнере. Например, в Row или Column, если один виджет имеет коэффициент гибкости 1, а другой - 2, второй виджет займет вдвое больше пространства, чем первый.

Пример использования коэффициента гибкости

• Дочерний 2 (фиолетовый) с более высоким коэффициентом гибкости (8) постоянно занимает большую часть пространства, показывая, как более высокое число увеличивает выделенное пространство относительно других виджетов.

• Дочерний 3 (зеленый) имеет различные коэффициенты гибкости (1 и 4), демонстрируя, как увеличение коэффициента гибкости позволяет виджету занимать больше пространства, но всё еще меньше, чем дочерни