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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Элементы разметки

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

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

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

Базовые элементы

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

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

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

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

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

В FlutterFlow категория Элементы страницы состоит из виджетов, таких как AppBar, Floating Action Button (FAB), Drawer и End Drawer, которые необходимы для структурирования страниц и обеспечения навигации по приложению.

к сведению

Подробнее о элементах страницы, таких как AppBar, Snackbar, Drawers и т. д., и о том, как использовать их в FlutterFlow.

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

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

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

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

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