Колонка

Виджет Column используется для создания вертикального макета. Это один из наиболее часто используемых виджетов.

Вот как колонка располагает свои дочерние элементы:

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

На панели виджетов вы найдете все элементы пользовательского интерфейса или компоненты. Их можно добавить на холст с помощью метода перетаскивания. Также имеется строка поиска для быстрого поиска любого виджета.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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 позволяет получить ответ (содержащий список элементов) и показать их в колонке.

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

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

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

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

1. Выберите Column в дереве виджетов или в области холста.
2. Перейдите на вкладку Generate Dynamic Children (в правой части экрана).
3. Введите соответствующее имя переменной.
4. Установите значение Source на [apicall_name] Response (из Column).
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. Нажмите кнопку Подтвердить.

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

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