持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第7天，点击查看活动详情

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

BottomNavigationBar构造函数：

 BottomNavigationBar({
    Key key,
    @required this.items,
    this.onTap,
    this.currentIndex = 0,
    this.elevation = 8.0,
    BottomNavigationBarType type,
    Color fixedColor,
    this.backgroundColor,
    this.iconSize = 24.0,
    Color selectedItemColor,
    this.unselectedItemColor,
    this.selectedIconTheme = const IconThemeData(),
    this.unselectedIconTheme = const IconThemeData(),
    this.selectedFontSize = 14.0,
    this.unselectedFontSize = 12.0,
    this.selectedLabelStyle,
    this.unselectedLabelStyle,
    this.showSelectedLabels = true,
    bool showUnselectedLabels,
  })

属性介绍

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	鼠标悬停，Web 开发可以了解

下面是一个简单的底部导航案例：

import 'package:flutter/material.dart';
import 'package:fluttertrip/pages/home_page.dart';
import 'package:fluttertrip/pages/my_page.dart';
import 'package:fluttertrip/pages/search_page.dart';
import 'package:fluttertrip/pages/travel_page.dart';
 
class TabNavigator extends StatefulWidget {
  @override
  _TabNavigatorState createState() => _TabNavigatorState();
}
 
class _TabNavigatorState extends State<TabNavigator> {
  final _defaultColor = Colors.grey;
  final _activeColor = Colors.blue;
  int _currentIndex = 0;
  final PageController _controller = PageController(
    initialPage: 0,
  );
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: PageView(
        controller: _controller,
        children: <Widget>[
          HomePage(),
          SearchPage(true, '', '长城d', '请输入搜索关键词'),
          TravelPage(),
          MyPage(),
        ],
        physics: NeverScrollableScrollPhysics(),
      ),
      bottomNavigationBar: BottomNavigationBar(
          currentIndex: _currentIndex,
          onTap: (index) {
            _controller.jumpToPage(index);
            setState(() {
              _currentIndex = index;
            });
          },
          type: BottomNavigationBarType.fixed,
          items: [
            _bottomItem('首页', Icons.home, 0),
            _bottomItem('搜索', Icons.search, 1),
            _bottomItem('旅拍', Icons.camera_alt, 2),
            _bottomItem('我的', Icons.account_circle, 3),
          ]),
    );
  }
 
  _bottomItem(String title, IconData icon, int index) {
    return BottomNavigationBarItem(
        icon: Icon(
          icon,
          color: _defaultColor,
        ),
        activeIcon: Icon(
          icon,
          color: _activeColor,
        ),
        title: Text(
          title,
          style: TextStyle(
              color: _currentIndex != index ? _defaultColor : _activeColor),
        ));
  }
}

使用 onTap 捕获 items 的点击事件.

onTap: (index) {
  _controller.jumpToPage(index);
  setState(() {
    _currentIndex = index;
  });
},

currentIndex

设置当前高亮的 item，下边我们来实现以下点击按钮，切换到对应的按钮高亮。我们先声明一个变量记录下标，在 item 点击时，记录点击的 item 下标，刷新页面。在使用 currentIndex 属性改变页面高亮按钮为变量保存的这个 item。

整体代码结构：

效果：

BottomNavigationBar有2种显示模式，其中一种是fixed效果，另一种是shifting效果。可以通过

type: BottomNavigationBarType.fixed,属性设置,切换的时候有个放大的动画效果，

fixedColor, unselectedItemColor

使用 fixedColor 改变按钮选中时填充色，unselectedItemColor 改变未选中时的填充色。

iconSize

使用 iconSize 改变图标大小。

selectedFontSize, unselectedFontSize

使用 selectedFontSize 设置选中时 title 字体大小，默认14。
使用 unselectedFontSize 设置未选中时 title 字体大小，默认12。

selectedLabelStyle, unselectedLabelStyle

使用 selectedLabelStyle 设置选中时 title 字体样式。
使用 unselectedLabelStyle 设置选中时 title 字体样式。

注意：颜色受 fixedColor，unselectedItemColor 颜色影响，所以这两项没有效果。

showSelectedLabels, showUnselectedLabels

使用 showSelectedLabels 设置选中时是否显示 title，默认为 true。
使用 showUnselectedLabels 设置选中时是否显示 title，默认为 true。

selectedIconTheme, unselectedIconTheme

使用 selectedIconTheme 设置选中时 icon 主题。
使用 unselectedIconTheme 设置选中时 icon 主题。
注意：主题设置的优先级较高，如果同时设置了上述其他属性，优先执行主题设置。

总结

• BottomNavigationBar 应用非常广泛。
• 没有太多自定义空间，主要就是颜色字体图标的设置，多试一试各种属性就可以掌握。