Flutter入门（15）：Flutter 组件之 BottomNavigationBar 详解

1. 基本介绍

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

2. 示例代码

代码下载地址。如果对你有帮助的话记得给个关注，代码会根据我的 Flutter 专题不断更新。

3. 属性介绍

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 开发可以了解

4. BottomNavigationBar 组件

4.1 容器创建

优雅的编程，首先创建一个 bottomnavigationbar.dart 文件。由于之后有页面效果变化，所以这里继承 StatefulWidgets。

import 'package:flutter/material.dart';

class FMBottomNavBarVC extends StatefulWidget {
  @override
  FMBottomNavBarState createState() => FMBottomNavBarState();
}

class FMBottomNavBarState extends State {
  @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(),
    );
  }

  List _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.2 items

使用 items 设置底部按钮。

bottom navbar items.png

4.3 onTap

使用 onTap 捕获 items 的点击事件，我们来一次点击下方按钮，看一下打印结果。

  BottomNavigationBar _bottomNavigationBar(){
    return BottomNavigationBar(
      items: _items(),
      onTap: (int index){
        print("选中 index = ${index}");
      },
    );
  }

bottom navbar ontap.png

4.4 currentIndex

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

  var _selectedIndex = 0;
  BottomNavigationBar _bottomNavigationBar(){
    return BottomNavigationBar(
      items: _items(),
      onTap: (int index){
        _selectedIndex = index;
        print("选中 index = ${index}");
        setState(() {

        });
      },
      currentIndex: _selectedIndex,
    );
  }

navbar currentIndex 0.png

navbar currentIndex 1.png

navbar currentIndex 2.png

4.5 type

使用 type 属性更改下方按钮样式。

  BottomNavigationBar _bottomNavigationBar(){
    return BottomNavigationBar(
      items: _items(),
      onTap: (int index){
        _selectedIndex = index;
        print("选中 index = ${index}");
        setState(() {

        });
      },
      currentIndex: _selectedIndex,
      type: BottomNavigationBarType.shifting,
    );
  }

nav type fixed.png

nav type shifting.png

4.6 fixedColor, unselectedItemColor

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

  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,
    );
  }

navbar fillColor.png

4.7 iconSize

使用 iconSize 改变图标大小。

  BottomNavigationBar _bottomNavigationBar(){
    return BottomNavigationBar(
      items: _items(),
      onTap: (int index){
        _selectedIndex = index;
        print("选中 index = ${index}");
        setState(() {

        });
      },
      currentIndex: _selectedIndex,
      // type: BottomNavigationBarType.shifting,
      fixedColor: Colors.green,
      iconSize: 30,
    );
  }

navbar iconSize.png

4.8 selectedFontSize, unselectedFontSize

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

  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: 16,
      unselectedFontSize: 11,
    );
  }

navbar fontSize.png

4.9 selectedLabelStyle, unselectedLabelStyle

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

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

  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: 16,
      unselectedFontSize: 11,
      selectedLabelStyle: TextStyle(
        color: Colors.yellow,
        fontSize: 12
      ),
      unselectedLabelStyle: TextStyle(
        color: Colors.cyan,
      ),
    );
  }

navbar label style.png

4.10 showSelectedLabels, showUnselectedLabels

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

  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: 16,
      unselectedFontSize: 11,
      selectedLabelStyle: TextStyle(
        color: Colors.yellow,
        fontSize: 12
      ),
      unselectedLabelStyle: TextStyle(
        color: Colors.cyan,
      ),
      showSelectedLabels: false,
      showUnselectedLabels: false,
    );
  }

navbar showlabels.png

4.11 selectedIconTheme, unselectedIconTheme

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

  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: 16,
      unselectedFontSize: 11,
      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,
      ),
    );
  }

navbar iconTheme.png

5. 技术小结

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