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

Строки, столбцы и стек

В Flutter Rows, Columns и Stacks — это фундаментальные виджеты макета, которые помогают структурировать интерфейс, организуя другие виджеты в различных визуальных расположениях. Вот как работает каждый из них:

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

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

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

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

row-col-stack.png

Минимальная вложенность макета

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

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

Главная ось​

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

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

FlutterFlow позволяет установить свойство главной оси для Row в следующие типы:

row-main-axis.png

Свойство главной оси для Row имеет следующие типы: Start, End, Center, SpaceEvenly, SpaceAround, SpaceBetween

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

FlutterFlow позволяет установить свойство главной оси для Column в следующие типы:

column-main-axis.png

Свойство главной оси для Column имеет следующие типы: Start, End, Center, SpaceEvenly, SpaceAround, SpaceBetween

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

Поперечная ось​

Поперечная ось перпендикулярна главной оси и контролирует выравнивание и распределение виджетов по этому вторичному направлению. Она имеет следующие типы: Start, Center, End.

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

row-cross.png

Типы поперечной оси для Row. Главная ось Row установлена в Center.

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

column-cross.png

Типы поперечной оси для Column. Главная ось Column установлена в Center

Выравнивание в Stack​

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

stack-align.png

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

Расширение и Flex (для Row и Column)​

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

Expanded​

Свойства расширения следующие:

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

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

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

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

  • Expanded: Заставляет виджет заполнять пространство вдоль главной оси (горизонтальной для Row, вертикальной для Column).

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

expanded.png

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

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

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

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

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

Концепция Flexible

flexible.png

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

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

Flex​

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

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

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

Когда вы присваиваете фактор flex, виджет может расширяться, чтобы заполнить любое доступное пространство в родительском контейнере. Например, в Row или Column, если один виджет имеет фактор flex 1, а другой — 2, второй виджет займёт в два раза больше пространства, чем первый.

Пример Flex

flex.png

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

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

Найдите видеоурок об Expanded и Flexible:

Прокрутка​

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

  • Allow Scrolling: Когда включено, это позволяет содержимому превышать пределы экрана устройства или родительского контейнера, делая переполняющееся содержимое доступным через прокрутку.

  • Do Not Allow Scrolling: Если отключено, содержимое, превышающее границы экрана или его родительского контейнера, не будет доступно через прокрутку. Эта настройка заставляет содержимое помещаться в доступное видимое пространство, скрывая переполняющееся содержимое или потенциально вызывая проблемы с макетом.

Генерируемый код

В генерируемом коде Flutter включение прокрутки просто подразумевает обёртывание Row или Column в SingleChildScrollView(). Этот виджет регулирует размер и позицию своего дочернего элемента на основе входящих ограничений и движения прокрутки, эффективно управляя переполнением путём введения прокручиваемого поведения.

Отступы​

  • Items Spacing: Это поле устанавливает пространство между каждым дочерним виджетом внутри Row или Column. Вы можете указать статическое числовое значение, определяющее расстояние в пикселях между соседними дочерними элементами, или установить его из переменной.
Items Spacing против Padding

Предпочтите "Items Spacing", установленное на родительской строке или столбце, вместо padding на отдельных элементах. Это обеспечивает согласованность, особенно в нединамически генерируемых списках.

  • Apply to Start & End: Когда включено, это применяет указанный отступ элементов к началу и концу Row или Column. Это эффективно добавляет padding в начало и конец макета в дополнение к отступам между элементами.

  • Start Spacing and End Spacing: Эти свойства позволяют добавить специфические отступы в начало и конец Row или Column соответственно. Это полезно для тонкой настройки макета, чтобы обеспечить визуальный баланс содержимого внутри контейнера или предоставить чёткие поля.