Flutter 使用 BottomAppBar 自定义底部导航（中间浮出按钮）——优化篇

在之前的一篇博客Flutter 使用 BottomAppBar 自定义底部导航（中间浮出按钮）中基本实现了点击底部Tab切换页面Page的操作，但是呢，有些问题。

问题阐述

之前的实现方法中，每次切换Page都会重新build一次，这样如果是列表页就会发现，滑动列表一段距离，切换Tab再切换回来，列表会回到顶端，实际上就是这个页面被重绘了，这种效果显然是不可以的，所以本篇文章将会修复相关问题。

解决问题

我是将之前的body的Widget改为PageView，然后用底部的Tab和PageView进行联动。如果仅仅改为PageView的话，还是会和以前的效果一样，PageView切换页面的话同样会重绘。具体原因分析参考这篇博客Flutter: PageView/TabBarView等控件保存状态的问题解决方案。Tips：我采用的是博客中提到的方案二：修改PageView的cacheExtent。MyPageView

相关代码

更改body

body: MyPageView(
        pages.length, //需要缓存的页面个数
        onPageChanged: (index) {
          setState(() {
            currentIndex = controller.page.round();
          });
        },
        children: pages,
        controller: controller,
      ),

pages即PageView需要展示的每个页面；通过controller.page.round();获取PageView显示的index，赋值给currentIndex，用于与底部Tab进行联动；controller即PageController。

底部Tab点击联动

onTap: () {
          if (currentIndex != index) {
            setState(() {
              currentIndex = index;
              controller.animateToPage(index,
                  duration: Duration(milliseconds: 300), curve: Curves.ease);
            });
          }
        },

以上是我实现的方式，并非唯一，仅供参考。