Flutter---BottomNavigationBar底部导

先看效果：

BottomNavigationBarType.fixed的效果图.gif BottomNavigationBarType.shifting的效果图.gif

该效果使用Scaffold = PageView+BottomNavigationBar
BottomNavigationBar的type分为：

1.BottomNavigationBarType.fixed:（代表tab固定不变，也是默认格式）
(1).底部tab数： 不超过4个
(2).导航栏背景色，默认由Material 控件的ThemeData.canvasColor决定，具体实现可以看下面代码
2.BottomNavigationBarType.shifting（代表tab是浮动的）
(1).底部tab数： 至少4个以上
(2).导航栏背景色，由每个item自己定义

BottomNavigationBarType.fixed:

代码如下：

import 'package:flutter/material.dart';
import 'home_page.dart';
import 'find_page.dart';
import 'msg_page.dart';
import 'my_page.dart';

class JiContainerPage extends StatefulWidget {
  @override
  _JiContainerPageState createState() {
    return new _JiContainerPageState();
  }
}

class _JiContainerPageState extends State<JiContainerPage>
    with SingleTickerProviderStateMixin {
  final PageController _pageController = new PageController(initialPage: 0);
  int _tabIndex = 0;

  _onPageChange(int index) {
    setState(() {
      _tabIndex = index;
    });
  }

  Image _getBarIcon(int index, bool isActive) {
    if (index == 0) {
      return _getAssetIcon(
          isActive ? "images/ic_bar_home_ed.png" : "images/ic_bar_home.png");
    } else if (index == 1) {
      return _getAssetIcon(
          isActive ? "images/ic_bar_find_ed.png" : "images/ic_bar_find.png");
    } else if (index == 2) {
      return _getAssetIcon(isActive
          ? "images/ic_bar_notify_ed.png"
          : "images/ic_bar_notify.png");
    } else {
      return _getAssetIcon(
          isActive ? "images/ic_bar_me_ed.png" : "images/ic_bar_me.png");
    }
  }

  Image _getAssetIcon(String path) {
    return Image.asset(path, width: 24.0, height: 24.0);
  }

  Text _getBarText(int index) {
    if (index == 0) {
      return Text("首页",style: TextStyle(color: Colors.black87));
    } else if (index == 1) {
      return Text("发现",style: TextStyle(color: Colors.black87));
    } else if (index == 2) {
      return Text("消息",style: TextStyle(color: Colors.black87));
    } else {
      return Text("我的",style: TextStyle(color: Colors.black87));
    }
  }

  @override
  Widget build(BuildContext context) {
    /**
     * 当BottomNavigationBar的type: BottomNavigationBarType.fixed，
     * 背景色由ThemeData.canvasColor决定
     */
    return new MaterialApp(
      theme: ThemeData(
        canvasColor: Color(0xffEEEFF2)
      ),
      home: new Scaffold(
          body: PageView.builder(
            onPageChanged: _onPageChange,
            controller: _pageController,
            itemBuilder: (BuildContext context, int index) {
              if (index == 0) {
                return new JiHomePage("0000");
              } else if (index == 1) {
                return new JiFindPage("1111");
              } else if (index == 2) {
                return new JiMsgPage("2222");
              } else if (index == 3) {
                return new JiMyPage("3333");
              }
            },
            itemCount: 4,
          ),
          bottomNavigationBar: new BottomNavigationBar(
            fixedColor: Colors.black87,
            type: BottomNavigationBarType.fixed,
            iconSize: 24,
            items: <BottomNavigationBarItem>[
              new BottomNavigationBarItem(
                icon: _getBarIcon(0, false),
                title: _getBarText(0),
                activeIcon: _getBarIcon(0, true),
              ),
              new BottomNavigationBarItem(
                icon: _getBarIcon(1, false),
                title: _getBarText(1),
                activeIcon: _getBarIcon(1, true),
              ),
              new BottomNavigationBarItem(
                icon: _getBarIcon(2, false),
                title: _getBarText(2),
                activeIcon: _getBarIcon(2, true),
              ),
              new BottomNavigationBarItem(
                icon: _getBarIcon(3, false),
                title: _getBarText(3),
                activeIcon: _getBarIcon(3, true),
              ),
            ],
            currentIndex: _tabIndex,
            onTap: (index) {
              _pageController.jumpToPage(index);
//            _pageController.animateToPage(index, duration: Duration(milliseconds: 100), curve: Curves.ease);
              _onPageChange(index);
            },
          )),
    );
  }
}

BottomNavigationBarType.shifting

代码如下：

  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new Scaffold(
          body: PageView.builder(
            onPageChanged: _onPageChange,
            controller: _pageController,
            itemBuilder: (BuildContext context, int index) {
              if (index == 0) {
                return new JiHomePage("0000");
              } else if (index == 1) {
                return new JiFindPage("1111");
              } else if (index == 2) {
                return new JiMsgPage("2222");
              } else if (index == 3) {
                return new JiMyPage("3333");
              }
            },
            itemCount: 4,
          ),
          bottomNavigationBar: new BottomNavigationBar(
            fixedColor: Colors.black87,
            type: BottomNavigationBarType.shifting,
            iconSize: 24,
            items: <BottomNavigationBarItem>[
              new BottomNavigationBarItem(
                  icon: _getBarIcon(0, false),
                  title: _getBarText(0),
                  activeIcon: _getBarIcon(0, true),
                  backgroundColor: Color(0xffEAEAEA)
              ),
              new BottomNavigationBarItem(
                  icon: _getBarIcon(1, false),
                  title: _getBarText(1),
                  activeIcon: _getBarIcon(1, true),
                  backgroundColor: Color(0xffEAEAEA)
              ),
              new BottomNavigationBarItem(
                  icon: _getBarIcon(2, false),
                  title: _getBarText(2),
                  activeIcon: _getBarIcon(2, true),
                  backgroundColor: Color(0xffEAEAEA)
              ),
              new BottomNavigationBarItem(
                  icon: _getBarIcon(3, false),
                  title: _getBarText(3),
                  activeIcon: _getBarIcon(3, true),
                  backgroundColor: Color(0xffEAEAEA)
              ),
            ],
            currentIndex: _tabIndex,
            onTap: (index) {
              _pageController.jumpToPage(index);
//            _pageController.animateToPage(index, duration: Duration(milliseconds: 100), curve: Curves.ease);
              _onPageChange(index);
            },
          )),
    );
  }

注意：
BottomNavigationBar作为底部导航栏，并不是最优选择（可以看看我的另一篇文章），有它的局限性：
1.icon和text无法设置间距
2.整个导航栏的高度不可更改，只能通过内部的icon等撑开

最后请大家关注我的github 参考简书ui,用flutter重写