The Key of Widget in Flutter
当我们刚开始使用Flutter，我们在继承StatelessWidget和StatefulWidget时，不会关注Key。整个界面的渲染通常也不会有什么问题。但当我们想要复用Widget，想要优化我们的渲染性能时，Key就成为了一个绕不过的话题。
一个问题
首先，我们需要明白Flutter的界面渲染原理。深入了解Flutter界面开发这一篇博客讲得非常清楚。当我们需要更新界面时，我们会通过setState的方式，让StatefulWidget遍历Widget树进行重建。
有时候，我们会发现，即使我们调用了setState，Widget也没有进行重建。
它的原因
原来，当我们用一个StatefulWidget渲染界面，其状态可能被我们储存在其State中。当我们修改Widget树中ChildWidget的位置，如果修改完成后，整个树的每一个Widget没有发生改变，Flutter也不会更新整个树。
上面一段话，非常绕且难懂。但我们很容易想象，Element树决定了页面最终展示到屏幕上的样子，Flutter会从上到下逐一对比Widget树和Element树中的每个节点，如果左右节点的类型一致，那么就认为该element仍然是有效的，可用复用。
一个粟子
我们用这样一个StatefulWidget，将其color储存在State中。
class StatefulColorfulTile extends StatefulWidget {
StatefulColorfulTile({Key key}) : super(key: key);
@override
State<StatefulWidget> createState() => StatefulColorfulTileState();
}
class StatefulColorfulTileState extends State<StatefulColorfulTile> {
// 将 Color 储存在 StatefulColorfulTile 的 State StatefulColorfulTileState 中.
Color color;
@override
void initState() {
super.initState();
color = UniqueColorGenaretor.getColor();
}
@override
Widget build(BuildContext context) => buildColorfulTile(color);
}
class PositionedTiles extends StatefulWidget {
@override
State<StatefulWidget> createState() => PositionedTilesState();
}
class PositionedTilesState extends State<PositionedTiles> {
List<Widget> tiles;
@override
void initState() {
super.initState();
tiles = [
StatefulColorfulTile(),
StatefulColorfulTile(),
];
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: tiles))),
floatingActionButton: FloatingActionButton(
child: Icon(Icons.sentiment_very_satisfied), onPressed: swapTiles));
}
void swapTiles() {
setState(() {
tiles.insert(1, tiles.removeAt(0));
});
}
}
当我们调用tiles.insert(1, tiles.removeAt(0));时，界面是不会更新的。因为对于Flutter来说，我们交换了两个一模一样的Widget，交换完成后，Widget树并没有变化。如果我们把ChildWidget换成StatelessWidget，且color信息储存在Widget中，界面就会更新，因为Flutter会认为这是两个完全不同的Widget。
那么，如果我们一定要用StatefulWidget来做ChildWidget时，我们应该怎么做呢？
很简单：
void initState() {
super.initState();
tiles = [
// 使用 UniqueKey
StatefulColorfulTile(key: UniqueKey()),
StatefulColorfulTile(key: UniqueKey()),
];
}
我们给每一个StatefulWidget一个唯一的key。这样，当我们交换Widget时，Flutter就不会认为这两个Widget是一模一样的。
用在哪里
简而言之，当我们在一个容器下，放了多个相同的Widget对象时，我们就应该思考，这些Widget它们是否应该有个id，还是说它们本质上没有区别。
根据业务不同，它们的id，可能是字符(ValueKey)，可能是一个复杂的数据结构(ObjectKey)。或者，我们只是想让它们彼此唯一(UniqueKey)。
此外，我们知道Element是和State绑定的。所以，当你修改了相同类型的Widget节点位置，又想要保留它的状态时，你需要使用Key。
GlobalKey
作用
- 允许widget在应用程序中的任何位置更改其parent而不丢失其状态。应用场景：在两个不同的屏幕上显示相同的widget，并保持状态相同。
- 可以在任何地方通过
key.currentState获取其状态，甚至可以调用changeState()改变它的状态。所以，我们可以认为，用上GlobalKey的Widget，是需要伴随App整个生命周期的。像一个静态的Widget一样。
结语
对于key的使用，需要根据我们业务的具体情况，根据Flutter的渲染机制，灵活掌握。其核心就是Element与Widget的绑定关系，是类型绑定，还是key+类型的绑定。
