class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'BottomAppBar组件', home: Scaffold( appBar: AppBar(title: Text('BottomAppBar组件')), //底部导航栏BottomNavigationBar bottomNavigationBar: DemoPage(), ), ); } } class DemoPage extends StatefulWidget { DemoPage({Key key}) : super(key: key); @override _DemoPageState createState() => _DemoPageState(); } class _DemoPageState extends State<DemoPage> { //默认当前选中的项 int _currentIndex = 0; void _onItemTapped(int index) { setState(() { _currentIndex = index; }); } @override Widget build(BuildContext context) { // return BottomNavigationBar( // //底部按钮类型 fixed 图标下文字始终显示 // type: BottomNavigationBarType.fixed, // //按钮大小 // iconSize: 20.0, // //按钮点击事件 // onTap: _onItemTapped, // //当前选中项 // currentIndex: _currentIndex, // //当BottomNavigationBarType时,选中的颜色 // fixedColor: Colors.orange, // items: <BottomNavigationBarItem>[ // BottomNavigationBarItem(title: Text('聊天'), icon: Icon(Icons.chat)), // BottomNavigationBarItem(title: Text('朋友圈'), icon: Icon(Icons.refresh)), // BottomNavigationBarItem(title: Text('我的'), icon: Icon(Icons.person)), // ], // ); return BottomNavigationBar( //底部按钮类型 shifting 移位样式 图标下文字选中时显示 type: BottomNavigationBarType.shifting, //按钮大小 iconSize: 20.0, //按钮点击事件 onTap: _onItemTapped, //当前选中项 currentIndex: _currentIndex, items: <BottomNavigationBarItem>[ BottomNavigationBarItem( title: Text( '聊天', style: TextStyle(color: Colors.red), ), icon: Icon( Icons.chat, color: Colors.red, )), BottomNavigationBarItem( title: Text('朋友圈', style: TextStyle(color: Colors.red)), icon: Icon(Icons.refresh, color: Colors.red)), BottomNavigationBarItem( title: Text('我的', style: TextStyle(color: Colors.red)), icon: Icon(Icons.person, color: Colors.red)), ], ); } }
Flutter笔记5:BottomNavigationBar底部导航栏详解
BottomNavigationBar是设置底部导航栏的wiget,和BottomAppBar很相似,通过BottomNavigationBarType属性,有两种选中样式可选,一种是改变颜色表示选中效果,一种是通过是否显示文字体现出来: