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

Блоки построения UI

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

В Atomic Design мы начинаем с самых маленьких, неделимых компонентов, известных как «атомы» — это ваши базовые блоки построения. Далее мы объединяем эти атомы, чтобы сформировать «молекулы», которые в свою очередь сливаются в «организмы» или более крупные функциональные единицы. Применяя эту иерархическую структуру в FlutterFlow, мы упрощаем процесс разработки UI, делая его эффективным и управляемым.

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

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

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

Pages​

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

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

к сведению

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

Widgets​

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

Сначала поговорим о виджетах — это атомарные элементы или блоки построения структуры UI в FlutterFlow.

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

к сведению

Подробнее о базовых виджетах и о том, как составлять виджеты для создания более сложного UI.

Components​

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

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

к сведению

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

Classes vs Instances​

При добавлении элемента UI на страницу вы используете классы виджетов и создаёте их экземпляры.

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

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

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

Class-Instance.png

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