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

Построение макета

В 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

к сведению

На странице может быть только один главный виджет-родитель. То есть нельзя иметь два контейнера (на одном уровне) внутри Домашней страницы. Для этого вы можете обернуть два контейнера внутри виджета Column, что делает виджет Column одним родителем. column-as-single-parent.avif

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

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

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

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

4. Добавьте раздел обзоров​

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

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

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

Видеоуроки​

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