Основные блоки построения интерфейса

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

В Атомарном дизайне мы начинаем с наименьших неделимых компонентов, известных как "атомы" — это ваши основные строительные блоки. Затем мы комбинируем эти атомы, чтобы сформировать "молекулы", которые впоследствии объединяются, создавая "организмы" или более крупные функциональные единицы. Применяя эту иерархическую структуру к FlutterFlow, мы упрощаем процесс разработки пользовательского интерфейса, делая его более эффективным и управляемым.

Теперь давайте рассмотрим, как этот структурированный подход реализуется в FlutterFlow, начиная с самых простых элементов и заканчивая созданием полноценных интерфейсов:

• Атомы
  • Это фундаментальные строительные блоки, которые служат основными элементами пользовательского интерфейса.
  • Примеры: TextField, Button, Icon.
• Молекулы
  • Это сгруппированные атомы, объединенные вместе и являющиеся наименьшими фундаментальными единицами составного элемента. Они формируют основные строительные блоки страниц, но часто могут использоваться самостоятельно.
  • Пример: EmailSignInField (включающий атом TextField и атом Icon).
• Организмы
  • Это сгруппированные молекулы, объединенные для формирования относительно сложного, различимого раздела интерфейса.
  • Пример: LoginComponent (включающий молекулу EmailSignInField, другую похожую молекулу PasswordSignInField и атом SubmitButton).
• Страницы
  • Страницы представляют собой полноценные экраны и представляют собой окончательный видимый вывод, с которым пользователи взаимодействуют. Они состоят из более мелких единиц, которые работают вместе для предоставления полного опыта, включая все необходимые функциональные элементы дизайна.
  • Пример: SignInPage

Теперь давайте применим вышеуказанные концепции к тому, что мы видим в FlutterFlow при создании нашего первого проекта.

Страницы

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

То, как вы определяете ваши страницы, определяет поток приложения и пользовательский опыт для пользователя. Например, в нашем Демонстрационном приложении электронной коммерции, после входа в систему пользователь попадает на страницу ProductListPage , на которой есть нижняя панель навигации, переносящая пользователя на различные страницы приложения, такие как ProfilePage, и т. д.

к сведению

Узнайте больше о создании новой Страницы и использовании ее Элементов Страницы, таких как AppBar, Drawer и т. д.

Виджеты

Страница обычно содержит комбинацию виджетов и компонентов.

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

Каждый виджет можно рассматривать как атом или молекулу, в зависимости от его сложности и отношения родитель-потомок. Например, атомарный виджет (например, TextField) не может содержать дочерний элемент, но молекулярные виджеты (например, Column или Row) могут.

к сведению

Узнайте больше о основных виджетах и о том, как составлять виджеты, чтобы создавать более сложные пользовательские интерфейсы.

Компоненты

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

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

к сведению

Узнайте больше о компонентах и о том, как их использовать на страницах.

Классы против Экземпляров

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

Например, Icon - это класс виджета. Когда вы используете его в разных частях приложения, вы создаете экземпляр класса виджета Icon и предоставляете ему различные значения для каждого использования.

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

Когда вы размещаете этот ProductListCard на разных страницах вашего приложения, каждый добавленный вами является экземпляром. Например, на странице ProductListPage мы создали экземпляр с именем topSellingProductCard для использования в разделе Лучшие продажи. Точно так же, в CategoryProductListPage мы создали экземпляр с именем categoryProductCard.

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