---

引言

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所示，

图1 图2 图3 图4

图2：交换Row中的方块控件的顺序；
图3：flutter会遍历元素树以查看骨架结构是否相同，它以Row元素开头，然后移动到其子元素，元素树检查新的小部件是否与旧的小部件类型和key相同（但在这种情况下，方块widget没有key，因此flutter只检查其类型），因为新旧方块控件的类型是相同，所以元素会更新对新控件的引用；
图4：就会达到预期的切换效果（Row对第二个子元素的检查也是如此）。

2. 当方块为有状态但无key的控件时

图5 图6 图7

图5：当方块为有状态但无key的控件时，我们发现颜色值存储在对应控件的元素中，而不是控件本身中。
图6：交换Row中的方块控件的顺序
图7：交换两个方块控件后，Flutter会遍历元素树，因为方块控件没有key，所以Flutter只会检查其类型，因为类型相同，所以元素更新对新控件对引用，但是由于两个方块对颜色是存储在元素中的，所以只是两个方块控件发生了变化，而其对应的颜色并不会发生变化。

3. 当方块为有状态且有key的控件时

图8 图9 图10 图11 图12 图13 图14

图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