Панель свойств во FlutterFlow

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

❗️Выбранные вами свойства применяются только к выбранному виджету (или к странице, если виджеты не выбраны). Даже если у вас есть несколько одинаковых виджетов, вам придется настраивать их по отдельности. Некоторые свойства (например, шрифт) можно применить ко всему приложению, подробнее о них можно узнать здесь.

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

Когда вы выбираете любой виджет, его имя появляется на панели свойств. Имя по умолчанию для любого виджета соответствует его типу. Например, при выборе виджета контейнера его имя отображается как Контейнер. Однако вы можете использовать значок редактирования справа, чтобы изменить его имя.

Эта кнопка позволяет вам создать пользовательский компонент из выбранного вами виджета. Пользовательский компонент — это виджет, который можно повторно использовать и стилизовать во всем вашем приложении. Пользовательский компонент может сэкономить много вашего времени, создавая компоненты для всех общих виджетов (которые имеют одинаковый стиль или поведение) в вашем приложении, таких как кнопки, текстовые поля и так далее.
Узнайте больше о создании пользовательского компонента из существующего виджета.

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

❗️Действия зависят от выбранного виджета (к некоторым виджетам нельзя применить никаких действий).

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

❗️При использовании действия Navigate, если вы переходите на страницу, которая принимает один или несколько параметров, то вам необходимо определить значение (значения) для передачи в разделе Pass Parameters.

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

На вкладке «Свойства» находятся свойства виджета, которые можно изменять. Когда виджет не выбран, на этой панели отображаются свойства страницы (т.е. свойства Scaffold). Доступные свойства зависят от типа виджета.
Для элементов страницы видимость является единственным общим свойством, остальные свойства зависят от выбранного виджета.
Для элементов базы, элементов макета и элементов формы общими являются свойства видимости, отступов и выравнивания. Остальные свойства зависят от выбранного виджета.
Дополнительные сведения о каждом виджете содержатся в разделе Виджеты.

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

Чтобы добавить запрос, необходимо выбрать тип запроса из выпадающего меню. Ниже перечислены типы запросов, которые вы можете сделать:

• Сбор запросов
• Документ из ссылки
• Вызов API
• Поиск Algolia

Для его использования вам необходимо завершить настройку Firebase для этого проекта на FlutterFlow и создать коллекцию Firestore, которую можно загрузить здесь. Выберите коллекцию Firestore, затем вы можете загрузить одну запись или список записей. Узнайте больше о том, как сделать запрос к коллекции.

❗️Только виджеты, поддерживающие несколько дочерних элементов, могут загружать список записей.

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

Вы можете инициировать вызов API Call при появлении виджета на экране. Сначала определите вызов API, перейдя на страницу Вызовы API из меню навигации, а затем укажите имя вызова API. Если вызов API принимает какой-либо параметр, вы можете передать его, определив его имя и значение. Узнайте больше о том, как добавлять вызовы API.

Этот запрос вернет список подходящих записей, которые могут быть использованы виджетами данного экрана. Для использования поиска Algolia необходимо иметь коллекцию Firestore, подключенную к Algolia, и настроить ее на FlutterFlow, перейдя в Настройки и интеграции > Интеграции > Algolia. Вы можете определить этот запрос, выбрав коллекцию Firestore и указав поисковый запрос. Узнайте больше о том, как добавить Algolia Search.

Виджеты, которые могут работать с несколькими дочерними виджетами, имеют дополнительную вкладку Generate Dynamic Children. Она позволяет генерировать несколько дочерних виджетов из списка.

❗️Обычно это полезно, когда вы получаете данные из вызова API.

Некоторые из виджетов, которые могут работать с несколькими дочерними элементами, это Column, Row, Stack, ListView, GridView и PageView. На этой вкладке вы можете выбрать имя переменной, в которой будут храниться значения (чтобы на нее можно было легко ссылаться в любом другом виджете), максимальное количество элементов и источник, который будет использоваться для получения значений.

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