Flutter — анимированная нижняя панель навигации
Виджет «Анимированная нижняя панель» предоставляет дополнительные ссылки для перехода между различными представлениями. Когда элемент нажат, обратный вызов onItemSelected вызывается с индексом нажатого элемента. В зависимости от количества элементов могут быть разные способы отображения этих элементов. Расположение элементов определяется значениями перечисления или списка BottomNavigationBarType .
Пошаговая реализация
Шаг 1. Создайте новый проект в Android Studio.
Чтобы настроить Flutter Development в Android Studio, обратитесь к разделу «Настройка Android Studio для разработки Flutter», а затем создайте новый проект в Android Studio, пожалуйста, обратитесь к разделу «Создание простого приложения во Flutter».
Шаг 2. Добавьте зависимость в файл pubspec.yaml .
Вы можете добавить зависимость из bash или скопировать и вставить плагин.
Из Bash: запустите эту команду
flutter pub add animated_bottom_navigation_bar
Это добавит следующий код в файл pubspec.yaml .
dependencies:
animated_bottom_navigation_bar: ^1.0.1Note: when you are adding the dependency, version of plugin may changed.
Импортируйте пакет в основной файл.
import "package:animated_bottom_navigation_bar/animated_bottom_navigation_bar.dart";
Шаг 3. Использование анимированной панели навигации
В теле шаблона используйте виджет AnimatedNavigationBar и задайте ему такие свойства, как значки, активный индекс, цвет фона, радиус границы и т. д.
Dart
MaterialApp( //material app with debugshowcheckedmodebanner false debugShowCheckedModeBanner: false, home: Scaffold( //scaffold body: Container(), floatingActionButton: FloatingActionButton( child: Icon(Icons.home_max_outlined), onPressed: () {}), floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked, bottomNavigationBar: AnimatedBottomNavigationBar( //navigation bar icons: iconList, //list of icons activeIndex: _bottomNavIndex, gapLocation: GapLocation.center, notchSmoothness: NotchSmoothness.verySmoothEdge, onTap: (index) => setState(() => _bottomNavIndex = index), backgroundColor: Colors.blue, ), ), ); |
Шаг 4: Создание списка иконок
Наконец, создайте список значков, требуемых свойством icon анимированной панели навигации.
Dart
List<IconData> iconList = [ //list of icons that required by animated navigation bar. Icons.abc_sharp, Icons.access_time, Icons.holiday_village, Icons.account_tree_rounded ]; |
Пример кода
Dart
import "package:animated_bottom_navigation_bar/animated_bottom_navigation_bar.dart";import "package:flutter/material.dart";//main app that calls the runApp.void main() { runApp(AnimatedBottomBar());}class AnimatedBottomBar extends StatefulWidget { AnimatedBottomBar({Key? key}) : super(key: key); @override State<AnimatedBottomBar> createState() => _AnimatedBottomBarState();}class _AnimatedBottomBarState extends State<AnimatedBottomBar> { List<IconData> iconList = [ //list of icons that required by animated navigation bar. Icons.abc_sharp, Icons.access_time, Icons.holiday_village, Icons.account_tree_rounded ]; int _bottomNavIndex = 0; //default index of the tabs @override Widget build(BuildContext context) { return MaterialApp( //material app with debugshowcheckedmodebanner false debugShowCheckedModeBanner: false, home: Scaffold( //scaffold body: Container(), floatingActionButton: FloatingActionButton( child: Icon(Icons.home_max_outlined), onPressed: () {}), floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked, bottomNavigationBar: AnimatedBottomNavigationBar( //navigation bar icons: iconList, activeIndex: _bottomNavIndex, gapLocation: GapLocation.center, notchSmoothness: NotchSmoothness.verySmoothEdge, onTap: (index) => setState(() => _bottomNavIndex = index), backgroundColor: Colors.blue, ), ), ); }} |
Объяснение кода:
- main — это основной метод, который запускает runApp и вызывает наш класс AnimatedBottomBar .
- MaterialApp позволяет нам создавать каркас.
- В нижней панели у нас есть AnimatedBottomNavigationBar, который позволяет нам создать анимированную нижнюю панель.
- AnimatedBottomNavigationBar принимает некоторые свойства, такие как список значков, activeIndex, gaploaction, цвет фона, ontap.
- Список иконок является обязательным свойством, поэтому мы создали список иконок iconList .