Flutter - Key，你真的了解了吗？

2023-11-19 15:48:33

接觸过Flutter的同学肯定对Key并不陌生，我们在所有Widget中都可以看到构造函数中有一个命名参数key，比如在StatefulWidget中：那么我相信你肯

接觸过Flutter的同学肯定对Key并不陌生，我们在所有Widget中都可以看到构造函数中有一个命名参数key，比如在StatefulWidget中：

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

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

那么我相信你肯定会有以下的疑惑：

Key是什么？
Key有什么用？
Key怎么用？

别着急，本文将一一为你解答。

Key是什么？

在Flutter中，Key是一个用于唯一标识Widget的对象。它是一个不可变的对象，一旦创建就不能被修改。Key可以是任何类型的数据，但最常用的类型是字符串和数字。

Key有什么用？

Key有以下几个作用：

帮助Flutter追踪Widget的状态。
帮助Flutter在Widget树中找到特定的Widget。
帮助Flutter在Widget树中移动或删除Widget。

Key怎么用？

在Flutter中，可以使用以下方法为Widget设置Key：

在Widget的构造函数中指定Key。
使用Key.key()方法为Widget创建Key。
使用UniqueKey()方法为Widget创建Key。

以下是一些示例代码：

// 在Widget的构造函数中指定Key
class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

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

// 使用Key.key()方法为Widget创建Key
final key = GlobalKey();
Widget myWidget = Container(key: key, child: Text('Hello World'));

// 使用UniqueKey()方法为Widget创建Key
Widget myWidget = Container(key: UniqueKey(), child: Text('Hello World'));