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

Important

这是一个支持Flutter 3.0的FancyBottomNavigation的分支版本。

FancyBottomNavigation

Getting Started

在项目中添加插件（即将发布到pub）：

dependencies:
  ...
  fancy_bottom_navigation: ^0.3.2

Limitations

目前该插件仅支持2至4个标签页。

Basic Usage

在应用中添加底部导航栏：

bottomNavigationBar: FancyBottomNavigation(
    tabs: [
        TabData(iconData: Icons.home, title: "首页"),
        TabData(iconData: Icons.search, title: "搜索"),
        TabData(iconData: Icons.shopping_cart, title: "购物车")
    ],
    onTabChangedListener: (position) {
        setState(() {
            currentPage = position;
        });
    },
),

TabData

• iconData -> 用于标签页的图标
• title -> 用于标签页的标题
• onClick -> 可选参数，当点击激活状态的圆圈时触发

Attributes

required

• tabs -> TabData对象的列表
• onTabChangedListener -> 处理标签页点击事件的函数，接收int类型的position

optional

• initialSelection -> 默认值为0
• circleColor -> 默认为null，从主题中获取
• activeIconColor -> 默认为null，从主题中获取
• inactiveIconColor -> 默认为null，从主题中获取
• textColor -> 默认为null，从主题中获取
• barBackgroundColor -> 默认为null，从主题中获取
• key -> 默认为null

Theming

默认情况下，导航栏会尝试使用当前的主题。如果需要自定义主题，可以设置以下属性：

Programmatic Selection

要通过代码选择标签页，需要为FancyBottomNavigation分配一个GlobalKey。然后通过此key访问State，并调用setPage(position)方法。
例如：

final _key = GlobalKey<FancyBottomNavigationState>();

// 在需要切换页面的地方
_key.currentState?.setPage(2);

Showcase

如果你在实际应用中使用了此插件，请告知我，我会将你的应用加入展示区。

Inspiration

该插件的设计灵感来源于Dribbble上Manoj Rajput的作品：
https://dribbble.com/shots/5419022-Tab

Contributing

欢迎贡献代码，请提交PR！

完整示例代码

以下是一个完整的示例代码，展示如何使用fancy_bottom_navigation_fork插件：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

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

  final _key = GlobalKey<FancyBottomNavigationState>();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Fancy Bottom Navigation Example"),
      ),
      body: Center(
        child: Text("当前页面: ${currentPage + 1}"),
      ),
      bottomNavigationBar: FancyBottomNavigation(
        tabs: [
          TabData(iconData: Icons.home, title: "首页"),
          TabData(iconData: Icons.search, title: "搜索"),
          TabData(iconData: Icons.shopping_cart, title: "购物车"),
        ],
        initialSelection: currentPage,
        onTabChangedListener: (position) {
          setState(() {
            currentPage = position;
          });
        },
        key: _key,
      ),
    );
  }
}