flutter BottomNavigationBar类

显示在应用程序底部的材料窗口小部件，用于在少量视图中进行选择，通常在三到五之间。

底部导航栏由文本标签，图标或两者形式的多个项目组成，布置在一块材料的顶部。它提供应用程序顶级视图之间的快速导航。对于较大的屏幕，侧面导航可能更适合。

底部导航栏通常与Scaffold结合使用，它作为Scaffold.bottomNavigationBar参数提供。

效果图

代码：

import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new MaterialApp(
      title: "title",
      theme: ThemeData.light(),
      home: _home(),
    );
  }
}
class _home extends StatefulWidget{
  @override
  State createState() {
    // TODO: implement createState
    return _homeState();
  }
}
class _homeState extends State<_home>{
  final selectionColor=Colors.blue;//选中的颜色
  final unSelectionColor=Colors.grey;//未选中的颜色
  List widgetList=List();//一个装切换页面的集合
  int _curIndex=0;//默认选中的页下标
  @override
  void initState() {//重写initState 添加b布局
    widgetList..add(HomeScreen())
      ..add(EmailScreen())//.. 返回调用者本身
      ..add(BlankScreen());
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      bottomNavigationBar: BottomNavigationBar(//创建BottomNavigationBar
        type: BottomNavigationBarType.fixed,//fixed点击时不移动,默认样式，shifting点击时动画和标签会淡入
          currentIndex: _curIndex,//默认页下标
          onTap: (int index){//点击时切换下标
            setState(() {
              _curIndex=index;
            });
          },
          items: [//装入BottomNavigationBarItem 并设置样式
            BottomNavigationBarItem(
              icon: Icon(Icons.home,color:_curIndex==0?selectionColor:unSelectionColor,),
              title: Text("home",style: TextStyle(color: _curIndex==0?selectionColor:unSelectionColor),)
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.account_balance,color: _curIndex==1?selectionColor:unSelectionColor,),
              title: Text("blank",style: TextStyle(color: _curIndex==1?selectionColor:unSelectionColor),)
            ),
            BottomNavigationBarItem(
                icon: Icon(Icons.email,color: _curIndex==2?selectionColor:unSelectionColor,),
                title: Text("email",style: TextStyle(color: _curIndex==2?selectionColor:unSelectionColor),)
            ),
          ]
      ),
      body: widgetList[_curIndex],//主页面
    );
  }
}
//随便生成的3个页面
class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar:AppBar(
          title: Text('HOME'),
        ),
        body:Center(
          child: Text('HOME'),
        )
    );
  }
}
class EmailScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar:AppBar(
          title: Text('EmailScreen'),
        ),
        body:Center(
          child: Text('EmailScreen'),
        )
    );
  }
}
class BlankScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar:AppBar(
          title: Text('BlankScreen'),
        ),
        body:Center(
          child: Text('BlankScreen'),
        )
    );
  }
}