Flutter之底部导航BottomNavigationBar

BottomNavigationBar是Flutter的一个底部导航

BottomNavigationBar({
  Key key,
  @required this.items, 接受一个BottomNavigationBarItem=>(icon默认图标、title底部导航文字、actionIcon激活时候的图标、backgroundColor背景颜色)
  this.onTap
,点击跳转到响应的页面 一般和PageController一起使用，
                                        onTap: (index){
                                          _controller.jumpToPage(index);        
                                          setState(() {
                                            _currentIndex = index;
                                          });
                                        },
  this.currentIndex = 0,当前默认选中的哪一个导航 默认是0
  this.elevation = 8.0,高度 默认8.0
  BottomNavigationBarType type 底部导航栏的风格 有BottomNavigationBarType.fixed；BottomNavigationBarType.shifting 如果未指定，则 当少于四个项时，它会自动设置为第一个 这两个的区别在于 第一个会显示所有的底部导航文字，第二个选中哪一个才会显示哪一个的导航文字。
  Color fixedColor, 选中的颜色
  this.backgroundColor, 背景颜色
  this.iconSize = 24.0, icon的大小
  Color selectedItemColor,选中的颜色
  this.unselectedItemColor,未选中的颜色
  this.selectedIconTheme = const IconThemeData(), 选中后的自定义Icon
  this.unselectedIconTheme = const IconThemeData(),未选中后的自定义Icon
  this.selectedFontSize = 14.0,选中的字体大小
  this.unselectedFontSize = 12.0, 未选中的字体大小
  this.selectedLabelStyle,选中label样式
  this.unselectedLabelStyle 未选中label样式,
  this.showSelectedLabels = true,选中是否显示文字
  bool showUnselectedLabels, 未选中是否显示文字 type为fixed默认为true 为shifting默认为false
}

例子：

return Scaffold(
  body: PageView(
    children: <Widget>[
      HomePage(),
      SearchPage(),
      TravelPage(),
      MyPage(),
    ],
    controller: _controller,
  ),
  //底部导航
  bottomNavigationBar: BottomNavigationBar(
    //选中后的颜色
    selectedItemColor: _activeColor,
    //未选中的颜色
    unselectedItemColor: _defaultColor,
    //当前选中的是哪一个
    currentIndex: _currentIndex,
    //底下的按钮一直存在
    type: BottomNavigationBarType.fixed,
    //点击的时候跳转到相应的页面
    onTap: (index){
      _controller.jumpToPage(index);
      setState(() {
        _currentIndex = index;
      });
    },
    items: [
      BottomNavigationBarItem(
        //默认图标
        icon: Icon(
          Icons.home,
        ),
        //激活时候的图标
        activeIcon: Icon(
          Icons.home,
        ),
        title: Text("首页",)
      ),
      BottomNavigationBarItem(
        icon: Icon(
          Icons.search,
        ),
        activeIcon: Icon(
          Icons.search,
        ),
        title: Text("搜索",)
      ),
      BottomNavigationBarItem(
        icon: Icon(
          Icons.camera_alt,
        ),
        activeIcon: Icon(
          Icons.camera_alt,
        ),
        title: Text("旅拍",)
      ),
      BottomNavigationBarItem(
        icon: Icon(
          Icons.account_circle,
        ),
        activeIcon: Icon(
          Icons.account_circle,
        ),
        title: Text("我的",)
      ),
    ],
  ),
);