Flutter 100问:为什么PageView切换页面State重新创建

Why

PageView的渲染方式为Sliver模型(另一种是Box模型),这种模型针对的是页面懒加载,比如列表视图在视窗显示范围内的显示,反之不显示。

所以,划出PageView显示区域的Widge、Element、RenderObject默认情况是会被销毁的。这也是State被反复重新创建的原因。

How

Sliver模型提供了一种缓存State的方法:

  • 继承AutomaticKeepAliveClientMixin
  • wantKeepAlive返回true
  • 重写build()方法并调用父类build()方法
class _ContentViewState2 extends State<_ContentView> with AutomaticKeepAliveClientMixin{

  @override
  Widget build(BuildContext context) {
    super.build(context);
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Text('Num:$_count'),
        ElevatedButton(
          child: Text('increase'),
          onPressed: () {
            _count++;
            setState(() {});
          },
        )
      ],
    );
  }

  @override
  bool get wantKeepAlive => true;
}

More

知其然也要知其所以然。AutomaticKeepAliveClientMixin,是如何起作用的呢?

PageView以下大致Widget树如图:

5

可以看到,item Widget上有KeepAlive、AutomaticKeepAlive、_SliverFillViewportRenderObjectWidget。后面会一一介绍其作用。

  • _SliverFillViewportRenderObjectWidget

_SliverFillViewportRenderObjectWidget的父类为SliverMultiBoxAdaptorWidget,可以看做Sliver模型中能够容纳多个child的容器。

在item划出显示区域,_SliverFillViewportRenderObjectWidget的RenderSliver(RenderSliverFillViewport实例)对象,销毁item RenderObject。

void _destroyOrCacheChild(RenderBox child) {
  final SliverMultiBoxAdaptorParentData childParentData = child.parentData! as SliverMultiBoxAdaptorParentData;
  if (childParentData.keepAlive) {
    assert(!childParentData._keptAlive);
    remove(child);
    _keepAliveBucket[childParentData.index!] = child;
    child.parentData = childParentData;
    super.adoptChild(child);
    childParentData._keptAlive = true;
  } else {
    assert(child.parent == this);
    _childManager.removeChild(child);
    assert(child.parent == null);
  }
}

从上面可以清楚看到,被标记为keepAlive的RenderObject将会被缓存。

即将显示的item RenderObject会被创建。

void _createOrObtainChild(int index, { required RenderBox? after }) {
  invokeLayoutCallback<SliverConstraints>((SliverConstraints constraints) {
    assert(constraints == this.constraints);
    if (_keepAliveBucket.containsKey(index)) {
      final RenderBox child = _keepAliveBucket.remove(index)!;
      final SliverMultiBoxAdaptorParentData childParentData = child.parentData! as SliverMultiBoxAdaptorParentData;
      assert(childParentData._keptAlive);
      dropChild(child);
      child.parentData = childParentData;
      insert(child, after: after);
      childParentData._keptAlive = false;
    } else {
      _childManager.createChild(index, after: after);
    }
  });
}

创建过程优先从缓存中取RenderObject

  • KeepAlive

怎样标记RenderObject为keepAlive,KeepAlive Widget就是做这个工作的。
KeepAlive的父类是ParentDataWidget<KeepAliveParentDataMixin>。对应的Element是ParentDataElement。

RenderObject在attach期间向上查找ParentDataElement对象,并将上层数据赋值给RenderObject的parentData属性。

@override
void applyParentData(RenderObject renderObject) {
  assert(renderObject.parentData is KeepAliveParentDataMixin);
  final KeepAliveParentDataMixin parentData = renderObject.parentData! as KeepAliveParentDataMixin;
  if (parentData.keepAlive != keepAlive) {
    parentData.keepAlive = keepAlive;
    final AbstractNode? targetParent = renderObject.parent;
    if (targetParent is RenderObject && !keepAlive)
      targetParent.markNeedsLayout(); // No need to redo layout if it became true.
  }
}
  • AutomaticKeepAlive

实际上有了KeepAlive就已经能够标记缓存了,但是这是一种自上而下的方式,并且PageView隐藏了KeepAlive,不能让item Widget自行决定要不要缓存。

有了AutomaticKeepAlive和AutomaticKeepAliveClientMixin就可以让要不要缓存由item Widget自行决定。

AutomaticKeepAliveClientMixin的wantKeepAlive为true,在initeState()和build()期间就向上发送一个notification。

void _ensureKeepAlive() {
  assert(_keepAliveHandle == null);
  _keepAliveHandle = KeepAliveHandle();
  KeepAliveNotification(_keepAliveHandle!).dispatch(context);
}

AutomaticKeepAlive收到notification,重新构建Widget树,并把KeepAlive的keepAlive属性设置为true。这样就可以重新标记item Widget为keepAlive了。

Demo

https://github.com/wslaimin/flutter_hundred_questions/tree/master/lib/about/pageview

Communication

如果对Flutter感兴趣,来Flutter泡泡群冒个泡吧!

QQ: 905105199

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值