Flutter Widget : KeyedSubtree

Write it at the front

KeyedSubtree This Widget Just give Widget add Key, but Widget I don't have Key Attribute ？ In fact, further speaking ,KeyedSubtree The applicable place is for an existing Widget add Key.

Content

KeyedSubtree The source code content of is not much ：

/// 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;
}

We know Key Is to play a role of identification , In use , In different scenarios , Everyone is right. Key The usage scenarios of are different .

Suppose we now provide a Widget Use for others , And then it's Child Properties are provided by the user , For users , He may give it himself Child One Key Properties of , As a use in his own scene . But for our design Widget Come on , I hope this Child Of Key Is suitable for us Widget Some of the functions of . So this time we can use KeyedSubtree, For this existing Widget Give us what we want Key.

It's like this ：

   return KeyedSubtree(
      key: ValueKey(index),
      child: widget.itemBuilder(context , index),
    );

Of course, we can also use other Widget To do the same ：

   return Container(
      key: ValueKey(index),
      child: widget.itemBuilder(context , index),
    );

But if you do that , Because some Widget There are actually many Widget form , That will cause the hierarchy on the tree to increase , So the government provided KeyedSubtree This one is pure Widget Come and deal with it for us .

ensureUniqueKeysForList

static List<Widget> ensureUniqueKeysForList(List<Widget> items, { int baseIndex = 0 }) This static method is used to pass in a Widget list , Then return one for each Widget with UniqueKey Of Widget list .

For example, in the official TabBarView This Widget in , There is the following code ：

// 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) The method is to give this child Wrap a KeyedSubtree, And then this KeyedSubtree Of Key Yes, if child There has been a key 了 , Just take it key treat as ValueKey Value , Otherwise, use the incoming childIndex.

Reference resources

Flutter： Grid list that supports pinch and zoom gestures - Bili, Bili