作者 | 弗拉德
來源 | 弗拉德（公眾號：fulade_me)

BottomNavigationBar

BottomNavigationBar 和 BottomNavigationBarItem 配合來共同展示Flutter里面的底部狀態(tài)欄估脆，底部狀態(tài)欄是在移動端很重要的控件。

先看一下 BottomNavigationBar構(gòu)造方法

BottomNavigationBar({
    // key
    Key key,
    /// BottomNavigationBarItem 數(shù)組
    @required this.items,
    /// 點擊事件方法
    this.onTap,
    /// 當(dāng)前選中的 元素下標(biāo)
    this.currentIndex = 0,
    ///  底部導(dǎo)航欄的Z坐標(biāo)
    this.elevation,
    /// 默認(rèn)是 BottomNavigationBarType.shifting 一般我們使用 BottomNavigationBarType.fixed
    this.type,
    /// 選中項目顏色的值
    Color fixedColor,
    /// 背景顏色
    this.backgroundColor,
    /// BottomNavigationBarItem圖標(biāo)的大小
    this.iconSize = 24.0,
    /// 選中時圖標(biāo)和文字的顏色
    Color selectedItemColor,
    /// 未選中時圖標(biāo)和文字的顏色
    this.unselectedItemColor,
    // 選中時的子Item的樣式
    this.selectedIconTheme,
    /// 未選中時的子Item的樣式
    this.unselectedIconTheme,
    // 選中時字體大小
    this.selectedFontSize = 14.0,
    /// 未選中時的字體大小
    this.unselectedFontSize = 12.0,
    /// 選中的時候的字體樣式
    this.selectedLabelStyle,
    /// 未選中時的字體樣式
    this.unselectedLabelStyle,
    /// 是否為未選擇的BottomNavigationBarItem顯示標(biāo)簽
    this.showSelectedLabels = true,
    //// 是否為選定的BottomNavigationBarItem顯示標(biāo)簽
    this.showUnselectedLabels,
    /// pc端或web端使用
    this.mouseCursor,
})

我們來做一個點擊底部狀態(tài)欄按鈕切換顏色的Demo

class _BottomNavigationBarDemoPageState
    extends State<BottomNavigationBarDemoPage> {
  int selectedIndex = 0;
  List<Container> containerList = [
    Container(
      color: Colors.red,
    ),
    Container(
      color: Colors.blue,
    ),
    Container(
      color: Colors.yellow,
    ),
    Container(
      color: Colors.green,
    )
  ];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: Text("BottomNavigationBarDemo"),
        backgroundColor: Colors.blue,
      ),
      body: containerList[selectedIndex],
      bottomNavigationBar: BottomNavigationBar(
        /// 這個很重要
        type: BottomNavigationBarType.fixed,
        currentIndex: selectedIndex,
        onTap: (index) {
          setState(() {
            selectedIndex = index;
          });
        },
        items: <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            title: Text('F1'),
            icon: Icon(Icons.home),
          ),
          BottomNavigationBarItem(
            title: Text('F2'),
            icon: Icon(Icons.book),
          ),
          BottomNavigationBarItem(
            title: Text('F3'),
            icon: Icon(Icons.school),
          ),
          BottomNavigationBarItem(
            title: Text('F4'),
            icon: Icon(Icons.perm_identity),
          ),
        ],
      ),
    );
  }
}

• Scaffold接收一個BottomNavigationBar作為bottomNavigationBar的參數(shù)，然后BottomNavigationBar接收一個items的數(shù)組厌衔，這個數(shù)組里面?zhèn)魅肓?個BottomNavigationBarItem對象分別命名為F1、F2富寿、F3锣夹、F4

• type參數(shù)傳入的是BottomNavigationBarType.fixed，默認(rèn)是BottomNavigationBarType.shifting银萍，默認(rèn)的效果是 只有在選中BottomNavigationBarItem時才會顯示文字。設(shè)置成BottomNavigationBarType.fixed非選中狀態(tài)下也會顯示文字和圖標(biāo)

• onTap實現(xiàn)的是一個方法贰锁，參數(shù)是被點擊的當(dāng)前BottomNavigationBarItem的下標(biāo)滤蝠，在這里被點擊后調(diào)用setState來刷新頁面的顏色

效果如下：

2020_01_29_bottom_navigation_bar

日常開發(fā)中以上效果基本能滿足大多數(shù)需求
如果想要自定義下面Icon的樣式，可以使用 BottomAppBar

這里也介紹兩個不錯的庫

• tab_bar_animation

  鏈接: https://github.com/tunitowen/tab_bar_animation
  效果如下：
  

  2020_01_29_bottom_th2

• simpleanimations
  鏈接: https://github.com/TechieBlossom/simpleanimations
  效果如下：
  

  2020_01_29_bottom_th1

想體驗以上的示例的運(yùn)行效果锣险，可以到我的Github倉庫項目flutter_app->lib->routes->bottom_navigation_page.dart查看览闰，并且可以下載下來運(yùn)行并體驗。