Flutter基础控件：BottomNavigationBar

属性

onTap

点击Item回调事件

currentIndex

当前选择的item下标

elevation

阴影

type

bar 类型：fixed，shifting

Flutter的BottomNavigationBar如果不指定type，则当items小于4个时，类型是fixed，大于或等于4个时，自动变成了shifting

fixedColor

BottomNavigationBar.type为fixed设置fixedColor颜色

backgroundColor

整体背景色

iconSize

Item中图片大小

selectedItemColor

被选择item颜色

unselectedItemColor

未被选择item颜色

selectedIconTheme

被选择icon题主颜色

unselectedIconTheme

未被选择icon题主颜色

selectedFontSize

被选择item字体大小

unselectedFontSize

未被选择item字体大小

selectedLabelStyle

被选择item 文字风格

unselectedLabelStyle

未被选择item 文字风格

showSelectedLabels

被选中的item显示文字，未被选中的item不显示文字

showUnselectedLabels

未被选中的item显示文字，被选中的item不显示文字

void main() => runApp(new MyApp());

//StatelessWidget 无状态widget
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'welcome',
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text('首页'),
        ),
        body: new Center(
          child: new IconButton(
            icon: new Icon(Icons.volume_up),
            tooltip: 'Increase volume by 10%',
            onPressed: () {
              // ...
            },
          ),
        ),
        bottomNavigationBar: new BottomNavigationWidget(),
      ),
    );
  }
}

class BottomNavigationWidget extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => BottomNavigationWidgetState();
}

class BottomNavigationWidgetState extends State<BottomNavigationWidget> {
  int _currentIndex = 0;

  List<BottomNavigationBarItem> _barItem = [
    BottomNavigationBarItem(icon: Icon(Icons.home), title: Text('首页')),
    BottomNavigationBarItem(icon: Icon(Icons.list), title: Text('新闻')),
    BottomNavigationBarItem(icon: Icon(Icons.people), title: Text('我的')),
    BottomNavigationBarItem(icon: Icon(Icons.phone), title: Text('隐私')),
  ];

  @override
  Widget build(BuildContext context) {
    return new BottomNavigationBar(
      items: _barItem,
      currentIndex: _currentIndex,
      onTap: (int index) {
        setState(() {
          _currentIndex = index;
        });
      },
      selectedItemColor: Colors.amber[800],
      unselectedItemColor: Colors.grey,
      selectedFontSize: 12.0,
      type: BottomNavigationBarType.fixed,
    );
  }
}