likes
comments
collection
share

【Flutter】熊孩子拆组件系列之拆ListView(九)—— KeyedSubtree

作者站长头像
站长
· 阅读数 49

前言

前面对ListView的主体部分做了分析;但是从widget树上可以看到,ListView也会对item外面包点东西;

所以从这篇开始,分析一下ListView给Item包了哪些,作用是什么;

首先还是看注释:

KeyedSubtree 的注释很简单,说白了,这个控件正如它的名字:

【Flutter】熊孩子拆组件系列之拆ListView(九)—— KeyedSubtree

给child包裹一层给了Key值的Widget;

KeyedSubtreee在哪里创建的

首先来到ListView,可以看到,在构造方法中,有这么一个东西:

【Flutter】熊孩子拆组件系列之拆ListView(九)—— KeyedSubtree

在listView.builder 中,则是SliverChildBuilderDelegate

【Flutter】熊孩子拆组件系列之拆ListView(九)—— KeyedSubtree

在这俩的build方法结尾,返回的就是KeyedSubtree;

【Flutter】熊孩子拆组件系列之拆ListView(九)—— KeyedSubtree

【Flutter】熊孩子拆组件系列之拆ListView(九)—— KeyedSubtree

那么,问题来了:

  • 这个SliverChildDelegate是什么东西?
  • 为什么会有这个KeySubtree?

SliverChildDelegate的作用

首先来到注释部分:

【Flutter】熊孩子拆组件系列之拆ListView(九)—— KeyedSubtree

总结一下有用的信息:delegate是为了创建child,防止在ViewPort外创建child

跟踪一下参数传递,可以看到最终delegate被传递给了SliverList;

而其被调用的位置,就在Element,也就是之前SliverList篇中提到的ChildManager中:

【Flutter】熊孩子拆组件系列之拆ListView(九)—— KeyedSubtree 【Flutter】熊孩子拆组件系列之拆ListView(九)—— KeyedSubtree 【Flutter】熊孩子拆组件系列之拆ListView(九)—— KeyedSubtree 【Flutter】熊孩子拆组件系列之拆ListView(九)—— KeyedSubtree

结合上图中标明的位置,可以总结一下,SliverChildDelegate所作的事,除了构建child,还负责记录indexKey,判断是否需要重构等;

当然最后这个difdFinishLayout方法还是空实现;在我看来,这个方法应该可以放一些回收资源之类的东西;比如说图片、视频;

KeySubtree的作用

至于这个KeySubtree的作用,在上面的流程中主要体现在根据 Element树对应widget 的 key值,来找widget树的最新index;

但是这个key值是复制自child的key,所以像ListView这种,child不一定有key,或者说,一般情况下,这个key都是空的:

【Flutter】熊孩子拆组件系列之拆ListView(九)—— KeyedSubtree

所以我猜想,最大的作用应该是固定会赋key的那种widget上,比如说使用wrap来创建keySubtree的widget;对于现在的ListView来说,没有多少作用:

【Flutter】熊孩子拆组件系列之拆ListView(九)—— KeyedSubtree

总结

如果仅仅挑出ListView来说的花,KeySubTree应该没太大作用;child本身都没设置key值;

不过涉及到的delegate,应该后面的分析中也会用到;

转载自:https://juejin.cn/post/7027438996091306021
评论
请登录