Flutter Widget : KeyedSubtree

写在前面

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。

参考

Flutter：支持捏拉缩放手势的网格列表-哔哩哔哩