Введение в виджеты

Виджеты являются строительными блоками пользовательского интерфейса вашего приложения в FlutterFlow. Каждый виджет представляет собой фундаментальный элемент пользовательского интерфейса, который способствует общей компоновке и функциональности вашего приложения. В FlutterFlow вы создаете пользовательский интерфейс своего приложения, комбинируя базовые виджеты, такие как Text, Button и Container, с более сложными, многоэлементными виджетами, такими как Rows, Column, Lists.

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

Типы виджетов в FlutterFlow

• Встроенные виджеты: Вы можете выбирать из разнообразия встроенных виджетов в FlutterFlow. Об этом рассказывается на протяжении всего этого раздела.

• Компоненты: Вы также можете создавать свои собственные многоразовые виджеты, или Компоненты, собрав несколько виджетов с помощью интерфейса перетаскивания и сброса FlutterFlow.

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

• Тематические виджеты: Тематические виджеты могут быть повторно использованы в вашем приложении, что упрощает обновление стилей в целом. Если вы решите изменить какие-либо свойства, такие как цветовые схемы или шрифты, вы можете обновить тематический виджет вместо модификации каждого виджета индивидуально.

Дерево виджетов

Дерево виджетов является структурным представлением того, как виджеты — начиная от атомарных элементов вроде Text и Button до более сложных молекул и организмов — организованы на странице. Оно описывает отношения родитель-потомок, которые определяют компоновку и функциональность вашего пользовательского интерфейса. Эта иерархия похожа на концепцию атомарного дизайна, где атомы и молекулы объединяются, чтобы формировать более сложные структуры, в конечном итоге создавая цельный интерфейс.

РАЗБОР ДЕРЕВА ВИДЖЕТОВ

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

• Примерная страница: Корень дерева виджетов, представляющий всю страницу.
  • Column: Непосредственно под корнем, этот виджет организует свои дочерние виджеты вертикально. Он главный виджет компоновки для этой страницы.
    • Container: Молекулярный виджет, который содержит другой виджет, предоставляя отступы, поля, границы или цвет для своего дочернего элемента.
      • Text: Атомарный виджет, отображает строку текста внутри Container.
    • Row: Молекулярный виджет, который располагает своих дочерних элементов горизонтально. Он содержит несколько виджетов Icon.
      • Icon: Это атомарные виджеты, каждый представляет изображение Icon. Они повторяются здесь дважды внутри Row.
    • Image: Атомарный виджет, размещенный непосредственно под Column, используется здесь для отображения изображения.
    • Button: Атомарный виджет также под Column, используемый для взаимодействия с пользователем.

Каждый виджет в этом дереве выполняет определенную роль в создании пользовательского интерфейса, от базовых элементов, таких как Text и Image, до структур компоновки, таких как Rows и Columns, которые организуют эти элементы.

Вот как это дерево виджетов будет представлено в FlutterFlow:

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

Категории виджетов

В FlutterFlow у нас есть следующие категории виджетов:

• Элементы компоновки
• Основные элементы
• Элементы страницы
• Элементы формы

Элементы компоновки

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

Общие элементы компоновки включают:

Виджет	Описание	Пример
Row	Располагает свои дочерние виджеты горизонтально
Column	Организует свои дочерние виджеты вертикально
Stack	Размещает свои дочерние виджеты друг на друга, позволяя перекрываться элементам
Container	Предоставляет модель коробки для одного дочернего виджета с возможным отступом, полями, границами, тенью и цветом фона

Найдите полный список на этой странице индекса.

Основные элементы

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

Примеры включают:

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

Найдите полный список на этой странице индекса.

Элементы страницы

В FlutterFlow категория Элементы страницы включает виджеты типа AppBar, Плавающая кнопка действия (FAB), Выдвижное меню и Конечное выдвижное меню, которые являются важными для структурирования страниц и облегчения навигации по всему приложению.

к сведению

Узнайте больше о Элементах страницы, таких как AppBar, Snackbar, Выдвижные меню и т. д., а также о том, как их использовать в FlutterFlow.

Элементы формы

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

Примеры включают:

Виджет	Описание	Пример
Text Field	Позволяет пользователям вводить текст.
Radio Button	Позволяет пользователям выбрать один из вариантов.
Dropdown	Предоставляет меню с несколькими вариантами, где пользователи могут выбрать один.

Найдите полный список на этой странице индекса.

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