Flutter底部导航栏插件fancy_bottom_navigation_2的使用

Flutter底部导航栏插件fancy_bottom_navigation_2的使用

1. 插件介绍

fancy_bottom_navigation 是一个用于创建美观的底部导航栏的Flutter插件。它提供了丰富的自定义选项，可以轻松地集成到您的应用中。以下是该插件的一些关键特性和使用方法。

2. 使用步骤

2.1 添加依赖

首先，在 pubspec.yaml 文件中添加 fancy_bottom_navigation 依赖：

dependencies:
  fancy_bottom_navigation: ^0.3.2

2.2 基本用法

接下来，我们可以通过以下代码在应用中使用 FancyBottomNavigation 小部件。这里提供了一个完整的示例，展示了如何创建一个带有三个标签页的底部导航栏，并根据用户选择的标签页显示不同的页面内容。

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.deepOrange,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int currentPage = 0;

  GlobalKey bottomNavigationKey = GlobalKey();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Fancy Bottom Navigation"),
      ),
      body: Container(
        decoration: BoxDecoration(color: Colors.white),
        child: Center(
          child: _getPage(currentPage),
        ),
      ),
      bottomNavigationBar: FancyBottomNavigation(
        tabs: [
          TabData(
              iconData: Icons.home, 
              title: "Home", 
              onclick: () {
                final FancyBottomNavigationState fState = bottomNavigationKey.currentState as FancyBottomNavigationState;
                fState.setPage(2);
              }),
          TabData(
              iconData: Icons.search, 
              title: "Search", 
              onclick: () => Navigator.of(context).push(MaterialPageRoute(builder: (context) => SecondPage()))),
          TabData(iconData: Icons.shopping_cart, title: "Basket")
        ],
        initialSelection: 1,
        key: bottomNavigationKey,
        onTabChangedListener: (position) {
          setState(() {
            currentPage = position;
          });
        },
      ),
      drawer: Drawer(
        child: ListView(
          children: <Widget>[
            Text("Hello"),
            Text("World"),
          ],
        ),
      ),
    );
  }

  // 根据当前页面索引返回相应的页面内容
  Widget _getPage(int page) {
    switch (page) {
      case 0:
        return Column(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            Text("这是主页"),
            RaisedButton(
              child: Text(
                "开始新页面",
                style: TextStyle(color: Colors.white),
              ),
              color: Theme.of(context).primaryColor,
              onPressed: () {
                Navigator.of(context).push(
                    MaterialPageRoute(builder: (context) => SecondPage()));
              },
            ),
            RaisedButton(
              child: Text(
                "切换到第3页",
                style: TextStyle(color: Colors.white),
              ),
              color: Theme.of(context).accentColor,
              onPressed: () {
                final FancyBottomNavigationState fState = bottomNavigationKey.currentState as FancyBottomNavigationState;
                fState.setPage(2);
              },
            )
          ],
        );
      case 1:
        return Column(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            Text("这是搜索页"),
            RaisedButton(
              child: Text(
                "开始新页面",
                style: TextStyle(color: Colors.white),
              ),
              color: Theme.of(context).primaryColor,
              onPressed: () {
                Navigator.of(context).push(
                    MaterialPageRoute(builder: (context) => SecondPage()));
              },
            )
          ],
        );
      default:
        return Column(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            Text("这是购物车页"),
            RaisedButton(
              child: Text(
                "开始新页面",
                style: TextStyle(color: Colors.white),
              ),
              color: Theme.of(context).primaryColor,
              onPressed: () {},
            )
          ],
        );
    }
  }
}

3. 关键属性说明

• tabs：这是一个 List<TabData> 类型的属性，用于定义底部导航栏中的标签页。每个 TabData 对象包含图标 (iconData) 和标题 (title)，还可以通过 onclick 属性为标签页添加点击事件。

• onTabChangedListener：这是一个回调函数，当用户点击某个标签页时会触发。它接收一个整数参数 position，表示当前选中的标签页索引。

• initialSelection：用于设置默认选中的标签页索引，默认值为 0。

• circleColor、activeIconColor、inactiveIconColor、textColor、barBackgroundColor：这些属性用于自定义底部导航栏的样式，例如图标颜色、文本颜色、背景颜色等。如果不指定这些属性，插件会从当前主题中获取默认值。

• key：用于程序化控制标签页的选择。通过 GlobalKey 可以访问 FancyBottomNavigation 的状态，并调用 setPage(position) 方法来切换标签页。

4. 自定义样式

FancyBottomNavigation 支持自定义样式，您可以根据应用的主题或需求调整导航栏的外观。插件会自动尝试使用当前主题的颜色和样式，但您也可以通过上述属性进行进一步的自定义。

5. 程序化选择标签页

如果您需要在代码中动态切换标签页，可以通过 GlobalKey 获取 FancyBottomNavigation 的状态，并调用 setPage(position) 方法。例如：

final FancyBottomNavigationState fState = bottomNavigationKey.currentState as FancyBottomNavigationState;
fState.setPage(2);  // 切换到第3个标签页