Flutter底部导航栏动画插件animated_bottom_nav_bar_plus的使用

Flutter底部导航栏动画插件animated_bottom_nav_bar_plus的使用

Getting Started（入门）

本项目是一个新的Flutter插件包起点，该插件包包括针对Android和/或iOS平台的特定实现代码。

为了帮助您开始Flutter开发之旅，您可以查看在线文档，它提供了教程、示例、移动开发指南和完整的API参考。

使用示例

以下是一个使用animated_bottom_nav_bar_plus插件的完整示例：

import 'package:animated_bottom_nav_bar_plus/animated_bottom_nav_bar_plus.dart';
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Material App',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Material App Bar'),
        ),
        body: AnimatedBottomNavBarPlus(
          initialPage: 0, // 设置初始页面
          onCenterButtonStateChanged: (value) {
            print('onButtonStateChanged $value'); // 打印按钮状态变化信息
          },
          backgroundColor: Colors.white, // 设置背景颜色
          floatingButtonStyles: FloatingButtonStyles(), // 浮动按钮样式
          colorButtonDisabled: Colors.grey, // 禁用按钮的颜色
          onTapFloatingButtonLeft: () {
            print('onTapFloatingButtonLeft'); // 点击左侧浮动按钮时的回调
          },
          onTapFloatingButtonRight: () {
            print('onTapFloatingButtonRight'); // 点击右侧浮动按钮时的回调
          },
          onTapFloatingButtonTop: () {
            print('onTapFloatingButtonTop'); // 点击顶部浮动按钮时的回调
          },
          navBarItems: [ // 导航栏项配置
            NavBarItem(icon: Icons.home, labelText: 'Home'), // 首页图标及标签
            NavBarItem(icon: Icons.search, labelText: 'Search'), // 搜索图标及标签
            NavBarItem(icon: Icons.person, labelText: 'Profile'), // 个人资料图标及标签
            NavBarItem(icon: Icons.settings, labelText: 'Settings'), // 设置图标及标签
          ],
          pages: const [ // 页面配置
            Center(child: Text('Home')), // 首页内容
            Center(child: Text('Search')), // 搜索内容
            Center(child: Text('Profile')), // 个人资料内容
            Center(child: Text('Settings')), // 设置内容
          ],
        ),
      ),
    );
  }
}

更多关于Flutter底部导航栏动画插件animated_bottom_nav_bar_plus的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter底部导航栏动画插件animated_bottom_nav_bar_plus的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


animated_bottom_nav_bar_plus 是一个 Flutter 插件，用于创建具有动画效果的底部导航栏。它提供了丰富的自定义选项，允许你轻松地为底部导航栏添加各种动画效果。以下是使用 animated_bottom_nav_bar_plus 的基本步骤和示例代码。

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 animated_bottom_nav_bar_plus 插件的依赖。

dependencies:
  flutter:
    sdk: flutter
  animated_bottom_nav_bar_plus: ^1.0.0+2

然后运行 flutter pub get 来安装依赖。

2. 基本使用

以下是一个简单的示例，展示如何使用 animated_bottom_nav_bar_plus 创建一个带有动画效果的底部导航栏。

import 'package:flutter/material.dart';
import 'package:animated_bottom_nav_bar_plus/animated_bottom_nav_bar_plus.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Animated Bottom Nav Bar Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  int _currentIndex = 0;

  final List<Widget> _pages = [
    Center(child: Text('Home Page')),
    Center(child: Text('Search Page')),
    Center(child: Text('Profile Page')),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Animated Bottom Nav Bar'),
      ),
      body: _pages[_currentIndex],
      bottomNavigationBar: AnimatedBottomNavBar(
        currentIndex: _currentIndex,
        onTap: (index) {
          setState(() {
            _currentIndex = index;
          });
        },
        items: [
          BottomNavBarItem(
            icon: Icons.home,
            title: 'Home',
          ),
          BottomNavBarItem(
            icon: Icons.search,
            title: 'Search',
          ),
          BottomNavBarItem(
            icon: Icons.person,
            title: 'Profile',
          ),
        ],
        backgroundColor: Colors.blue,
        activeColor: Colors.white,
        inactiveColor: Colors.grey,
        animationDuration: Duration(milliseconds: 300),
        gapLocation: GapLocation.none,
      ),
    );
  }
}

3. 参数说明

  • currentIndex: 当前选中的底部导航栏项的索引。
  • onTap: 当用户点击导航栏项时触发的回调函数。
  • items: 底部导航栏项的列表，每个项包含一个图标和一个标题。
  • backgroundColor: 底部导航栏的背景颜色。
  • activeColor: 选中项的颜色。
  • inactiveColor: 未选中项的颜色。
  • animationDuration: 动画持续时间。
  • gapLocation: 导航栏中是否显示一个间隙，通常用于 FAB（浮动操作按钮）的位置。

4. 自定义动画

animated_bottom_nav_bar_plus 支持多种动画效果，你可以通过 animationType 参数来指定不同的动画类型。例如：

bottomNavigationBar: AnimatedBottomNavBar(
  currentIndex: _currentIndex,
  onTap: (index) {
    setState(() {
      _currentIndex = index;
    });
  },
  items: [
    BottomNavBarItem(
      icon: Icons.home,
      title: 'Home',
    ),
    BottomNavBarItem(
      icon: Icons.search,
      title: 'Search',
    ),
    BottomNavBarItem(
      icon: Icons.person,
      title: 'Profile',
    ),
  ],
  backgroundColor: Colors.blue,
  activeColor: Colors.white,
  inactiveColor: Colors.grey,
  animationDuration: Duration(milliseconds: 300),
  gapLocation: GapLocation.none,
  animationType: AnimationType.fade, // 使用淡入淡出动画
),
回到顶部