Навбар

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

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

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

Добавление NavBar в ваш проект включает следующие шаги:

1. Добавление панели NavBar
2. Добавление страниц в NavBar
3. Изменения в панели предварительного просмотра NavBar

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

Чтобы включить NavBar:

1. Нажмите на Настройки и интеграции () в меню навигации (в левой части экрана).
2. В разделе Общие выберите NavBar & AppBar.
3. Включите переключатель Показать панель навигации.

Есть два места, где можно добавить страницы на панель NavBar:

1. Панель свойств
2. Редактор панели NavBar в конструкторе приложений

Чтобы начать добавлять страницы в NavBar с панели свойств:

1. Нажмите на кнопку Выбрать страницу или компонент () в меню навигации (в левой части экрана).
2. Выберите свою страницу.
3. Перейдите в Редактор свойств и прокрутите вниз до Свойств элемента панели Nav Bar.
4. Включите переключатель Показывать на панели навигации.
5. Найдите поле ввода Label и измените его на имя, которое идентифицирует страницу в NavBar.
6. В разделе Значок панели Nav Bar нажмите на кнопку Home Outlined, найдите новый значок и выберите значок, который идентифицирует страницу в NavBar.
7. Если необходимо изменить размер значка, введите значение в свойство Icon Size.
8. Аналогичным образом добавьте другие страницы в NavBar.

Чтобы начать добавлять страницы в NavBar из редактора NavBar в App Builder:

1. Нажмите на Редактор панели навигации рядом с вашим приложением (справа внизу).
2. Появится всплывающее окно. Включите переключатель «Показывать на панели навигации«.
3. В этом всплывающем окне вы можете изменить значок и размер панели NavBar. Для дополнительных настроек нажмите на Go To Nav Settings.

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

Чтобы просмотреть предварительный просмотр NavBar:

1. Нажмите на Настройки и интеграции () в навигационном меню (левая часть экрана).
2. В разделе Общие выберите NavBar & AppBar.
3. Нажмите на любой элемент внутри NavBar или измените настройки отображения Nav Bar (внизу) и увидите результат, отраженный в окне предварительного просмотра (справа).

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

Чтобы показать навигационную панель на странице, на которой нет навигационной панели:

1. Сначала включите глубокое связывание, перейдя в Настройки и интеграции > Общие > Детали приложения > Глубокое связывание и маршрутизация. Для нового проекта эта функция включена по умолчанию.
2. Откройте страницу, на которой вы хотите отобразить панель навигации. Перейдите на панель свойств и включите опцию Всегда показывать панель навигации на странице. Если вы не можете включить эту опцию, убедитесь, что вы изменили стиль навигационной панели на Google или Floating Nav Bar.

Когда вы включаете NavBar, по умолчанию для NavBar устанавливается стиль Flutter Default Nav Bar. Стиль NavBar по умолчанию позволяет показывать/скрывать ярлыки для выбранных/невыбранных элементов и настраивать цвет значка выбранного/невыбранного элемента. Однако вы можете изменить стиль панели NavBar, чтобы получить больше возможностей для настройки.

Вы можете изменить стиль панели навигации на любой из следующих:

• Flutter Default Nav Bar: Панель навигации в стиле материала по умолчанию. Вы можете показывать/скрывать ярлыки для выбранных/невыбранных элементов.
• Google Nav Bar: Современная панель навигации в стиле Google, которая медленно анимируется и показывает ярлык элемента (например, название страницы). Этот стиль показывает ярлык только для выбранного элемента.
• Плавающая панель навигации: Панель навигации, которая плавает над страницами. Этот стиль показывает ярлык для всех элементов, присутствующих на панели NavBar.

Чтобы изменить стиль панели NavBar:

1. Нажмите на Настройки и интеграции () в меню навигации (в левой части экрана).
2.  В разделе Общие выберите NavBar & AppBar.
3. Найдите в выпадающем меню стиль панели навигации и измените его на Google Nav Bar или Floating Nav Bar.

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

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

Для отображения другого значка при выборе элемента:

1. Выберите свою страницу.
2. Перейдите в Редактор свойств и прокрутите вниз до Свойств элемента панели навигации.
3. Включите переключатель Различные активные значки.
4. В разделе Активный значок нажмите на кнопку , найдите новый значок и выберите другой значок.
5. Если вам нужно изменить размер значка, введите значение в свойство Icon Size.
6. Аналогичным образом установите другой значок и для других страниц.

Чтобы изменить стиль текста этикетки:

1. Выберите свою страницу.
2. Перейдите в Редактор свойств и прокрутите вниз до Свойств элемента панели навигации.
3. Включите переключатель Custom Nav Bar Text Style.
4. Следуйте дальнейшим инструкциям.
5. Аналогичным образом измените стиль текста ярлыка и для других страниц.

Чтобы изменить цвет кнопки навигации:

1. Выберите свою страницу.
2. Перейдите в Редактор свойств и прокрутите вниз до Свойства элемента панели навигации.
3. Найдите свойство Nav Bar Button Color, нажмите на поле рядом с Unset, выберите цвет, а затем нажмите Use Color или нажмите Unset и введите Hex-код напрямую. Вы также можете выбрать цвет, нажав на кнопку Палитра и просто.
4. Аналогичным образом измените цвет кнопки Nav Button и для других страниц.

Чтобы добавить цвет градиента:

1. Откройте/щелкните на разделе Nav Bar Button Gradient.
2. Дважды нажмите на кнопку Добавить цвет. Нажмите еще, чтобы получить больше цветов.
3. Введите/измените код цвета для добавленных цветов.
4. Введите значение в точке перехода, чтобы настроить распределение каждого цвета в линейном градиенте. Точка перехода может принимать значение только от 0,0 до 1,0. Если вы добавляете три цвета, вы можете установить Точку перехода как 0.0, 0.5 и 1.0 для каждого цвета соответственно.
5. Введите Угол в градусах, чтобы изменить направление цвета градиента.
6. Нажмите на значок Refresh(), чтобы сбросить значения цветов.
7. Аналогичным образом измените цвет кнопки Nav Button и для других страниц.

Чтобы изменить цвет фона панели навигации:

1. Нажмите на Настройки и интеграции () в меню навигации (в левой части экрана).
2. В разделе Общие выберите NavBar & AppBar.
3. Прокрутите вниз до раздела Стилизация.
4. Найдите свойство Nav Bar Color, нажмите на поле рядом с Unset, выберите цвет, а затем нажмите Use Color или нажмите Unset и введите шестнадцатеричный код напрямую. Вы также можете выбрать цвет, нажав на кнопку Палитра и просто.

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

Чтобы показать/скрыть ярлыки для выбранных и невыбранных элементов:

1. Перейдите в Настройки и интеграции -> Общие -> NavBar & AppBar -> Nav Bar.
2. Прокрутите вниз до раздела Стилизация.
3. Чтобы показать/скрыть ярлыки для выбранного элемента, включите/выключите переключатель Show Labels (Selected).
4. Чтобы показать/скрыть ярлыки для невыбранных элементов, включите/выключите тумблер Показывать ярлыки (невыбранные).

Чтобы изменить цвет иконки для выбранных и невыбранных элементов:

1. Перейдите в Настройки и интеграции -> Общие -> NavBar & AppBar -> Nav Bar.
2. Прокрутите вниз до раздела Стилизация.
3. Чтобы изменить цвет иконки для выбранного элемента, найдите свойство Selected Icon Color, нажмите на поле рядом с Unset, выберите цвет, а затем нажмите Use Color или нажмите Unset и введите шестнадцатеричный код напрямую. Вы также можете выбрать цвет, нажав на кнопку Палитра и просто.
4. Аналогично, чтобы изменить цвет значка для невыбранных элементов, найдите свойство Unselected Icon Color и измените цвет.

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

Чтобы изменить цвет иконки и текста для выбранных и невыбранных элементов:

1. Перейдите в Настройки и интеграции -> Общие -> NavBar & AppBar -> Nav Bar.
2. Прокрутите вниз до раздела Стилизация.
3. Чтобы изменить цвет значка и текста для выбранного элемента, найдите свойство Selected Icon & Text Color, нажмите на поле рядом с Unset, выберите цвет, а затем нажмите Use Color или нажмите Unset и введите шестнадцатеричный код напрямую. Вы также можете выбрать цвет, нажав на кнопку Палитра и просто.
4. Аналогично, чтобы изменить цвет значка и текста для невыбранных элементов, найдите свойство Unselected Icon & Text Color и измените цвет.

С помощью Google Nav Bar Style можно также добавить цвет фона вокруг выбранного элемента.

Чтобы добавить/изменить цвет фона для выбранного элемента:

Перейдите в Настройки и интеграции -> Общие -> NavBar & AppBar -> Nav Bar.
Прокрутите вниз до раздела Стилизация.
Найдите свойство Selected Background Color, нажмите на поле рядом с Unset, выберите цвет, а затем нажмите Use Color или нажмите Unset и введите шестнадцатеричный код напрямую. Вы также можете выбрать цвет, нажав на кнопку Палитра и просто.

Стиль Google Nav Bar позволяет добавить и настроить границу вокруг выбранных и невыбранных элементов.

Чтобы отобразить рамку:

1. Перейдите в Настройки и интеграции -> Общие -> NavBar & AppBar -> Nav Bar.
2. Прокрутите вниз до раздела Стилизация.
3. Найдите свойство Border Color, нажмите на поле рядом с Unset, выберите цвет, а затем нажмите Use Color или нажмите Unset и введите шестнадцатеричный код напрямую. Вы также можете выбрать цвет, нажав на кнопку Палитра и просто.
4. Теперь найдите ниже свойство Ширина границы и введите значение. (например, 2,5,10).
5. Чтобы настроить закругление углов, найдите свойство Border Radius и введите значение. (например, 0,20,50). Чтобы убрать закругленные углы, установите значение 0.
6. Чтобы показать ту же границу для невыбранных элементов, включите переключатель «Показывать границу для невыбранных».

В Google Nav Bar кнопка Nav Button (элемент внутри Nav Bar) выглядит довольно маленькой. Однако вы можете изменить размер по умолчанию, добавив значение Nav Button padding, которое увеличивает размер кнопки Nav Button.

Чтобы добавить параметр Nav Button padding:

1. Перейдите в Настройки и интеграции -> Общие -> NavBar & AppBar -> Nav Bar.
2. Прокрутите вниз до раздела Стилизация.
3. Найдите Nav Button Padding и введите значения.
4. Нажмите на значок Refresh, чтобы сбросить значения.

Используя свойство Nav Button Margin, вы можете добавить пространство вокруг кнопки Nav Button (элемент внутри панели Nav Bar).

Чтобы добавить пространство:

1. Перейдите в раздел Настройки и интеграции -> Общие -> NavBar & AppBar -> Nav Bar.
2. Прокрутите вниз до раздела Стилизация.
3. Найдите Nav Button Margin и введите значения.
4. Нажмите на значок Refresh, чтобы сбросить значения.

Изменение выравнивания кнопок Nav Button изменит горизонтальное распределение кнопок Nav Button внутри панели NavBar.

Чтобы изменить выравнивание кнопок Nav Button Alignment:

1. Перейдите в Настройки и интеграции -> Общие -> NavBar & AppBar -> Nav Bar.
2. Прокрутите вниз до раздела Стилизация.
3. Найдите выпадающий список Nav Button Alignment и выберите один из вариантов, включающий Start, Center, End, Space evenly, Space between, and Space around.

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

1. Перейдите в Настройки и интеграции -> Общие -> NavBar & AppBar -> Nav Bar.
2. Прокрутите вниз до раздела Styling.
3. Найдите свойство Gap Between Icon and Text и введите значение (например, 5, 10, 15).

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

Чтобы изменить продолжительность анимации:

1. Перейдите в раздел Настройки и интеграции -> Общие -> NavBar & AppBar -> Nav Bar.
2. Прокрутите вниз до раздела Стилизация.
3. Найдите свойство Animation Duration (ms) и попробуйте установить его на 2000 ms (миллисекунд). Это означает, что анимация завершится через 2000 мс, т.е. через 2 секунды.

Когда стиль панели NavBar установлен на Floating Nav Bar, вы можете изменить внешний вид плавающей панели Nav Bar по умолчанию с помощью различных свойств, доступных в разделе Nav Bar Display Settings.

Чтобы изменить цвет иконки и текста для выбранных и невыбранных элементов:

1. Перейдите в Настройки и интеграции -> Общие -> NavBar & AppBar -> Nav Bar.
2. Прокрутите вниз до раздела Стилизация.
3. Чтобы изменить цвет значка и текста для выбранного элемента, найдите свойство Selected Icon & Text Color, нажмите на поле рядом с Unset, выберите цвет, а затем нажмите Use Color или нажмите Unset и введите шестнадцатеричный код напрямую. Вы также можете выбрать цвет, нажав на кнопку Палитра и просто.
4. Аналогично, чтобы изменить цвет значка и текста для невыбранных элементов, найдите свойство Unselected Icon & Text Color и измените цвет.

С помощью стиля плавающей панели навигации можно также добавить цвет фона вокруг выбранного элемента.

Чтобы добавить/изменить цвет фона для выбранного элемента:

1. Перейдите в Настройки и интеграции -> Общие -> NavBar & AppBar -> Nav Bar.
2. Прокрутите вниз до раздела Стилизация.
3. Найдите свойство Selected Background Color, нажмите на поле рядом с Unset, выберите цвет, а затем нажмите Use Color или нажмите Unset и введите шестнадцатеричный код напрямую. Вы также можете выбрать цвет, нажав на кнопку Палитра и просто.

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

Чтобы изменить ширину панели NavBar:

1. Перейдите в Настройки и интеграции -> Общие -> NavBar & AppBar -> Nav Bar.
2. Прокрутите вниз до раздела Стилизация.
3. Найдите свойство Width. Есть три способа задать ширину:
   1. Чтобы установить точный размер, выберите PX и введите нужные значения.
   2. Чтобы задать размеры в % от размера экрана, выберите % и введите нужное значение.
   3. Чтобы вернуть ширину панели NavBar к ширине экрана, просто нажмите на значок бесконечности ().

Добавление подкладки для кнопки Nav Button создает пустое пространство вокруг кнопки Nav Button.

Чтобы добавить подложку для кнопки Nav Button:

1. Перейдите в раздел Настройки и интеграции -> Общие -> NavBar & AppBar -> Nav Bar.
2. Прокрутите вниз до раздела Стилизация.
3. Найдите Nav Button Padding и введите значения.
4. Нажмите на значок Refresh, чтобы сбросить значения.

Добавление поля кнопки Nav Button создает пустое пространство вокруг панели NavBar.

Чтобы добавить поля для кнопки Nav Button:

1. Перейдите в раздел Настройки и интеграции -> Общие -> NavBar & AppBar -> Nav Bar.
2. Прокрутите вниз до раздела Стилизация.
3. Найдите Nav Button Margin и введите значения.
4. Нажмите на значок Refresh, чтобы сбросить значения.

Изменение радиуса границы позволяет настроить закругленные углы панели NavBar и кнопки Nav Button.

Чтобы изменить радиус границы:

1. Перейдите в Настройки и интеграции -> Общие -> NavBar & AppBar -> Nav Bar.
2. Прокрутите вниз до раздела Стилизация.
3. Для NavBar найдите свойство Border Radius и введите значение (например, 0,20,5,0).
4. Для кнопки Nav Button найдите свойство Button Border Radius и введите значение.
5. Чтобы убрать закругленные углы, установите Border Radius 0.

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

1. Перейдите в Настройки и интеграции -> Общие -> NavBar & AppBar -> Nav Bar.
2. Прокрутите вниз до раздела Стилизация.
3. Найдите свойство Elevation и введите значение.

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

1. Перейдите в Настройки и интеграции -> Общие -> NavBar & AppBar -> Nav Bar.
2. Под иконкой Re-Order Page Icon, определите страницу, которую вы хотите изменить порядок, нажмите на иконку гамбургера (иконка с тремя линиями) рядом с ней и перетащите ее в направлении вверх или вниз.