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

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

Вот как Scaffold способствует дизайну страницы в FlutterFlow:

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

ПОЖАЛУЙСТА, ОБРАТИТЕ ВНИМАНИЕ

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

AppBar

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

AppBar состоит из следующих разделов:

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

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

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

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

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

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

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

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

Плавающая кнопка действия (FAB)

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

Расширенное свойство

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

Сценарии использования

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

Добавление плавающей кнопки действия на страницу

Выдвижное меню (Drawer)

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

Добавление выдвижного меню на страницу

End-Drawer

По аналогии можно также добавить на страницу выдвижное меню с другой стороны экрана — End Drawer.

[Действие] для выдвижного меню

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

Типы действий для выдвижного меню

Вы можете добавить три типа действий для управления выдвижным меню.

Open Drawer: Открывает обычное выдвижное меню.
Open End Drawer: Открывает выдвижное меню с противоположной стороны.
Close Drawers: Закрывает все открытые выдвижные меню.

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

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

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

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

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

Включение панели навигации в настройках

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

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

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

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

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

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

к сведению

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

Чтобы изменить порядок элементов Nav Bar:

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

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

Это стандартный стиль панели навигации в стиле Material Design. Вы можете показать или скрыть метки для выбранных и невыбранных элементов.

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

Свойство	Тип	Описание
Show Labels (Selected)	Переключатель	Позволяет включить или отключить отображение меток для выбранных элементов в `NavBar`.
Show Labels (Unselected)	Переключатель	Позволяет включить или отключить отображение меток для невыбранных элементов в `NavBar`.
NavBar Color	Колесо цветов	Устанавливает цвет фона `NavBar`.
Selected Icon Color	Колесо цветов	Определяет цвет иконок, когда они выбраны.
Unselected Icon Color	Колесо цветов	Определяет цвет иконок, когда они не выбраны.

Этот современный стиль панели навигации 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. Варианты включают центр, пространство между элементами и т.д.
Gap Between Icon and Text: Устанавливает расстояние между иконкой и текстом внутри кнопок навигации.
Animation Duration (ms): Определяет продолжительность анимации при переключении между элементами.
Haptic Feedback: Переключатель, который включает или отключает тактильную обратную связь при взаимодействии с элементами NavBar, улучшая тактильные ощущения.

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

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

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

SnackBar

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

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

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

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

Как показать сообщение SnackBar

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

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

Свойства действия

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

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

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

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

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

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

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

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

Опции скрытия:

Только текущий: Эта опция скрывает только текущий отображаемый snackbar.
Все (текущий и очередь): Эта опция скрывает текущий snackbar, а также все snackbars в очереди.

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

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