Перейти к основному содержимому

Обзор иерархии ресурсов

Это руководство поможет вам разобраться в структуре и элементах типичного проекта FlutterFlow. Мы пройдемся по важным частям приложения — от общего проекта до отдельных элементов дизайна, — объяснив их назначение и связь с традиционными компонентами приложений Flutter.

Части приложения FlutterFlow​

На диаграмме ниже показано, как устроено приложение FlutterFlow.

Части приложения FlutterFlow

  1. Project: Представляет собой общее приложение, которое вы создаете в FlutterFlow. Оно включает все остальные элементы, перечисленные ниже, и служит контейнером для всех усилий по разработке вашего приложения в FlutterFlow. Подробнее о создании проекта читайте здесь.
  2. Page: Относится к отдельным экранам в проекте FlutterFlow. Каждая страница представляет собой часть пользовательского интерфейса, с которой пользователи взаимодействуют в приложении. Несколько страниц вместе образуют полный пользовательский интерфейс вашего приложения. Подробнее о страницах в FlutterFlow читайте здесь.
  3. Built-in widgets: Это предустановленные виджеты, предоставляемые FlutterFlow, которые вы можете использовать для создания пользовательского интерфейса приложения. Built-in widgets упрощают процесс разработки, предлагая распространенные элементы UI, такие как кнопки, текстовые поля, ползунки и т. д.
  4. Component: Компонент в FlutterFlow — это переиспользуемый блок UI, который можно применять на разных страницах в проекте. Компоненты полезны для поддержания согласованности и снижения избыточности в дизайне приложения, поскольку один и тот же компонент (например, пользовательский диалоговый блок) можно вставлять в любое нужное место. Подробнее о создании компонента читайте здесь.
  5. Design System: Это набор стандартов дизайна в вашем проекте FlutterFlow. Design System в FlutterFlow включает предопределенные стили, обеспечивающие визуальную согласованность по всему приложению. Подробнее о design system читайте здесь.

От Flutter к FlutterFlow​

Если вы переходите из Flutter, полезно понять соответствие между Flutter и FlutterFlow. На диаграмме ниже показано, как традиционные компоненты приложений Flutter соотносятся с их эквивалентами в FlutterFlow.

От Flutter к частям приложения FlutterFlow

  1. MyApp to Project: В Flutter MyApp обычно представляет корень вашего приложения, где настраиваются маршруты и другие глобальные конфигурации. В FlutterFlow эквивалентом является "Project", который охватывает все приложение, включая его конфигурации и настройки. Подробнее о создании проекта читайте здесь.
  2. MyPage to Page: MyPage в Flutter представляет конкретный экран в приложении. Аналогично, в FlutterFlow каждая "Page" соответствует экрану, где вы создаете макет и функциональность, специфичную для этой страницы проекта. Подробнее о страницах в FlutterFlow читайте здесь.
  3. Column, Button, Text to Built-in widgets: В FlutterFlow виджеты объединены в категорию "Built-in widgets", которые пользователи могут перетаскивать на холст для создания UI. Подробнее о виджетах читайте здесь.
  4. Custom widget to Component: CustomWidget в Flutter обозначает пользовательские виджеты, выполняющие специфические функции, не покрытые встроенными виджетами. FlutterFlow переводит это в "Component", позволяя создавать и использовать пользовательские компоненты в проектах. Подробнее о создании компонента читайте здесь.
  5. Theme/style constants to Design System: В Flutter константы тем и стилей используются для обеспечения согласованного стиля по всему приложению. FlutterFlow применяет "Design System" для управления и применения единообразных стилей и тем по всему приложению. Подробнее о design system читайте здесь.

Описание ресурсов​

Resource Description — это краткая текстовая заметка, объясняющая назначение, использование или ключевые детали конкретного ресурса. Предоставляя четкие и лаконичные описания, вы создаете лучшую документацию проекта и более плавный опыт разработки — как для себя, так и для соавторов.

к сведению

Вот несколько причин, почему описания ресурсов могут быть полезны:

  • Командная работа: Когда несколько разработчиков или дизайнеров работают над одним проектом, краткие описания помогают всем понять роль каждого элемента без догадок.
  • Улучшенный поиск: Описания индексируются в поиске FlutterFlow. Это помогает быстро находить страницы, компоненты и другие ресурсы, особенно в крупных проектах.
  • Документация проекта: Служит встроенной документацией вашего приложения, что упрощает будущие обновления.

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

  • Project: Используйте описание на уровне проекта, чтобы суммировать общие цели или объем вашего приложения. Например, "Приложение для управления доставкой для малого бизнеса" помогает команде ориентироваться на основную задачу.
  • Page: Объясняет основную функцию страницы. Пример: "Отображает корзину покупок пользователя и варианты оформления заказа."
  • Component: Уточняет функциональность или дизайнерское намерение переиспользуемого компонента. Пример: "Переиспользуемый компонент карточки для использования в качестве ListTile."
  • Action Blocks: Предоставьте краткое описание того, что делает набор действий (например, "Отправляет уведомление на электронную почту пользователя при отправке формы").
  • Custom Functions: Опишите логику или назначение функции. Пример: "Вычисляет стоимость доставки на основе веса и расстояния."
  • Custom Actions: Укажите пользовательское поведение, которое вы создали, например "Открывает сканер QR-кода и возвращает отсканированное значение."
  • Custom Widgets: Объясните назначение или структуру виджета. Пример: "Карусельный виджет для отображения нескольких изображений с пагинацией."
  • Data Type: Суммируйте назначение пользовательской модели данных. Пример: "Представляет заказ пользователя, включая товары, общую стоимость и статус."
  • Parameters: Предоставьте контекст для использования параметра, включая ожидаемые типы данных или диапазоны значений. Пример: "Строка для хранения номера телефона пользователя — должен включать код страны."
  • Page/Component State Variables: Уточните, какие данные состояния хранятся и зачем. Например, "Отслеживает текущую выбранную вкладку в этом компоненте."
  • App State Variables: Опишите глобальные данные, общие для всех страниц. Пример: "Хранит токен аутентификации пользователя для всех сетевых запросов".
  • Constant: Укажите предназначение любого фиксированного значения, используемого по всему приложению. Пример: "Базовый URL API для всех сетевых вызовов".
  • Enum: Обоснуйте перечисленные значения. Пример: "Определяет возможные роли пользователя — admin, editor, viewer".
  • Firestore Collection: Объясните, какие данные хранит коллекция и как она связана с функциональностью вашего приложения. Пример: "Хранит все профили пользователей с полями для имени, электронной почты и URL фото профиля".

В FlutterFlow вы можете просматривать описания как подсказки, наводя курсор на зеленую иконку заметки.

подсказка

В генерируемом коде FlutterFlow вставляет описания в виде комментариев, похожих на docstring, рядом с соответствующими классами, методами или свойствами. Например, тип данных с именем OrderInfo и описанием «Представляет заказ пользователя, включая товары, общую стоимость и статус» получит этот текст над объявлением класса:

/// Represents a user’s order, including items, total cost, and status.
class OrderInfo {
/// The total price in USD for this order.
double totalAmount;
List<String> items;
// ...
}

В стандартной IDE (например, VS Code или Android Studio), если навести курсор на имя класса пользовательского типа данных, описание, заданное в FlutterFlow, отобразится как подсказка, помогая быстро понять назначение ресурса.

resource-description.avif