第十八回：如何使用BottomNavigationBar切换页面

我们在上一章回中介绍了 BottomNavigationBar Widget,本章回中将介绍 如何使用BottomNavigationBar切换页面。闲话休提，让我们一起Talk Flutter吧。

概念介绍

我们在上一章回中介绍了BottomNavigationBar相关的内容，本章回中将在此基础上介绍如何使用BottomNavigationBar页面，这个是我们经常在App中使用的功
能，比如每天使用的微信就可以通过底部导航切换到不同的页面中，接下来我们将介绍详细的使用方法。

使用方法

在BottomNavigationBar中切换页面的思路是点击不同的标签时获取到标签的索引值，然后依据该索引值修改body中对应的内容。
注意这个body是Scaffold中的属性。这个过程可以这样理解：在Scallfold的bottomNavigationBar属性对应的BottomNavigationBar中获取索引值，然后依据该索引值修改body属性的值。下面是详细的使用步骤：

1. 定义一个List对象用来存放不同的页面；
2. 通过onTap属性获取被选择标签的索引值；
3. 把标签的索引值当作List的索引值，进而获取到不同的页面，并且把页面赋值给body属性；

示例代码

// 定义一个List对象用来存放不同的页面,这里存放的是其它Widged的示例
List<Widget> bodyWidgetList = const [
  ExStack(),
  ExButton(),
  ExText(),
];

return Scaffold(
  appBar: AppBar(
    title: const Text("BottomNavigationBar Example "),
  ),
  // body: const Text("test"),
  //把标签的索引值当作List的索引值，进而获取到不同的页面，并且把页面赋值给body属性；
  body: bodyWidgetList[selectIndex],
  bottomNavigationBar: BottomNavigationBar(
    //超过3个item时需要使用type属性
    backgroundColor: Colors.amber,
    type: BottomNavigationBarType.fixed,
    currentIndex: selectIndex,
    fixedColor: Colors.blue,
    //放在iconsize,同时bottomBar整体也跟着放大
    iconSize: 40,
    onTap: (index) {
      setState(() {
        // print(index);
        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")
    ],
  ),
);

上面的代码复用了上一章回中的内容，只有给body属性赋值的代码不一样。我们在此添加了注释。完整的程序可以参考Gihub上Ex010中的代码。

编译并且运行上面的代码，可以得到一个底部导航的页面，点击导航中不同的标签可以切换到不同的页面。我在这里就不演示程序运行结果了，建议大家自己动手去实践。

经验总结

使用本章回中介绍的方法可以实现页面切换功能，这种方式在项目中经常使用，建议大家一定要掌握该方法。该方法还有一个优点就是没有使用Router和Navigator就实现了页面的跳转。

当然了，在点击标签时通过路由跳转到其它页面也是可以的，只是没有本方法方便而已。如果看官们具有Android开发经验，那么就会发现本方法中使用的List相当于适配器，Android是组件自动处理适配器中的内容，本方法是手动处理List中的内容。

看官们，关于如何使用BottomNavigationBarWidget切换页面的内容就介绍到这里，欢迎大家在评论区交流与讨论!