Flutter中的BottomNavigationBar

1. 基本介绍

   BottomNavigationBar 提供了常见的底部导航条功能。

2. 属性介绍

   BottomNavigationBar属性	介绍
   items	必填项，设置各个按钮
   onTap	点击事件
   currentIndex	当前选中 item 下标
   elevation	阴影高度，默认为 8.0
   type	BottomNavigationBarType，默认 fixed，设置为 shifting 时，建议设置选中样式，和未选中样式，提供一个动画效果
   fixedColor	选中 item 填充色
   backgroundColor	整个 BottomNavigationBar 背景色
   iconSize	图标大小，默认 24.0
   selectedItemColor	选中 title 填充色
   unselectedItemColor	未选中 title 填充色
   selectedIconTheme	选中 item 图标主题
   unselectedIconTheme	未选中 item 图标主题
   selectedFontSize	选中 title 字体大小，默认14.0
   unselectedFontSize	未选中 title 字体大小，默认12.0
   selectedLabelStyle	选中 title 样式 TextStyle
   unselectedLabelStyle	未选中 title 样式 TextStyle
   showSelectedLabels	是否展示选中 title，默认为true
   showUnselectedLabels	是否展示未选中 title，默认为true
   mouseCursor	鼠标悬停，Flutter Web 开发可以了解

3. 代码示例

   import 'package:flutter/material.dart';
   
   class BottomBarExampleWidget extends StatefulWidget {
     @override
     BottomBarExampleState createState() => BottomBarExampleState();
   }
   
   class BottomBarExampleState extends State <BottomBarExampleWidget>{
     
     var _selectedIndex = 0;
     
     @override
     Widget build(BuildContext context) {
       // TODO: implement build
       return Scaffold(
         appBar: AppBar(
           title: Text('BottomNavigationBar'),
         ),
         bottomNavigationBar: _bottomNavigationBar(),
         body: Container(),
       );
     }
   
     BottomNavigationBar _bottomNavigationBar(){
       return BottomNavigationBar(
         items: _items(),
         onTap: (int index){
            _selectedIndex = index;
           print("选中 index = ${index}");
           setState(() {
   
           });
         },
         currentIndex: _selectedIndex,
         type: BottomNavigationBarType.shifting,
         fixedColor: Colors.green,
         unselectedItemColor: Colors.red,
         iconSize: 30,
         selectedFontSize: 14,
         unselectedFontSize: 12,
         selectedLabelStyle: TextStyle(
           color: Colors.yellow,
           fontSize: 12
         ),
         unselectedLabelStyle: TextStyle(
           color: Colors.cyan,
         ),
         showSelectedLabels: false,
         showUnselectedLabels: false,
         selectedIconTheme: IconThemeData(
           color: Colors.black,
           size: 24,
         ),
         unselectedIconTheme: IconThemeData(
           color: Colors.black,
           size: 24,
         ),
       );
     }
   
     List<BottomNavigationBarItem> _items(){
       return [
         BottomNavigationBarItem(
           icon: Icon(Icons.title),
           title: Text('title'),
         ),
         BottomNavigationBarItem(
           icon: Icon(Icons.favorite),
           title: Text('favorite'),
         ),
         BottomNavigationBarItem(
           icon: Icon(Icons.backspace),
           title: Text('backspace'),
         ),
       ];
     }
   }

4. 小结

​ BottomNavigationBar 应用的地方很多，主要是一些颜色字体图标的设置。