Ряд

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

Чтобы добавить виджет Row в свой проект:

1. Перетащите виджет Row с вкладки Layout Elements (в панели виджетов) или добавьте его непосредственно из дерева виджетов.
2. Затем добавьте несколько виджетов Image из раздела Base Element.

Панель свойств можно использовать для настройки поведения

Здесь приведены инструкции по добавлению отступов.

Здесь приведены инструкции по настройке выравнивания.

Размер главной оси определяет, сколько места Строка должна занимать по главной оси (т.е. в горизонтальном направлении).

Вы можете установить размер главной оси с помощью следующих двух опций:

• Minimum(): Заставить Ряд занимать минимальный размер на главной оси. Эта опция делает размер строки равным общему размеру дочерних элементов внутри нее.
• Maximum(): Заставить строку занимать максимальный размер на главной оси. Эта опция заполняет все доступное пространство на главной оси.

Чтобы изменить размер главной оси:

1. Выберите Row в дереве виджетов или в области холста.
2. Перейдите в редактор свойств и прокрутите вниз до пункта Размер главной оси.
3. Выберите опцию Minimum() или Maximum() в соответствии с вашими требованиями.

Главная ось для виджета строки — это горизонтальная ось, поэтому регулировка этого параметра изменит горизонтальное распределение дочерних виджетов в строке.

Вы можете настроить выравнивание главной оси с помощью следующих параметров:

• Начало (): Размещать дочерние элементы как можно ближе к началу.
• Центр (): Размещать дочерние элементы как можно ближе к середине.
• Конец (): Разместить дочерние элементы как можно ближе к концу.
• Равномерно (): Равномерно разместить дочерние элементы.
• Space Around (): Равномерно разместите свободное пространство между дочерними элементами с некоторым дополнительным пространством в начале и конце.
• Space Between (): Равномерное размещение свободного пространства между дочерними элементами.

Чтобы изменить выравнивание главной оси:

1. Выберите строку в дереве виджетов или в области холста.
2. Перейдите в редактор свойств и прокрутите вниз до пункта Выравнивание по главной оси.
3. Выберите один из представленных вариантов, включая «Начало», «Центр», «Конец», «Пространство равномерно», «Пространство между» и «Пространство вокруг».

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

Вы можете настроить выравнивание поперечной оси с помощью следующих параметров:

• Начало (): Размещать дочерние элементы как можно ближе к началу.
• Центр (): Размещать дочерние элементы как можно ближе к середине.
• Конец (): Разместить дочерние элементы как можно ближе к концу.
• Stretch (): Заставить дочерние элементы заполнить поперечную ось (вертикально).

Чтобы изменить выравнивание по поперечной оси:

1. Выберите строку в дереве виджетов или в области холста.
2. Перейдите в редактор свойств и прокрутите вниз до пункта Выравнивание по поперечной оси.
3. Выберите один из отображаемых вариантов, включая «Начало», «Центр», «Конец» и «Растянуть».

Вы можете задать горизонтальное и вертикальное выравнивание виджетов внутри ряда. Кроме того, есть еще два варианта выравнивания для виджетов внутри родительского виджета:

• Expanded (): Эта опция расширяет виджет, чтобы заполнить доступное пространство главной оси. Для ряда это будет горизонтальная ось.
• Flex (): Эта опция доступна только в том случае, если внутри расширяемого ряда находится несколько виджетов. Этот параметр определяет пропорцию пространства, отведенного каждому виджету. Например, если виджет A имеет Flex = 1, а виджет B — Flex = 2, то A будет занимать 1/3 доступного пространства, а B — 2/3 пространства.

Чтобы выровнять виджеты внутри ряда:

1. Выберите виджет, а затем выберите правый значок() в разделе Expanded.
2. Аналогично установите для других виджетов значение Expanded. Теперь вы увидите свойство Flex.
3. Попробуйте добавить свойства Flex для развернутых виджетов (например, Widget A Flex = 1 и Widget B Flex = 2).

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

Посмотрите, как отобразить виджет пустого списка при отсутствии данных.

Возможно, вы храните данные на Firebase или на собственном сервере. Давайте посмотрим, как загрузить элементы и отобразить их на виджете Column.

1. Отображение данных из Firestore
2. Отображение данных из вызова API

Чтобы показать данные из Firestore, создайте коллекцию, сделайте запрос к коллекции, а затем отобразите данные.

Возможно, вы используете собственную инфраструктуру для хранения данных вашего приложения. Данные могут быть получены с помощью вызовов API.

Прежде чем показывать данные, полученные в результате вызова API, убедитесь, что вы выполнили все упомянутые предварительные условия.

• Будьте знакомы с вызовами API.
• Добавьте вызовы API в проект FlutterFlow.

После добавления вызова API в FlutterFlow он выглядит следующим образом:

Вызов API позволяет получить ответ (содержащий список элементов) и показать их в Строке.

Чтобы выполнить вызов API на Строке, выполните следующие действия:

1. Выберите виджет Row в дереве виджетов или в области холста.
2. Перейдите на вкладку Backend Query (в правой части экрана).
3. Установите для параметра Тип запроса значение Вызов API.
4. Установите Call Name (Имя вызова) на имя API, которое извлекает данные.
5. Нажмите кнопку Сохранить.

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

Чтобы создать динамические дочерние элементы:

1. Выберите Row в дереве виджетов или в области холста.
2. Перейдите на вкладку Generate Dynamic Children (в правой части экрана).
3. Введите соответствующее имя переменной.
4. Установите значение Source на [apicall_name] Response (из Row).
5. Установите для параметра Response Options значение JSON Body.
6. В разделе Доступные параметры нажмите на Сбросить и выберите Путь JSON.
7. Внутри JSON Path введите выражение JSON для получения списка. Как получить JSON Path, смотрите здесь.
8. Нажмите Сохранить.

Чтобы показать изображение из URL, хранящегося внутри ключа JSON:

1. Выберите виджет Image, перейдите на панель свойств, найдите свойство Path и нажмите на текст Set from Variable.
2. Выберите элемент [имя_переменной] из списка. Это должно быть имя переменной, которое вы указали при генерации дочерних элементов из переменной.
3. Установите для параметра Available Options значение JSON Path.
4. Внутри JSON Path введите выражение JSON для получения URL изображения. Как получить JSON Path, смотрите здесь.
5. Нажмите кнопку Подтвердить.

Вот как это выглядит, когда вы запускаете свое приложение:

Пожалуйста, найдите инструкции по отображению/скрытию виджета здесь.