Flutter ListView保留滚动位置之优化之路

        起初，采用 TabBarView + ListView 结合 TabController 的方式实现了三页列表展示。但是，切换 TabBarView 的时候，每一页需要重新绘制，导致 ListView 无法保留上次所在位置。为了解决这个问题，通过 ScrollController 的 scrollController.position.pixels 记录 ListView 停留位置，等到切换回来之时，延时100毫秒，调用 scrollController.jumpTo(value) 滚动到该位置。当然，这种方式实现没有问题，不过体验不会太好，明显可见滚动全过程。来回切换，会感觉眼花缭乱。而且三个 TabBarView ，每一个 TabBarView 的ListView 都需要记录停留位置，需要三个 ScrollController ，感觉复杂了点。

        从网上了解到，PageView 类似 Android 的 ViewPager，它可以做到页面不重绘，在此记录一下。大致原理就是，PageView 的子 Widget 必须 混入 AutomaticKeepAliveClientMixin, 同时 wantKeepAlive 返回 true ，这是官方推荐做法。切换页面时，通过 PageController 控制 PageView 显示的当前页。这样是不会重绘的，所以 ListView 展示的数据不会刷新，滚动位置也不会改变。

完整demo如下：

class BgWidget extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return _BgWidget();
  }
}

class _BgWidget extends State<BgWidget> {

  PageController pageController;

  @override
  void initState() {
    super.initState();
    pageController = PageController(initialPage: 0, keepPage: true);
  }

  @override
  void dispose() {
    pageController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('PageView'),
      ),
      body: _createBody(),
    );
  }

  _createBody() {
    return Column(
      children: <Widget>[
        _createTab(),
        Expanded(child: PageView(
          scrollDirection: Axis.horizontal,
          controller: pageController,
          physics: NeverScrollableScrollPhysics(),
          onPageChanged: (page) {
            print('page = $page');
          },
          children: <Widget>[PageListView(), PageListView(), PageListView()],
        ))
      ],
    );
  }

  ///类似tab
  _createTab(){
    return Row(
      mainAxisSize: MainAxisSize.min,
      children: <Widget>[
        Expanded(child: RaisedButton(onPressed: (){
          setState(() {
            pageController.jumpToPage(0);
          });

        },child: Text('第一页'),),),
        Expanded(child: RaisedButton(onPressed: (){
          setState(() {
            pageController.jumpToPage(1);
          });
        },child: Text('第二页'),),),
        Expanded(child: RaisedButton(onPressed: (){
          setState(() {
            pageController.jumpToPage(2);
          });
        },child: Text('第三页'),),),
      ],
    );

  }
}

///PageView子widget
class PageListView extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return _PageListView();
  }
}

class _PageListView extends State<PageListView>
    with AutomaticKeepAliveClientMixin {
  @override
  Widget build(BuildContext context) {
    super.build(context);
    return ListView.builder(
        padding: EdgeInsets.only(bottom: 10),
        itemCount: 100,
        itemExtent: 40,
        shrinkWrap: true,
        itemBuilder: (BuildContext context, int index) {
          return Container(
            color: Colors.black12,
            child: Text(' 这是第 $index 行'),
          );
        });
  }

  @override
  // TODO: implement wantKeepAlive
  bool get wantKeepAlive => true;
}