一、简介

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

二、BottomNavigationBar 源码

BottomNavigationBar({
    Key key,
    @required this.items,//底部导航条按钮集合
    this.onTap,//点击选中的回调
    this.currentIndex = 0,//选中第几个题目的索引值
    this.elevation,//阴影
    this.type,//风格
    Color fixedColor,//选中的颜色
    this.backgroundColor,//背景色
    this.iconSize = 24.0,//图标的大小
    Color selectedItemColor,//选中条目的颜色
    this.unselectedItemColor,//未选中条目的颜色
    this.selectedIconTheme,//选中图标的样式
    this.unselectedIconTheme,//未选中图标的样式
    this.selectedFontSize = 14.0,//选中文字的大小
    this.unselectedFontSize = 12.0,//未选中文字的大小
    this.selectedLabelStyle,//选中文字的样式
    this.unselectedLabelStyle,//未选中文字的样式
    this.showSelectedLabels = true,//是否显示选中的文字
    this.showUnselectedLabels,//是否显示未选中的文字
    this.mouseCursor,//
  }) : assert(items != null),
       assert(items.length >= 2),
       assert(
        items.every((BottomNavigationBarItem item) => item.title != null) ||
        items.every((BottomNavigationBarItem item) => item.label != null),
        'Every item must have a non-null title or label',
       ),
       assert(0 <= currentIndex && currentIndex < items.length),
       assert(elevation == null || elevation >= 0.0),
       assert(iconSize != null && iconSize >= 0.0),
       assert(
         selectedItemColor == null || fixedColor == null,
         'Either selectedItemColor or fixedColor can be specified, but not both'
       ),
       assert(selectedFontSize != null && selectedFontSize >= 0.0),
       assert(unselectedFontSize != null && unselectedFontSize >= 0.0),
       assert(showSelectedLabels != null),
       selectedItemColor = selectedItemColor ?? fixedColor,
       super(key: key);

三、BottomNavigationBar 属性介绍

四、BottomNavigationBarItem源码

const BottomNavigationBarItem({
    @required this.icon,
    @Deprecated(
      'Use "label" instead, as it allows for an improved text-scaling experience. '
      'This feature was deprecated after v1.19.0.'
    )
    this.title,
    this.label,
    Widget activeIcon,
    this.backgroundColor,
  }) : activeIcon = activeIcon ?? icon,
       assert(label == null || title == null),
       assert(icon != null);

五、BottomNavigationBarItem属性介绍

|属性|说明|
|icon|图标|
|title|标题|
|label|标签|
|backgroundColor|背景色
|activeIcon|选中后的图标

七、IconThemeData源码

const IconThemeData({this.color, double opacity, this.size}) : _opacity = opacity;

七、IconThemeData属性介绍

八、demo

void main() {
  runApp(TestFul());
}

class TestFul extends StatefulWidget {
  TestFul({Key key}) : super(key: key);

  _TestFulState createState() => _TestFulState();
}

class _TestFulState extends State<TestFul> {
  int clickIndex = 0;
  List _pageList = [
    Tab1(),
    Tab2(),
    Tab3(),
  ];

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("BottomNavigationBar学习"),
        ),
        body: _pageList[clickIndex],
        bottomNavigationBar: BottomNavigationBar(
        //点击条目的监听回调
          onTap: (int index) {
            setState(() {
              clickIndex = index;
            });
          },
          currentIndex: clickIndex,
          type: BottomNavigationBarType.fixed,
          backgroundColor: Colors.greenAccent,
          iconSize: 20,
//          fixedColor: Colors.yellow,
          selectedItemColor: Colors.yellow,
          unselectedItemColor: Colors.black,
          selectedIconTheme: IconThemeData(
            color: Colors.red,
            opacity: 1,
            size: 30,
          ),
          unselectedIconTheme:
              IconThemeData(color: Colors.deepPurple, opacity: 0.8, size: 20),
          selectedFontSize: 2,
          unselectedFontSize: 2,
          selectedLabelStyle: TextStyle(
            color: Colors.purpleAccent,
            fontSize: 15,
          ),
          unselectedLabelStyle: TextStyle(
            color: Colors.purpleAccent,
            fontSize: 10,
          ),
          showSelectedLabels: true,
          showUnselectedLabels: false,

          items: [
            BottomNavigationBarItem(
                icon: Icon(Icons.search), title: Text("查找")),
            BottomNavigationBarItem(
                activeIcon: Icon(Icons.opacity),
                icon: Icon(Icons.home_rounded), title: Text("首页")),
            BottomNavigationBarItem(
                icon: Icon(Icons.add_circle_sharp), title: Text("添加")),
          ],
        ),
      ),
    );
  }
}

class Tab1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text("我是查找");
  }
}

class Tab2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text("我是首页");
  }
}

class Tab3 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text("我是添加");
  }
}

141402bc6e5504bbeb9f65310978970.png