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

Создание макетов

В FlutterFlow макет страницы создаётся с помощью виджетов. Виджеты, такие как Text, Buttons, Images и Icons, отображаются на экране. Другие, такие как Containers, Rows, Columns и Stacks, напрямую не видны, но помогают расположить и позиционировать видимые элементы на странице.

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

Понимание концепции макетов​

Один из самых распространённых шаблонов макетов — это расположение виджетов вертикально или горизонтально. Для вертикального расположения используйте виджет Column. Для горизонтального — виджет Row. Если нужно разместить один виджет поверх другого, используйте виджет Stack.

к сведению

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

Создание макетов: упражнение​

Давайте разберём упражнение по созданию следующего макета:

build-layout-page.avif

Шаги по созданию указанного макета следующие:

  1. Набросайте макет
  2. Добавьте раздел с изображением
  3. Добавьте раздел с информацией
  4. Добавьте раздел с отзывами

1. Набросайте макет​

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

Разбиение указанного макета на разделы выглядит так:

breaking-main-layout-2.png

Далее определите виджеты, которые могут заменить эти разделы, например Column, Row и Stack. Как только у вас сложится чёткое представление о том, какие виджеты использовать, можно приступать к их добавлению.

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

Дальнейшее разделение мелкого участка выглядит так:

divide-smaller-section-2.png

к сведению

Страница может иметь только один родительский виджет. То есть внутри HomePage нельзя разместить два контейнера (на одном уровне). Для этого оберните их в виджет Column, который станет единственным родителем.

column-as-single-parent.avif

2. Добавьте раздел с изображением​

Верхний раздел включает виджеты Image и IconButton. Чтобы разместить IconButton поверх Image, оберните их в виджет Stack. Вот как это сделать:

3. Добавьте раздел с информацией​

Раздел с информацией состоит из нескольких виджетов Text внутри Column.

4. Добавьте раздел с отзывами​

Раздел с отзывами состоит из нескольких различных виджетов. Сначала добавьте Column, чтобы отделить информацию о рецензенте (изображение и имя) от текста отзыва. Затем отобразите информацию о рецензенте внутри виджета Row с использованием виджетов CircleImage и Text. Вот как это сделать:

Общие виджеты макетов​

Помимо виджетов Row, Column и Stack, существуют другие виджеты, которые широко используются для создания макетов страниц. Вот некоторые из них:

Видеоуроки​

Чтобы узнать больше о создании макетов, посмотрите наши видео: