【flutter填坑】TabBar与PageView

1.TabBar+TabBarView的TabController添加addListener后，回调较慢问题

此问题的具体表现为：在给TabController通过addListener添加回调后，当滑动TabBarView切换页面时候，页面已经切换过去，但addListener中回调较慢。

但是观察后发现，当用手直接点击TabBar进行切换时候，速度很快，但此时addListener回调了2次。

解决方法：

目前只找到一个思路，用PageView替换TabBarView。替换工作量并不大。同时可以解决切换时候回调慢和回调2次的问题。
替换后需要对页面切换添加处理，使PageView和TabBar同步切换。

PageView(
      controller: _pageController,
      children: _getContentList(),
      onPageChanged: (index) {
      //要在此处对tabController进行操作
        _tabController?.animateTo(index);
      },
    );

TabBar(
      controller: _tabController,
      tabs: getTabList(),
      onTap: (index) {
      //在TabBar的onTap中对PageView进行切换
        pageController?.jumpToPage(index);
      },
    );

注意，在TabBar的onTap中使用PageController进行切换页面时候，尽量避免使用animate相关方法，可能会造成两个问题：
（1）点击切换页面时候，比如从3切换到0，那么TabController的index值会多次触发，即从3->2->1->0，而不是从3直接变为0，如果使用了此index进行一些判断，可能会造成问题。
（2）TabBar抖动

2.PageView只加载一个页面问题

PageView默认只会加载当前一个页面，但有时候可能有一些UI需求，希望在滑动页面之前加载一个占位图之类，此时如果等滑动切换页面再加载可能会有很小的一个延迟，看到背景色，视觉体验上差一些，所以会希望PageView能提前加载下一页。

有一种投机取巧的解决方案是，修改PageController的viewportFraction，设置为0.9999之类。

_pageController = PageController(viewportFraction: 0.9999);

相当于让旁边的页面加载0.0001，这样旁边的页面会提前进行加载。

3.PageView监听页面切换百分比

大部分情况下，onPageChanged可能够用。但有时候，我们可能想要监听页面滑动的百分比，以此来做一些跟手势相关的处理。

PageView(
      ……省略
      onPageChanged: (index) {
        //此处无法监听到百分比
      },
    );

可以对PageController addListener，并进行处理。

pageController?.addListener(() {
      //滑动开始的页面。truncate是对double值进行取整。PageController的page值会从当前页面按百分比进行增加，最后变为下一页的index值。
      int startPage = pageController!.page!.truncate();

      //delta值就是当前滑动的的百分比。为0-1的小数。它的正负表示方向。
      double delta = pageController!.page! - startPage;

      //默认情况下，当滑到第一页或最后一页再进行同方向滑动，会使outOfRange为true，否则为false。和physics设置有一定关系。
      bool outOfRange = pageController!.position.outOfRange;
      //滑动到第一页或最后一页，atEdge为true
      bool atEdge = pageController!.position.atEdge;
    });

可以通过以上值对滑动页面的百分比进行判断。