我们在上一章回中介绍了TextField Widget,本章回中将介绍BottomNavigationBar Widget。闲话休提，让我们一起Talk Flutter吧。

1 概念介绍

我们在本章回中将介绍一个新的Widget:BottomNavigationBar，它就是我们经常在App中看到了底部导航，不过它不能独立使用，因为它是Scaffold Widget的
成员,需要配合bottomNavigationBar属性才能使用。本章回将介绍它的使用方法。

2 使用方法

和其它Widget一样，BottomNavigationBar提供了相关的属性来控制自己，常用的属性如下：

• items属性用来控制底部显示的标签,它是一个数组，数据中成员的数量就是底部标签的数量，数组类型为BottomNavigationBarItem;
• iconSize属性用来控制底部标签的大小；
• backgroundColor属性用来控制整个底部的背景色，默认为白色；
• fixedColor属性用来控制标签被选中时的颜色，默认是蓝色；
• currentIndex属性用来控制当前被选中的标签索引，默认值为0，表示第一个标签被选中；
• onTap属性表示选中标签时触发的事件，它的值是一个函数，从函数的参数中可以得到当前被选中的标签值；
• type属性用来控制标签的类型，当标签数量超过3个以后需要给它赋值，不然无法显示全部标签；

3 示例代码

return Scaffold(appBar: AppBar(title: const Text("BottomNavigationBar Example "),),body: const Text("test"),bottomNavigationBar: BottomNavigationBar(//超过3个item时需要使用type属性backgroundColor: Colors.amber,type: BottomNavigationBarType.fixed,currentIndex: selectIndex,fixedColor: Colors.blue,//放在iconsize,同时bottomBar整体也跟着放大iconSize: 40,onTap: (index) {setState( () {selectIndex = index;});},items: const [BottomNavigationBarItem(icon: Icon(Icons.person), label: "Person"),BottomNavigationBarItem(icon: Icon(Icons.home), label: "Home"),BottomNavigationBarItem(icon: Icon(Icons.settings), label: "Setting")],),);

上面的代码中，我们添加了三个标签，标签使用了Icon和文字，详细的内容可以参数items属性中的内容，整个底部导航的背景是黄色，其中某个标签被选中后变成蓝色，
代码中我们在onTap属性对应的方法中修改了currentIndex,让它的值与被选中的标签值一致，这样就可以在标签被点击后自动发生切换，也就是说点击哪个标签，哪个
标签就会被选中。注意修改值时使用了setStae()方法，该方法是StatefullWidget的方法，因此Scaffold Widget必须位于StatefullWidget中，不然点击后
无法修改索引值，进而无法切换标签。上面的代码中没有体现出来，大家可以参考Gihub中完整的代码。我们对嵌套关系做一个总结：BottomNavigationBar必须位于
Scaffold中，Scaffold必须位于StatefullWidget中。编译并且运行上面的程序可以得到一个底部导航栏，导航栏中包含三个标签。我在这里就不演示程序的运行
结果了，建议大家自己动手去实践。
看官们，关于BottomNavigationBarWidget的内容就介绍到这里，欢迎大家在评论区交流与讨论!