一文了解flutter中的Key

东大街
157 阅读2分钟

在 Flutter 中，Key 是一个非常重要的概念，用于标识 Widgets。它们在树中的位置发生变化时，帮助 Flutter 框架保持元素的状态。Key 分为三种主要类型：Key（抽象类），LocalKey，和 GlobalKey。以下是对这些类型的详细讲解，包括它们的用法、区别及示例。

Key

Key 是一个抽象类，是所有键的基类。它不能直接实例化，只能通过其具体子类来使用。Key 主要用于标识 Flutter Widget，并帮助 Flutter 框架在重建 Widget 树时找到匹配的元素。

dart
复制代码
abstract class Key {
  const factory Key(String value) = ValueKey<String>;
}

LocalKey

LocalKey 是 Key 的子类，用于标识局部范围内的 Widgets。它又分为两个具体实现：ValueKey 和 ObjectKey。

ValueKey

ValueKey 使用简单的值（如字符串、数字）来标识 Widget。它通常用于简单的、具有唯一标识的对象。

dart
复制代码
class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      key: ValueKey('myValueKey'),
      child: Text('Hello'),
    );
  }
}

ObjectKey

ObjectKey 使用对象作为标识符。这对于需要用复杂对象来唯一标识 Widget 的情况非常有用。

dart
复制代码
class MyObject {
  final int id;
  MyObject(this.id);
}

class MyWidget extends StatelessWidget {
  final MyObject myObject;

  MyWidget(this.myObject);

  @override
  Widget build(BuildContext context) {
    return Container(
      key: ObjectKey(myObject),
      child: Text('Hello'),
    );
  }
}

GlobalKey

GlobalKey 是 Key 的另一种类型，适用于需要在应用程序的全局范围内唯一标识的 Widgets。GlobalKey 允许访问 Widget 的状态和上下文，这在需要跨组件操作时非常有用。GlobalKey 还可以用来引用和操作 State 对象。

创建和使用 GlobalKey

dart
复制代码
final GlobalKey<_MyStatefulWidgetState> myKey = GlobalKey<_MyStatefulWidgetState>();

class MyStatefulWidget extends StatefulWidget {
  @override
  _MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  int counter = 0;

  void increment() {
    setState(() {
      counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Text('Counter: $counter');
  }
}

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(title: Text('GlobalKey Example')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            MyStatefulWidget(key: myKey),
            ElevatedButton(
              onPressed: () {
                myKey.currentState?.increment();
              },
              child: Text('Increment'),
            ),
          ],
        ),
      ),
    ),
  ));
}

在这个示例中，GlobalKey 允许我们从外部访问和操作 MyStatefulWidget 的状态。

Key 的作用和使用场景

保持状态

当一个列表中的项被重新排序时，Key 可以帮助保持每个项的状态。例如：

dart
复制代码
class MyItem {
  final String name;
  MyItem(this.name);
}

class MyListWidget extends StatelessWidget {
  final List<MyItem> items;

  MyListWidget(this.items);

  @override
  Widget build(BuildContext context) {
    return ListView(
      children: items.map((item) {
        return ListTile(
          key: ValueKey(item.name),
          title: Text(item.name),
        );
      }).toList(),
    );
  }
}

在这个例子中，如果列表项的顺序发生变化，ValueKey 确保每个 ListTile 仍然能够保持其状态。

在动画中使用

当使用动画过渡 Widget 时，Key 也非常有用。例如，在使用 AnimatedList 时，Key 可以确保在移除和插入项目时，动画效果的平滑。

dart
复制代码
class MyAnimatedListWidget extends StatefulWidget {
  @override
  _MyAnimatedListWidgetState createState() => _MyAnimatedListWidgetState();
}

class _MyAnimatedListWidgetState extends State<MyAnimatedListWidget> {
  final GlobalKey<AnimatedListState> _listKey = GlobalKey<AnimatedListState>();
  final List<String> _items = ['Item 1', 'Item 2', 'Item 3'];

  @override
  Widget build(BuildContext context) {
    return AnimatedList(
      key: _listKey,
      initialItemCount: _items.length,
      itemBuilder: (context, index, animation) {
        return SlideTransition(
          position: animation.drive(Tween(begin: Offset(1, 0), end: Offset(0, 0))),
          child: ListTile(
            key: ValueKey(_items[index]),
            title: Text(_items[index]),
          ),
        );
      },
    );
  }
}

小结

  • Key：用于标识 Widget 的抽象类。

  • LocalKey：局部范围内的唯一标识符，包括 ValueKey 和 ObjectKey。

    • ValueKey：使用简单值（如字符串、数字）作为标识。
    • ObjectKey：使用对象作为标识。

  • GlobalKey：全局范围内的唯一标识符，允许访问 Widget 的状态和上下文。

在 Flutter 中，尤其是在实现复杂的交互和动画效果时，通过使用 Key，我们可以确保 Flutter 框架在重建 Widget 树时正确地识别和复用现有的 Widgets，从而保持其状态和属性。这对于在动态和交互密集的应用中维持一致的用户体验非常重要。下面结合源码进行分析。

为什么 Key 对实现复杂交互和动画效果很重要？

  1. 保持状态的一致性：当 Widget 树发生变化时（例如，重新排序或移除某些节点），Key 能帮助 Flutter 识别哪些 Widgets 可以重用，从而保持其内部状态不变。例如，在一个列表中重新排序项时，如果没有 Key，Flutter 可能会认为所有项都是新的，从而丢失它们的状态。
  2. 优化性能：通过使用 Key，Flutter 可以避免不必要的 Widget 重新创建和状态重置，这大大优化了渲染性能。因为 Key 帮助 Flutter 确定哪些 Widgets 可以重用，它减少了对象的创建和销毁开销。
  3. 实现复杂动画：在动画中，Key 可以确保动画效果应用在正确的 Widgets 上。没有 Key 的情况下，Widget 树的变动可能会导致动画的中断或意外行为。

深入分析 Key 的源码

我们从 Key 的作用机制开始，深入分析其在 Flutter 框架中的实现。

Key 的定义

Key 是一个抽象类，有多个子类，包括 LocalKey 和 GlobalKey。以下是 Key 的定义：

dart
复制代码
abstract class Key {
  const factory Key(String value) = ValueKey<String>;
  const Key._();
}

Key 的具体子类 ValueKey 和 ObjectKey 在 LocalKey 下定义：

dart
复制代码
abstract class LocalKey extends Key {
  const LocalKey() : super._();
}

class ValueKey<T> extends LocalKey {
  const ValueKey(this.value) : super();
  final T value;
}

class ObjectKey extends LocalKey {
  const ObjectKey(this.value) : super();
  final Object value;
}

GlobalKey 的实现

GlobalKey 是一种特殊的 Key，用于在整个应用范围内唯一标识一个 Widget。它不仅仅标识 Widget，还能访问 Widget 的状态：

dart
复制代码
class GlobalKey<T extends State<StatefulWidget>> extends Key {
  const GlobalKey() : super._();
  
  T get currentState => _state.currentState;
  BuildContext get currentContext => _state.context;
  
  static final Map<GlobalKey, Element> _registry = <GlobalKey, Element>{};

  @protected
  Element get _state => _registry[this];
}

GlobalKey 可以跨组件树操作状态和上下文，这在需要跨组件树操作时非常有用。

Element 和 Widget 的绑定

在 Flutter 中，Element 是连接 Widget 和其渲染对象（RenderObject）的桥梁。当 Widget 树重建时，Flutter 会根据 Key 来匹配新的 Widget 和现有的 Element。以下是相关代码片段：

dart
复制代码
void _rebuild() {
  owner.buildScope(this, () {
    final Widget built = widget.build(this);
    _child = updateChild(_child, built, widget.key);
  });
}

Element updateChild(Element child, Widget newWidget, Key newKey) {
  if (newWidget == null) {
    if (child != null) {
      deactivateChild(child);
    }
    return null;
  }
  if (child != null) {
    if (child.widget == newWidget) {
      return child;
    }
    if (child.widget.key != newKey) {
      deactivateChild(child);
      return _inflateWidget(newWidget, child.slot);
    }
  }
  return _inflateWidget(newWidget, child?.slot);
}

在 updateChild 方法中，如果 child 的 widget.key 与 newWidget.key 不同，Flutter 会认为它们是不同的 Widgets，从而重新创建和渲染新 Widget。

实际应用中的示例

1. 列表项的状态保持

考虑一个包含输入框的列表，当重新排序列表时，我们希望输入框的内容保持不变：

dart
复制代码
class Item {
  final String id;
  String content;

  Item(this.id, this.content);
}

class MyStatefulWidget extends StatefulWidget {
  @override
  _MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  List<Item> items = [Item('1', 'Item 1'), Item('2', 'Item 2')];

  @override
  Widget build(BuildContext context) {
    return ReorderableListView(
      onReorder: (oldIndex, newIndex) {
        setState(() {
          if (newIndex > oldIndex) {
            newIndex -= 1;
          }
          final Item item = items.removeAt(oldIndex);
          items.insert(newIndex, item);
        });
      },
      children: items.map((item) {
        return ListTile(
          key: ValueKey(item.id),
          title: TextField(
            controller: TextEditingController(text: item.content),
            onChanged: (text) => item.content = text,
          ),
        );
      }).toList(),
    );
  }
}

在这个示例中，通过使用 ValueKey，当列表项被重新排序时，输入框的内容得以保持。

2. 动画中的 Key 使用

考虑一个带有动画效果的列表项，当项被移除或添加时，有平滑的过渡效果：

dart
复制代码
class AnimatedListExample extends StatefulWidget {
  @override
  _AnimatedListExampleState createState() => _AnimatedListExampleState();
}

class _AnimatedListExampleState extends State<AnimatedListExample> {
  final GlobalKey<AnimatedListState> _listKey = GlobalKey<AnimatedListState>();
  final List<String> _items = ['Item 1', 'Item 2', 'Item 3'];

  void _removeItem(int index) {
    String removedItem = _items.removeAt(index);
    AnimatedListRemovedItemBuilder builder = (context, animation) {
      return SlideTransition(
        position: animation.drive(Tween(begin: Offset(1, 0), end: Offset(0, 0))),
        child: ListTile(
          key: ValueKey(removedItem),
          title: Text(removedItem),
        ),
      );
    };
    _listKey.currentState.removeItem(index, builder);
  }

  void _addItem() {
    int insertIndex = _items.length;
    String newItem = 'Item ${insertIndex + 1}';
    _items.insert(insertIndex, newItem);
    _listKey.currentState.insertItem(insertIndex);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Animated List Example'),
      ),
      body: AnimatedList(
        key: _listKey,
        initialItemCount: _items.length,
        itemBuilder: (context, index, animation) {
          return SlideTransition(
            position: animation.drive(Tween(begin: Offset(1, 0), end: Offset(0, 0))),
            child: ListTile(
              key: ValueKey(_items[index]),
              title: Text(_items[index]),
            ),
          );
        },
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _addItem,
        child: Icon(Icons.add),
      ),
    );
  }
}

在这个示例中，ValueKey 确保了每个列表项在添加或移除时，动画效果能正确地应用到相应的 Widget 上。

总结

通过源码分析和实际示例，我们了解了 Key 在 Flutter 中的重要性。Key 帮助 Flutter 框架识别和复用 Widgets，从而保持其状态和属性。这对于实现复杂的交互和动画效果非常重要，因为它确保了状态的一致性和渲染性能的优化。在实际应用中，通过使用不同类型的 Key，如 ValueKey、ObjectKey 和 GlobalKey，开发者可以有效地管理和维护 Widgets 的状态，确保应用的稳定和流畅。

avatar
文章
阅读
粉丝