Flutter Widgets 之 BottomNavigationBar 和 BottomNavigationBarItem

注意：無特殊說明，Flutter版本及Dart版本以下：

• Flutter版本： 1.12.13+hotfix.5
• Dart版本： 2.7.0

BottomNavigationBar 和 BottomNavigationBarItem配合Scaffold控件使用能夠實現底部導航效果，相似於微信底部的導航效果，下面是一個簡單的底部導航案例：

Scaffold(
      bottomNavigationBar: BottomNavigationBar(
        items: <BottomNavigationBarItem>[
          BottomNavigationBarItem(title: Text('首頁'),icon: Icon(Icons.home)),
          BottomNavigationBarItem(title: Text('書籍'),icon: Icon(Icons.book)),
          BottomNavigationBarItem(title: Text('個人'),icon: Icon(Icons.perm_identity)),
        ],
      ),
    );

效果：

點擊其餘2個item時沒有反應，添加切換效果：

int _currentIndex = 0;
BottomNavigationBar(
    onTap: (int index) {
        setState(() {
            _currentIndex = index;
        });
    },
    currentIndex: _currentIndex,
    ...

currentIndex表明當前顯示導航的索引，當前切換時調用onTap，在onTap回調中調用setState方法改變_currentIndex的值達到切換的效果。

效果以下：

BottomNavigationBar有2種顯示模式，其中一種是fixed效果，前面的展現就是fixed效果，這也是默認值，另外一種是shifting效果，

BottomNavigationBar(
    type:BottomNavigationBarType.shifting,
    selectedItemColor: Theme.of(context).primaryColor,
    unselectedItemColor: Colors.black,
    ...
}

設置shifting時須要設置selectedItemColor和 unselectedItemColor，效果以下：

咱們還能夠設置其背景顏色（backgroundColor）、圖標大小（iconSize）、選中和未選中圖標、字體的顏色，大小等。

若是導航的圖標是本身設計的圖標，這時僅僅經過BottomNavigationBar是沒法實現咱們想要的效果的，好比微信的導航的效果，雖然選中和未選中也是顏色的區別，但圖標不是Icons自帶的圖標，想要實現切換2個圖標須要BottomNavigationBarItem控件的支持，其中的icon和activeIcon分別表明未選中和選中。

經過切換導航而改變頁面是App中最經常使用的方式，開始構建頁面的切換：

int _currentIndex = 0;

Widget _currBody = HomePage();

_onTap(int index) {
    switch (index) {
      case 0:
        _currBody = HomePage();;
        break;
      case 1:
        _currBody = BookPage();
        break;
      case 2:
        _currBody = MyPage();
        break;
    }
    setState(() {
      _currentIndex = index;
    });
  }

Scaffold(
      body: _currBody,
      bottomNavigationBar: BottomNavigationBar(
        onTap: _onTap,
        type: BottomNavigationBarType.shifting,
        selectedItemColor: Theme.of(context).primaryColor,
        unselectedItemColor: Colors.black,
        currentIndex: _currentIndex,
        items: <BottomNavigationBarItem>[
          BottomNavigationBarItem(title: Text('首頁'), icon: Icon(Icons.home)),
          BottomNavigationBarItem(title: Text('書籍'), icon: Icon(Icons.book)),
          BottomNavigationBarItem(
              title: Text('個人'), icon: Icon(Icons.perm_identity)),
        ],
      ),
    );

Scaffold控件的body表示導航上面，AppBar下面的頁面，HomePage,BookPage,MyPage對應3個導航的頁面，背景分別是紅、藍、黃色，效果以下：

推薦幾款Github上帶動畫效果的底部導航

Fluid Button Bar

Icon Flip Button Bar

fancy_bottom_navigation

circular_bottom_navigation

bottom_navy_bar

titled_navigation_bar

更多相關閱讀：

• Flutter系列文章總覽
• Flutter Widgets 之 Expanded和Flexible
• Flutter Widgets 之 AnimatedList
• Flutter Widgets 之 SliverAppBar

若是這篇文章有幫助到您，但願您來個「贊」並關注個人公衆號，很是謝謝。