flutter: 视图常驻

开发中遇到一个问题，譬如有如下视图:

class _PageState extends State<_HomePage> {
  final _controller = PageController(initialPage: 0, keepPage: true);

  @override
  Widget build(BuildContext context) {

    return Scaffold(
      body: PageView(
        controller: _controller,
        physics: NeverScrollableScrollPhysics(),
        children: [
          Container(color: Colors.redAccent,),
          Container(color: Colors.blueAccent,),
        ],
      ),
    );
  }
}

PageView相当于Android的ViewPager，调用PageController.jumpToPage(index)没有问题，如期滑动到指定页面；但是将PageView的children改成如下形式:

        children: [
          Builder(builder: (ctx) {
            print('jumptTo111');
            return Container(color: Colors.redAccent,);
          },),
          Container(color: Colors.blueAccent,),
        ],

发现每次滑动到第一个页面都会打印jumptTo111, 这里存在一个问题: Builder的builder方法是在build方法中调用的，意味着Widget.build(BuildContext)被调用了，因而Container(color: Colors.redAccent,)重建了（注意Builder对象并没有重建）。把Builder换成别的控件也一样，关键是都会走这个控件对象的build方法。

这并不是我们期望的！PageView一般都是比较大的根节点页面的容器，如果每次滑动都要重建页面那必然引起性能问题！像这种情况我们必然是不希望重建页面的。这真是有点坑，因为明明已经给PageController设置了keepPage: true属性，竟然不好使？！不知道这算不是算是控件的bug，反正在flutter的v1.8.0上总是重建的。后来才搞明白keepPage这个属性表示的意思是视图被重建后记住滑动到的是第几页，和我们的意图一点关系没有。。。

后来发现ListView也有类似的问题：它接收一个IndexedWidgetBuilder itemBuilder参数来创建列表项的视图。如果有1-100的列表项，从1滑到100没问题，再从100滑到1还是重建了列表项视图。某些情况下创建好的视图对象只要数据没有变更, 我们当然是不希望再去创建视图，ListView是所有界面开发最重要的视图控件之一, 如果要使它的列表项视图常驻这可怎么解。。。

不管原理怎样，现在需要的效果是使视图常驻，立马找到了KeepAlive和AutomaticKeepAlive控件，然而让人费解的是这两个控件必须声明祖先节点SliverWithKeepAliveWidget，否则就崩溃。好在找到了这篇文章，核心意思是必须通过StatefulWidget的状态对象混入AutomaticKeepAliveClientMixin 这样能够达到视图常驻的目的，形如

class _PageState extends State<_HomePage> with AutomaticKeepAliveClientMixin<_HomePage> {
  @override
  bool get wantKeepAlive => true;
  
  @override
  Widget build(BuildContext context) {
    super.build(context);
    return Scaffold(...
    );
  }
}

但我们平常开发肯定不希望再耦合这坨逻辑所以最好封装成能直接拿来用的控件，因为KeepAlive已经被用了就起名AliveKeeper吧, 于是有

import 'package:flutter/widgets.dart';

class AliveKeeper extends StatefulWidget {
  final Widget child;

  const AliveKeeper({Key key, @required this.child}) : super(key: key);

  @override
  State createState() => _AliveState();
}

class _AliveState extends State
    with AutomaticKeepAliveClientMixin {

  @override
  bool get wantKeepAlive => true;

  @override
  Widget build(BuildContext context) {
    super.build(context);

    return widget.child;
  }
}

对应改成：

        children: [
          AliveKeeper(child: Builder(builder: (ctx) {
            print('jumptTo111');
            return Container(color: Colors.redAccent,);
          },),),
          Container(color: Colors.blueAccent,),
        ],

builder方法果然不再被调用，而这样一个小巧而实用的控件正是我们需要的~

这种做法肯定不能适用所有情况，所以一定要分清哪种情况下需要让视图对象常驻。另外一个让人忧心的是flutter开发过程中必须对控件非常熟悉，否则稍微不注意用错了控件就会导致视图重建，很多时候定位都不好定位！

flutter: 视图常驻

你可能感兴趣的:(flutter)