長(zhǎng)話短說(shuō)篇亭，現(xiàn)在主流的App都是底部導(dǎo)航按鈕 + Fragment 的方式遣总，Android 原生開(kāi)發(fā)有很多種方式來(lái)實(shí)現(xiàn)，F(xiàn)lutter 也是患朱。

零鲁僚、概述

• TabBar + TabBarView
  • 相當(dāng)于 Android 原生TabLayout + ViewPage
  • 有自帶 Material Design 動(dòng)畫(huà)
  • 代碼實(shí)現(xiàn)簡(jiǎn)單
  • 支持左右滑動(dòng)
• BottomNavigationBar + BottomNavigationBarItem
  • 相當(dāng)于Android 原生控件 BottomNavigationBar
  • 有自帶 Material Design 動(dòng)畫(huà)
  • 代碼實(shí)現(xiàn)簡(jiǎn)單
  • 不支持左右滑動(dòng)
• BottomAppBar
  • 完全可以自定義
  • 代碼量復(fù)雜
  • 沒(méi)有自帶動(dòng)畫(huà)
• CupertinoTabBar
  • IOS 風(fēng)格

一、TabBar + TabBarView

TabBar + TabBarView 的方式非常簡(jiǎn)單，相當(dāng)于 Android 原生中的
TabLayout + ViewPage 方式冰沙，并且也支持左右滑動(dòng)侨艾。
如下圖所示：

TabBar + TabBarView

具體實(shí)現(xiàn)代碼如下：

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: new TabBarView(controller: controller, children: <Widget>[
        new FirstPage(),
        new SecondPage(),
        new ThirdPage()
      ]),
      bottomNavigationBar: new Material(
        color: Colors.blue,
        child: new TabBar(
          controller: controller,
          tabs: <Tab>[
            new Tab(text: "首頁(yè)", icon: new Icon(Icons.home)),
            new Tab(text: "列表", icon: new Icon(Icons.list)),
            new Tab(text: "信息", icon: new Icon(Icons.message)),
          ],
          indicatorWeight: 0.1,
        ),
      ),
    );
  }

TabBar 默認(rèn)是有高度的，但是我找了很久也沒(méi)找到 api 去處理拓挥，最后使用了一個(gè)投機(jī)取巧的方法：把 indicatorWeight 的值設(shè)置為0.1唠梨，也就是把指示器的高度設(shè)置為0.1。

二侥啤、BottomNavigationBar + BottomNavigationBarItem

這種方式也代碼量非常少当叭，相當(dāng)于Android原生谷歌推出的 Material Design 風(fēng)格的控件 BottomNavigationBar，并且點(diǎn)擊的動(dòng)畫(huà)和效果也是一樣盖灸。
如下圖所示：

BottomNavigationBar + BottomNavigationBarItem

具體實(shí)現(xiàn)代碼如下：

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: _children[_currentIndex],
//      CupertinoTabBar 是IOS分格
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _currentIndex,
        onTap: onTabTapped,
        items: [
          BottomNavigationBarItem(
              title: new Text("Home"), icon: new Icon(Icons.home)),
          BottomNavigationBarItem(
              title: new Text("List"), icon: new Icon(Icons.list)),
          BottomNavigationBarItem(
              title: new Text("Message"), icon: new Icon(Icons.message)),
        ],
      ),
    );
  }

有人會(huì)問(wèn)：Flutter 不是支持 Android 和 IOS 么蚁鳖，我想用 IOS 風(fēng)格的底部導(dǎo)航欄怎么辦？
很簡(jiǎn)單赁炎，根據(jù)注釋所寫(xiě)的那樣：只要把 BottomNavigationBar 改成 CupertinoTabBar 就可以了醉箕。
如下圖所示：

CupertinoTabBar

三、BottomAppBar 自定義

以上兩種方式都是使用系統(tǒng)封裝好的姻报，如果我想完全自定義坞琴，不遵循 MD 風(fēng)格或者 IOS 風(fēng)格，那就必須使用
BottomAppBar逗抑。
若下圖所示：

BottomAppBar

  Row tabs() {
    return Row(
      mainAxisSize: MainAxisSize.max,
      mainAxisAlignment: MainAxisAlignment.spaceAround,
      children: <Widget>[
        new Container(
          child: IconButton(
            icon: Icon(Icons.near_me),
            color: _tabColor,
            onPressed: () {
              setState(() {
                _tabColor = Colors.orangeAccent;
                _index = 0;
              });
            },
          ),
        ),
        IconButton(
          icon: Icon(Icons.edit_location),
          color: Colors.white,
          onPressed: () {
            setState(() {
              _tabColor = Colors.white;
              _index = 1;
            });
          },
        ),
      ],
    );
  }

中間那個(gè)很酷炫的 + 號(hào)是 FloatingActionButton ，它們兩可以組合使用寒亥，也可以單獨(dú)使用邮府，在官網(wǎng)上的解釋如下：

A container that is typically used with Scaffold.bottomNavigationBar, and can have a notch along the top that makes room for an overlapping FloatingActionButton.
Typically used with a Scaffold and a FloatingActionButton.

完

本文具體代碼請(qǐng)點(diǎn)擊
https://github.com/ldlywt/flutter_navigationbar