引言
key是控件构造函数的一个可选参数，key保存了控件的状态，我们可以利用key修改控件的状态。
一个例子解释何时使用key
其实大多数时候，我们是不需要关心key对，但是如果我们需要对处于某种状态的相同类型的控件集合进行添加，删除或重新排序时，我们就需要用到key了。下面是一个何时需要key的简单例子。
上面例子展示的效果是，点击右下角的切换，可以对集合里的控件进行位置切换。
主页面的代码如下所示：
class _MyHomePageState extends State<MyHomePage> {
List<Widget> widgets;
@override
void initState() {
super.initState();
widgets = [
StatelessColorTile(),
StatelessColorTile(),
];
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Row(
children: widgets,
)),
floatingActionButton: FloatingActionButton(
onPressed: () {
changePosition();
},
child: Text('交换'),
),
);
}
changePosition() {
setState(() {
widgets.insert(1, widgets.removeAt(0));
});
}
}
StatelessColorTile控件
class StatelessColorTile extends StatelessWidget {
final Color color = RandomColor().randomColor();
@override
Widget build(BuildContext context) {
return Container(
width: 100,
height: 100,
color: color,
);
}
}
上面代码中我们可以看到颜色方块是一个无状态的控件。
接下来我们将无状态的StatelessColorTile改成有状态的StatefulColorTile，如下所示:
class StatefulColorTile extends StatefulWidget {
StatefulColorTile({Key key}) : super(key: key);
@override
_StatefulColorTileState createState() => _StatefulColorTileState();
}
class _StatefulColorTileState extends State<StatefulColorTile> {
final Color color = RandomColor().randomColor();
@override
Widget build(BuildContext context) {
return Container(
width: 100,
height: 100,
color: color,
);
}
}
主页面发生改变的代码：
@override
void initState() {
super.initState();
widgets = [
StatefulColorContainer(),
StatefulColorContainer(),
];
}
改变成有状态的方块之后，我们点击右下角的切换按钮，发现集合中的方块位置不能进行交换了，但是如果我们将有状态的方块添加一个key,集合中的方法位置就能进行切换了，如下所示：
@override
void initState() {
super.initState();
widgets = [
StatefulColorTile(
key: UniqueKey(),
),
StatefulColorTile(
key: UniqueKey(),
),
];
}
针对上面的实例我们接下来可以用图解的方式了解key的运作方式。
1. 当方块为无状态的控件时
在Flutter中，对于每个控件，flutter都会构建一个相应的元素，而这个元素只会保存每个控件的类型，以及对子元素的引用信息。我们上面例子的控件树和对应的元素树，如图1所示，
图2：交换Row中的方块控件的顺序；
图3：flutter会遍历元素树以查看骨架结构是否相同，它以Row元素开头，然后移动到其子元素，元素树检查新的小部件是否与旧的小部件类型和key相同（但在这种情况下，方块widget没有key，因此flutter只检查其类型），因为新旧方块控件的类型是相同，所以元素会更新对新控件的引用；
图4：就会达到预期的切换效果（Row对第二个子元素的检查也是如此）。
2. 当方块为有状态但无key的控件时
图5：当方块为有状态但无key的控件时，我们发现颜色值存储在对应控件的元素中，而不是控件本身中。
图6：交换Row中的方块控件的顺序
图7：交换两个方块控件后，Flutter会遍历元素树，因为方块控件没有key，所以Flutter只会检查其类型，因为类型相同，所以元素更新对新控件对引用，但是由于两个方块对颜色是存储在元素中的，所以只是两个方块控件发生了变化，而其对应的颜色并不会发生变化。
3. 当方块为有状态且有key的控件时
图8：当方块为有状态且有key的控件时，我们发现元素中除了存储控件的颜色值，还存储了控件的key值。
图9：交换Row中的方块控件的顺序
图10：交换两个方块控件后，会像上面说的一样匹配，但是我们发现元素中的key和相应方块控件的key不匹配.
图11：当发现元素中的key和相应方块控件的key不匹配后，Flutter会停用这些元素。
图12：Flutter会从第一个不匹配的方块控件，从元素树中查找具有相应key的元素，找到之后会更新其对应方块控件的引用。
图13：匹配完第一个方块控件后，FLutter会为第二个方块控件做同样的事情。
图14：最后，Flutter将会显示我们预期的内容，两个方块交换位置并更新其颜色。
总结
通过上面例子我们可以学习到，如果我们需要修改集合中的控件的顺序或数量，则我们应该使用key。
参考资料：
When to Use Keys-Flutter Widgets 101 Ep.4
