写在前面
KeyedSubtree
这个 Widget 就是给 Widget 加上 Key,但 Widget 自己本身不就是有 Key 属性吗?其实更进一步来说,KeyedSubtree
适用的地方是给一个已经存在的 Widget 加上 Key。
内容
KeyedSubtree
的源码内容不多:
/// A widget that builds its child.
///
/// Useful for attaching a key to an existing widget.
class KeyedSubtree extends StatelessWidget {
/// Creates a widget that builds its child.
const KeyedSubtree({
Key? key,
required this.child,
}) : assert(child != null),
super(key: key);
/// Creates a KeyedSubtree for child with a key that's based on the child's existing key or childIndex.
factory KeyedSubtree.wrap(Widget child, int childIndex) {
final Key key = child.key != null ? ValueKey<Key>(child.key!) : ValueKey<int>(childIndex);
return KeyedSubtree(key: key, child: child);
}
/// The widget below this widget in the tree.
///
/// {@macro flutter.widgets.ProxyWidget.child}
final Widget child;
/// Wrap each item in a KeyedSubtree whose key is based on the item's existing key or
/// the sum of its list index and `baseIndex`.
static List<Widget> ensureUniqueKeysForList(List<Widget> items, { int baseIndex = 0 }) {
if (items == null || items.isEmpty)
return items;
final List<Widget> itemsWithUniqueKeys = <Widget>[];
int itemIndex = baseIndex;
for (final Widget item in items) {
itemsWithUniqueKeys.add(KeyedSubtree.wrap(item, itemIndex));
itemIndex += 1;
}
assert(!debugItemsHaveDuplicateKeys(itemsWithUniqueKeys));
return itemsWithUniqueKeys;
}
@override
Widget build(BuildContext context) => child;
}
我们知道 Key 就是起到一个标识的作用,在使用的过程中,在不同的场景下,每个人对 Key 的使用场景是不同的。
假设我们现在提供了一个 Widget 给别人使用,然后它的 Child 属性是由使用者提供的,对于使用者来说,他可能自己给 Child 一个 Key 的属性,作为他自己场景下的使用。但对我们设计的 Widget 来说, 则希望这个 Child 的 Key 是适合我们 Widget 的一些功能的。因此这个时候我们就可以使用KeyedSubtree
,对这个已存在的 Widget 给一个我们自己想要的 Key。
类似如下:
return KeyedSubtree(
key: ValueKey(index),
child: widget.itemBuilder(context , index),
);
当然我们也可以用别的 Widget 来做同样的处理:
return Container(
key: ValueKey(index),
child: widget.itemBuilder(context , index),
);
但这样做的话,由于有些 Widget 里面其实是由多个 Widget 组成,那就会导致树上的层级增加,所以官方提供了KeyedSubtree
这一个纯粹的 Widget 来给我们处理。
ensureUniqueKeysForList
static List<Widget> ensureUniqueKeysForList(List<Widget> items, { int baseIndex = 0 })
这个静态方法用于传入一个 Widget 列表,然后返回一个每个 Widget 带有 UniqueKey 的 Widget 列表。
比方说在官方的 TabBarView 这个 Widget 里,就有如下的代码:
// tabs.dart
class _TabBarViewState extends State<TabBarView> {
List<Widget>? _children;
List<Widget>? _childrenWithKey;
void _updateChildren() {
...
_childrenWithKey = KeyedSubtree.ensureUniqueKeysForList(widget.children);
}
KeyedSubtree.wrap
KeyedSubtree.wrap(Widget child, int childIndex)
方法则是给这个 child 包裹一个KeyedSubtree
,然后这个KeyedSubtree
的 Key 是如果 child 已经有 key 了,就拿它的 key 当做 ValueKey 的值,否则就是用传入的 childIndex。