Flutter 渲染之通过实战了解 Key 的作用

2023-11-17 10:45:45

前言

在 Flutter 中，Key 是一个非常重要的概念，它可以帮助 Flutter 跟踪和管理组件的状态。在编写代码时，如果我们不指定 Key，Flutter 会自动为组件生成一个 Key，但使用自定义的 Key 可以让我们更好地控制组件的状态。

Key 的类型

在 Flutter 中，有两种类型的 Key：

GlobalKey ：全局 Key，可以在整个应用程序中使用。
LocalKey ：局部 Key，只能在组件树中使用。

Key 的作用

Key 的作用主要是帮助 Flutter 跟踪和管理组件的状态。当组件的状态发生变化时，Flutter 会使用 Key 来确定哪些组件需要重新渲染。

Key 的用法

在 Flutter 中，我们可以使用 Key 来指定组件的唯一标识符。我们可以通过以下两种方式来指定 Key：

在组件的构造函数中指定 Key：

class MyWidget extends StatefulWidget {
  final GlobalKey key = GlobalKey();

  @override
  _MyWidgetState createState() => _MyWidgetState();
}

在组件的属性中指定 Key：

<MyWidget key={key} />

Key 的实战案例

为了帮助读者更好地理解 Key 的作用，我们来看两个实际的 demo。

demo 1：使用 Key 来跟踪组件的状态

在这个 demo 中，我们创建一个 StatefulWidget 组件，并在组件的状态类中定义了一个变量 count。当用户点击组件时，我们会增加 count 的值，并使用 setState() 方法来通知 Flutter 组件的状态发生了变化。

class MyWidget extends StatefulWidget {
  final GlobalKey key = GlobalKey();

  @override
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  int count = 0;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        setState(() {
          count++;
        });
      },
      child: Container(
        child: Text('Count: $count'),
      ),
    );
  }
}

当我们点击这个组件时，Flutter 会使用 key 来确定哪些组件需要重新渲染。在这种情况下，只有 MyWidget 组件需要重新渲染，因为它的状态发生了变化。

demo 2：使用 Key 来控制组件的渲染顺序

在这个 demo 中，我们创建一个 StatefulWidget 组件，并在组件的状态类中定义了一个变量 showChild。当用户点击组件时，我们会改变 showChild 的值，并使用 setState() 方法来通知 Flutter 组件的状态发生了变化。

class MyWidget extends StatefulWidget {
  final GlobalKey key = GlobalKey();

  @override
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  bool showChild = false;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        setState(() {
          showChild = !showChild;
        });
      },
      child: Container(
        child: Column(
          children: [
            Text('Parent'),
            if (showChild) ChildWidget(),
          ],
        ),
      ),
    );
  }
}

class ChildWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text('Child');
  }
}