04.BottomNavigationBar

前言
开发一个应用，界面的开始大部分情况下都是一个底部标签控制器。而在Flutter中就是 BottomNavigationBar 。
一、 创建 BottomNavigationBar
这里我想创建一个类似微信的底部标签，Widget内我会这样写：
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: BottomNavigationBar(
        items: const [
          BottomNavigationBarItem(
            icon: Icon(Icons.chat),
            label: '微信',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.contact_mail),
            label: '通讯录',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.nature_people),
            label: '发现',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.settings),
            label: '我',
          ),
        ],
      ),
    );
  }
显示问题
看看效果：
1
怎么什么都没有？仔细看下其实都是白色的，我们设置一下颜色看看：
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: BottomNavigationBar(
        selectedItemColor: Colors.green,
        unselectedItemColor: Colors.grey,
        ...
      ),
    );
  }
2
但是选中的标签的样式会比较突出，怎么改成我们熟悉的样式呢？
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: BottomNavigationBar(
        type: BottomNavigationBarType.fixed,
        selectedItemColor: Colors.green,
        unselectedItemColor: Colors.grey,
        ...
      ),
    );
  }
3
二、 选中标签
这里明显是需要 StatefulWidget 的。通过 BottomNavigationBar: onTap 修改选中的标签
class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);
​
  @override
  State<StatefulWidget> createState() {
    return _MyHomePageDataSource();
  }
}
​
class _MyHomePageDataSource extends State<MyHomePage> {
  int _selectedTab = 0;
​
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: BottomNavigationBar(
        ...
        currentIndex: _selectedTab,
        onTap: (idx) {
          setState(() {
            _selectedTab = idx;
          });
        },
        ...
      ),
    );
  }
}
三、 页面切换
选中了标签我们也需要切换到对应的页面才行，而具体显示哪个页面是由 Scaffold 的 body 控制的。
class _MyHomePageDataSource extends State<MyHomePage> {
  int _selectedTab = 0;
  final List<Widget> _pages = [MessagePage(), ContactsPage(), MommentPage(), MinePage()];
​
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _pages[_selectedTab],// 切换页面
      bottomNavigationBar: BottomNavigationBar(
        ...
        currentIndex: _selectedTab,
        onTap: (idx) {
          setState(() {
            _selectedTab = idx; // 切换选中标签
          });
        },
        ...
      ),
    );
  }
}