继续创造，加速生长！这是我参加「日新方案 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,
  })

特点介绍

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

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 应用十分广泛。
• 没有太多自界说空间，首要便是色彩字体图标的设置，多试一试各种特点就能够把握。