https://api.flutter.dev/flutter/material/BottomNavigationBar-class.html

BottomNavigationBar 是底部导航条，可以让我们定义底部Tab 切换，bottomNavigationBar
是Scaffold 组件的参数。

定义

  1. BottomNavigationBar({
  2.   Key key,
  3.   @required this.items,    //List<BottomNavigationBarItem> 底部导航条按钮集合
  4.   this.onTap,    //选中变化回调函数
  5.   this.currentIndex = 0,    //默认选中第几个
  6.   this.elevation,
  7.   this.type,    //BottomNavigationBarType.fixed        shifting
  8.   Color fixedColor,    //选中的颜色
  9.   this.backgroundColor,    //导航条背景色
  10.   this.iconSize = 24.0,
  11.   Color selectedItemColor,    //选中项的颜色
  12.   this.unselectedItemColor,
  13.   this.selectedIconTheme,    //选中icon的样式 IconThemeData(color: Colors.blue, opacity: 0.3, size: 30),
  14.   this.unselectedIconTheme,
  15.   this.selectedFontSize = 14.0,    //选中项文字大小
  16.   this.unselectedFontSize = 12.0,
  17.   this.selectedLabelStyle,    //选中项文字样式
  18.   this.unselectedLabelStyle,
  19.   this.showSelectedLabels = true, //是否展示 选中项文字
  20.   this.showUnselectedLabels,    //是否展示 非选中项文字
  21.   this.mouseCursor,
  22. })
  24. BottomNavigationBarItem({
  25.   @required this.icon,    //未选中时图标
  26.   @Deprecated(
  27.     'Use "label" instead, as it allows for an improved text-scaling experience. '
  28.     'This feature was deprecated after v1.19.0.'
  29.   )
  30.   this.title,    //已废弃
  31.   this.label,
  32.   Widget activeIcon,    //选中时图标
  33.   this.backgroundColor,
  34. })

简单使用

asdf.gif

  1. import 'package:flutter/material.dart';
  3. class HomePage extends StatefulWidget {
  4.   HomePage({
  5.     key,
  6.     this.index = '0',
  7.   }) : super(key: key);
  8.   final index;
  10.   @override
  11.   _HomePageState createState() => _HomePageState();
  12. }
  14. class _HomePageState extends State<HomePage> {
  15.   int _currentIndex;
  16.   List<Widget> pages = [
  17.     Text('首页', textScaleFactor: 4),
  18.     Text('教室', textScaleFactor: 4),
  19.     Text('我的', textScaleFactor: 4),
  20.   ];
  22.   @override
  23.   void initState() {
  24.     super.initState();
  25.     _currentIndex = int.parse(widget.index);
  26.   }
  28.   @override
  29.   Widget build(BuildContext context) {
  30.     return Scaffold(
  31.       appBar: AppBar(
  32.         title: Text('首页'),
  33.       ),
  34.       body: pages[_currentIndex],
  35.       bottomNavigationBar: BottomNavigationBar(
  36.         type: BottomNavigationBarType.fixed, //fixed 固定效果（默认）；shifting
  37.         currentIndex: _currentIndex,
  38.         unselectedItemColor: Colors.black,
  39.         selectedItemColor: Theme.of(context).primaryColor,
  40.         onTap: (value) {
  41.           setState(() {
  42.             _currentIndex = value;
  43.           });
  44.         },
  45.         items: [
  46.           BottomNavigationBarItem(label: '首页', icon: Icon(Icons.home)),
  47.           BottomNavigationBarItem(label: '教室', icon: Icon(Icons.class_)),
  48.           BottomNavigationBarItem(label: '我的', icon: Icon(Icons.sanitizer)),
  49.         ],
  50.       ),
  51.     );
  52.   }
  53. }

type为 shifting 效果

BottomNavigationBar有2种显示模式，其中一种是fixed效果，上面的展示就是fixed效果，这也是默认值，另一种是shifting效果，设置shifting时需要设置selectedItemColor和unselectedItemColor，效果如下：
asdf.gif

示例：结合PageView

asdf.gif

  1. import 'package:app1/routes/route_push.dart';
  2. import 'package:flutter/material.dart';
  3. import 'package:app1/routes/routes.dart';
  4. // import 'package:app1/routes/application.dart';
  6. class HomePage extends StatefulWidget {
  7.   HomePage({
  8.     key,
  9.     this.index = '0',
  10.   }) : super(key: key);
  11.   final index;
  13.   @override
  14.   _HomePageState createState() => _HomePageState();
  15. }
  17. class _HomePageState extends State<HomePage> {
  18.   PageController _pageController; //页面控制器
  19.   int _currentIndex; //页面索引
  20.   // 页面数组
  21.   List<Widget> pages = [
  22.     Text('首页', textScaleFactor: 4),
  23.     Text('教室', textScaleFactor: 4),
  24.     Text('我的', textScaleFactor: 4),
  25.   ];
  27.   @override
  28.   void initState() {
  29.     super.initState();
  30.     _currentIndex = int.parse(widget.index);
  31.     _pageController = PageController(
  32.       initialPage: _currentIndex, //表示当前加载第几页,默认第一页。
  33.       keepPage: true,
  34.       viewportFraction: 1, //slider 左右缩小倍数
  35.     );
  36.   }
  38.   @override
  39.   Widget build(BuildContext context) {
  40.     print('home => $_currentIndex');
  42.     return Scaffold(
  43.       appBar: AppBar(
  44.         title: Text('首页'),
  45.       ),
  46.       body: PageView(
  47.         controller: _pageController,
  48.         children: pages,
  49.         // physics: NeverScrollableScrollPhysics(), // 禁止滚动
  50.         onPageChanged: (value) {
  51.           print('onPageChanged => $value');
  52.           setState(() {
  53.             _currentIndex = value;
  54.           });
  55.         },
  56.       ),
  57.       bottomNavigationBar: BottomNavigationBar(
  58.         currentIndex: _currentIndex,
  59.         unselectedItemColor: Colors.black,
  60.         selectedItemColor: Theme.of(context).primaryColor,
  61.         onTap: (value) {
  62.           print('onTap => $value');
  63.           //_pageController.jumpToPage(index);  //直接跳转
  64.           _pageController.animateToPage(
  65.             value,
  66.             duration: Duration(milliseconds: 200),
  67.             curve: Curves.linear,
  68.           );
  69.         },
  70.         items: [
  71.           BottomNavigationBarItem(label: '首页', icon: Icon(Icons.home)),
  72.           BottomNavigationBarItem(label: '教室', icon: Icon(Icons.class_)),
  73.           BottomNavigationBarItem(label: '我的', icon: Icon(Icons.sanitizer)),
  74.         ],
  75.       ),
  76.     );
  77.   }
  78. }

示例：结合floatingActionButton

image.png

  1. import 'package:flutter/material.dart';
  3. class HomePage extends StatefulWidget {
  4.   HomePage({
  5.     key,
  6.     this.index = '0',
  7.   }) : super(key: key);
  8.   final index;
  10.   @override
  11.   _HomePageState createState() => _HomePageState();
  12. }
  14. class _HomePageState extends State<HomePage> {
  15.   int _currentIndex;
  16.   List<Widget> pages = [
  17.     Text('首页', textScaleFactor: 4),
  18.     Text('教室', textScaleFactor: 4),
  19.     Text('我的', textScaleFactor: 4),
  20.   ];
  22.   @override
  23.   void initState() {
  24.     super.initState();
  25.     _currentIndex = int.parse(widget.index);
  26.   }
  28.   @override
  29.   Widget build(BuildContext context) {
  30.     return Scaffold(
  31.       appBar: AppBar(
  32.         title: Text('首页'),
  33.       ),
  34.       body: pages[_currentIndex],
  35.       bottomNavigationBar: BottomNavigationBar(
  36.         currentIndex: _currentIndex,
  37.         unselectedItemColor: Colors.black,
  38.         selectedItemColor: Theme.of(context).primaryColor,
  39.         onTap: (value) {
  40.           setState(() {
  41.             _currentIndex = value;
  42.           });
  43.         },
  44.         items: [
  45.           BottomNavigationBarItem(label: '首页', icon: Icon(Icons.home)),
  46.           BottomNavigationBarItem(label: '教室', icon: Icon(Icons.class_)),
  47.           BottomNavigationBarItem(label: '我的', icon: Icon(Icons.sanitizer)),
  48.         ],
  49.       ),
  50.       floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
  51.       floatingActionButton: Container(
  52.         height: 70,
  53.         width: 70,
  54.         padding: EdgeInsets.all(8),
  55.         margin: EdgeInsets.only(top: 5),
  56.         decoration: BoxDecoration(
  57.           borderRadius: BorderRadius.circular(35),
  58.           color: Colors.white,
  59.         ),
  60.         child: FloatingActionButton(
  61.           child: Icon(Icons.add, size: 36),
  62.           onPressed: () {
  63.             setState(() {
  64.               this._currentIndex = 1;
  65.             });
  66.           },
  67.           backgroundColor: this._currentIndex == 1 ? Colors.red : Colors.blue,
  68.           foregroundColor: Colors.white,
  69.         ),
  70.       ),
  71.     );
  72.   }
  73. }