Flutter 底部菜单+顶部PageView联动（页面状态保存）回顾

前言：本次要实现的功能是底部菜单栏，点击切换页面，页面禁止左右滑动，且页面切换保存页面状态

1:底部菜单栏？那肯定首选 bottomNavigationBar，顶部页面切换联动（ViewPage）

老样子，创建StatefulWidget、State，第一步先来实现底部菜单栏先，State里面编写bottomNavigationBar，这里需要用到他的几个属性

currentIndex：当前显示页面

type：BottomNavigationBarType.shifting, //fixed 默认显示文案  shifting 点击才显示文案

items：菜单列表

onTap： 菜单点击事件

我想要四个菜单 首页、搜索、旅拍、我的，所以items里面要增加4个，

例如：

BottomNavigationBarItem(
              icon: Icon(Icons.home, color: Colors.blueAccent),
              title: Text(
                "首页",
                style: TextStyle(color: Colors.blueAccent),
              ))

看起来挺简单的，但是4个菜单的话，不就是要实现4个这样的代码块？？？一点不符合封装思想。那我们来手动改造一下，埋个点，现在StateFulWidget这里创建一个变量，int current_Position=0; 用于记录当前菜单索引，现在改造一下菜单创建，new 一个函数 createItem，每一个菜单需要标题 图标，所以 函数需要两个参数 title、 def_iconData,问题来了，预想的菜单是有选中高亮/反之灰色的，那我们是不是还需要点什么呢？

这时候上面的卖点就体现出来了，所以 函数这里还需要 当前菜单索引 index  默认图标 

def_iconData 高亮图标 select_iconData,这样我们就可以根据 current_Position和传入的菜单索引来判断是否高亮 灰色了，

//创建菜单 title：菜单名字 index： 菜单索引  def_iconData：默认图标  selected_iconData：高亮图标
  BottomNavigationBarItem createItem(String title, int index,
          IconData def_iconData, IconData selected_iconData) =>
      BottomNavigationBarItem(
          icon: Icon(
            //根据菜单索引和当前索引对比是否高亮、默认图标
            index == widget.current_Position ? selected_iconData : def_iconData,
            color: index == widget.current_Position
                ? Colors.blueAccent