Элементы страницы

Элементы страницы в FlutterFlow представляют собой ключевые компоненты, определяющие структуру и функциональность каждой страницы вашего приложения. Понимание этих элементов крайне важно для создания интуитивно понятных и эффективных пользовательских интерфейсов. От навигационных элементов, таких как AppBar и Drawer, до интерактивных компонентов, таких как плавающие кнопки действий (FAB), каждый элемент играет конкретную роль в формировании пользовательского опыта.

Вот как Scaffold способствует проектированию страниц в FlutterFlow:

AppBar: Scaffold позволяет легко добавить AppBar в верхней части страницы, где могут размещаться заголовок, элементы управления навигацией и другие действия.
Floating Action Button (FAB): Кнопка действия, которая обычно используется для основных действий на экране, например, для добавления нового контакта или создания сообщения.
Drawer & End-Drawer: Выдвижное меню для навигации по приложению, доступное из AppBar или свайпом с края экрана.
Body: Основная область содержимого, куда вы размещаете виджеты для тела страницы.

ВАЖНО

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

AppBar

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

AppBar разделен на следующие разделы:

Leading: Обычно содержит меню или иконку возврата, обеспечивающую управление навигацией. По умолчанию, если присутствует drawer или навигация по страницам с включенной опцией "Allow Back Navigation", отображается соответствующая иконка (например, меню или стрелка назад). Однако вы можете заменить ее на другой виджет Icon, если хотите, что позволит настроить более подходящие варианты навигации.
Title: В основном служит для указания содержимого активного экрана или отображения названия приложения, помогая пользователям ориентироваться в контексте приложения. Этот раздел также можно настроить с помощью различных виджетов для более персонализированного визуального представления.
Actions: Содержит кнопки с иконками для различных операций, таких как поиск, обмен и другие, расположенные в правом конце.

Добавление AppBar на страницу

Включение кнопки по умолчанию

Переключатель "Show Default Button" в панели свойств AppBar управляет отображением иконки по умолчанию в leading (обычно стрелка назад или иконка меню), когда пользователь может вернуться назад или на странице присутствует Drawer.

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

Если вы хотите заменить иконку по умолчанию на другую в области leading, следуйте руководству по добавлению AppBar.

Сгенерированный код

В сгенерированном коде, когда этот переключатель включен, свойство automaticallyImplyLeading виджета AppBar устанавливается в true. Это означает, что подходящая кнопка по умолчанию будет отображена, если включена навигация назад или обнаружен Drawer при запуске приложения.

Floating Action Button (FAB)

Floating Action Button (FAB) — это отличительная круглая кнопка, которая парит над содержимым и обычно используется для основного действия в приложении, например, для добавления нового элемента или создания сообщения.

Свойство Extended

Эта разновидность FAB включает как иконку, так и метку, что делает ее больше стандартной круглой FAB. Она полезна, когда вы хотите, чтобы кнопка действия передавала больше информации, чем может предоставить только иконка, например, текст, объясняющий действие ("Добавить задачу", "Создать пост" и т. д.).

Случаи использования

Расширенная FAB особенно полезна в приложениях, где действие требует четкого и немедленного распознавания пользователем, чего нельзя полностью добиться только иконкой. Она также удобна в интерфейсах, где достаточно места для размещения более длинной кнопки без загромождения UI.

Добавление Floating Action Button на страницу

Drawers

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

Добавление Drawer на страницу

End-Drawer

Аналогичным образом вы можете добавить End Drawer на свою страницу.

Действие Drawer [Action]

С помощью этого действия вы можете открывать и закрывать drawers нажатием кнопки. Например, открывать drawer из виджета, размещенного вне AppBar, и закрывать его из виджета внутри drawer.

Типы действий drawer

Существует три типа действий, которые вы можете добавить для drawer.

Open Drawer: Открывает обычный drawer.
Open End Drawer: Открывает конечный drawer.
Close Drawers: Закрывает все открытые drawers.

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

Выберите виджет (например, IconButton, Button), для которого вы хотите определить действие.
Выберите Actions в панели свойств (правое меню) и нажмите Open. Это откроет редактор потоков действий в новом всплывающем окне.
1. Нажмите + Add Action.
2. Справа найдите и выберите действие Drawer.
3. Выберите тип действия Drawer среди Open Drawer, Open End Drawer и Close Drawers.
4. Нажмите Close.

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

Вы можете отображать до трех или пяти основных или верхнеуровневых страниц (страниц, доступных из любого места в приложении) внутри NavBar.

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

По умолчанию NavBar отключена для любого проекта, созданного в FlutterFlow. Перед тем как добавлять страницы в NavBar, вам нужно включить ее в настройках FlutterFlow. Перейдите в Setting and Integrations > General > NavBar & AppBar и включите Nav Bar.

предупреждение

Изначально в вашей NavBar не будет никаких страниц. Вы увидите сообщение с инструкцией добавить как минимум две страницы. Перед продолжением убедитесь, что вы создали как минимум две страницы. Если вам нужна помощь с добавлением новой страницы, вы можете найти подробную информацию здесь.

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

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

Label: Эта метка будет отображаться в Nav Bar.
Nav Bar Icon: Эта иконка представляет страницу в Nav Bar. Вы также можете выбрать ее размер.

к сведению

Обратите внимание, что NavBar появится на холсте только если вы добавили в нее как минимум две страницы.

Чтобы переставить элементы Nav Bar:

Перейдите в Setting and Integrations > General > NavBar & AppBar > Nav Bar.
В разделе Re-Order Page Icons найдите страницу, которую хотите переставить, нажмите на иконку гамбургера (иконка с тремя линиями) рядом с ней и перетащите ее вверх или вниз.

При включении NavBar она изначально использует стиль Flutter Default Nav Bar. Однако, если вы хотите больше вариантов настройки, вы можете установить выпадающий список Nav Bar Style на один из следующих:

Это стандартный NavBar в стиле material. Вы можете показывать или скрывать метки как для выбранных, так и для невыбранных элементов.

Свойства стиля

Property	Type	Description
Show Labels (Selected)	Toggle	Позволяет включать или отключать отображение меток для выбранных элементов в `NavBar`.
Show Labels (Unselected)	Toggle	Позволяет включать или отключать отображение меток для невыбранных элементов в `NavBar`
NavBar Color	Color Wheel	Устанавливает цвет фона `NavBar`
Selected Icon Color	Color Wheel	Указывает цвет иконок, когда они выбраны.
Unselected Icon Color	Color Wheel	Указывает цвет иконок, когда они не выбраны.

Этот современный NavBar в стиле Google имеет тонкую анимацию, которая раскрывает метку элемента (название страницы), но отображает метку только для выбранного элемента.

Свойства стиля

Nav Bar Color: Устанавливает цвет фона NavBar.
Selected Icon & Text Color: Изменяет цвет иконки и текста, когда элемент выбран.
Unselected Icon & Text Color: Устанавливает цвет для иконок и текста, когда элемент не выбран.
Selected Background Color: Изменяет цвет фона выбранного элемента.
Show Unselected Border: Переключает видимость границы вокруг невыбранных элементов
Border Width: Указывает ширину границы вокруг кнопок элементов NavBar.
Border Radius: Определяет округлость углов кнопок элементов NavBar.
Border Color: Изменяет цвет границ вокруг кнопок элементов NavBar.
Nav Button Padding: Настраивает отступ внутри каждой кнопки навигации.
Nav Button Margin: Управляет отступом вокруг каждой кнопки навигации.
Nav Button Alignment: Позволяет настроить выравнивание кнопок навигации внутри NavBar. Доступны варианты вроде center, space-between и т. д.
Gap Between Icon and Text: Указывает расстояние между иконкой и текстом внутри кнопок навигации.
Animation Duration (ms): Определяет продолжительность анимаций при переключении между элементами.
Haptic Feedback: Переключатель, который включает или отключает тактильную обратную связь при взаимодействии с элементами NavBar, улучшая тактильный опыт.

Этот стиль NavBar отображается как плавающий элемент над страницами и показывает метки для всех элементов в NavBar.

Свойства стиля

Nav Bar Color: Устанавливает цвет фона NavBar.
Selected Icon & Text Color: Указывает цвет иконки и текста, когда элемент выбран.
Unselected Icon & Text Color: Определяет цвет для иконок и текста, когда они не выбраны.
Selected Background Color: Изменяет цвет фона выбранного элемента.
Width: Управляет шириной NavBar.
Border Radius: Определяет округлость углов NavBar.
Elevation: Настраивает эффект тени или возвышения под NavBar, что помогает создать вид плавающего элемента над другим содержимым.
Button Border Radius: Указывает радиус для границ каждой кнопки внутри NavBar.
Nav Button Margin: Устанавливает отступ вокруг каждой кнопки навигации
Nav Button Padding: Управляет отступом внутри каждой кнопки навигации.

SnackBar

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

Когда использовать Snackbar?

Вот несколько распространенных случаев использования SnackBar в приложении:

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

Показ сообщения SnackBar

Действие Show SnackBar [Action]

Material Design позволяет добавить интерактивный элемент в уведомление SnackBar, позволяя пользователям отвечать непосредственно из сообщения snack.

Свойство Add Action

Обычно SnackBar может включать одну кнопку действия. Эта кнопка используется для предоставления пользователям немедленного варианта взаимодействия с сообщением snack.

Распространенные случаи использования включают отмену действия, на которое ссылается сообщение snack (например, отмену удаления), повтор попытки неудачной задачи (например, переподключение к сети) или любые другие быстрые задачи восстановления или ответа.

Настройка: Действие внутри SnackBar настраивается. Вы можете определить метку кнопки, ее внешний вид и функцию, которую она выполняет при нажатии. Это позволяет SnackBar не только информировать пользователей, но и вовлекать их значимым образом, улучшая пользовательский опыт.
Тайм-ауты и видимость: Наличие действия может влиять на продолжительность отображения SnackBar. По умолчанию SnackBar может автоматически исчезнуть через несколько секунд, но если присутствует кнопка действия, пользователям может потребоваться больше времени на чтение сообщения и ответ, поэтому вы можете рассмотреть корректировку продолжительности отображения.

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

Действие Hide SnackBar [Action]

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

Очередь Snackbar: Когда несколько SnackBar активируются последовательно, они ставятся в очередь для отображения по одному, а не все сразу. Каждый SnackBar ждет исчезновения предыдущего, прежде чем появится следующий.

Скрытие предыдущего Snackbar: Если вы хотите немедленно заменить отображаемый SnackBar новым, не дожидаясь его автоматического исчезновения, вы можете использовать действие Hide Snackbar в FlutterFlow.

Это действие имеет следующие варианты скрытия:

Current Only: Этот вариант скрывает только текущий отображаемый snackbar.
All (Current and Queue): Этот вариант скрывает текущий snackbar, а также любой snackbar в очереди.

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

Элементы страницы