在Widget的构造方法中，有Key这么一个可选参数,用作Element和Widget进行比较
Key是一个抽象类，有LocalKey和GlobalKey两种

LocalKey

ValueKey，ObjectKey和UniqueKey三种类型：

  • ValueKey: 以一个数据作为Key，如：数字、字符
  • ObjectKey: 以Object对象作为Key
  • UniqueKey: 可以保证Key的唯一性，一旦使用UniqueKey那么就不存在Element复用了，只要刷新Widget就好重建Element

当不传入Key时，按照Element的增量渲染，可能会存在问题

  1. class LocalKeyDemo extends StatefulWidget {
  2.   @override
  3.   _LocalKeyDemoState createState() => _LocalKeyDemoState();
  4. }
  6. class _LocalKeyDemoState extends State<LocalKeyDemo> {
  7.   List<TitleItem> _items = [
  8.     TitleItem(title: "aaaaa"),
  9.     TitleItem(title: "bbbbb"),
  10.     TitleItem(title: "ccccc"),
  11.   ];
  13.   @override
  14.   Widget build(BuildContext context) {
  15.     return Container(
  16.       child: Scaffold(
  17.         appBar: AppBar(
  18.           title: Text("Key"),
  19.         ),
  20.         body: Row(
  21.           mainAxisAlignment: MainAxisAlignment.center,
  22.           children: _items,
  23.         ),
  24.         floatingActionButton: FloatingActionButton(
  25.           onPressed: (){
  26.             setState(() {
  27.               _items.removeAt(0);
  28.             });
  29.           },
  30.           child: Icon(Icons.delete),
  31.         ),
  32.       ),
  33.     );
  34.   }
  35. }
  37. class TitleItem extends StatefulWidget {
  38.   final String title;
  39.   TitleItem({this.title});
  41.   @override
  42.   _TitleItemState createState() => _TitleItemState();
  43. }
  45. class _TitleItemState extends State<TitleItem> {
  46.   final Color _randomColor = Color.fromRGBO(Random().nextInt(256), Random().nextInt(256), Random().nextInt(256), 1);
  48.   @override
  49.   Widget build(BuildContext context) {
  50.     return Container(
  51.       color: _randomColor,
  52.       width: 100,
  53.       height: 100,
  54.       child: Center(
  55.         child: Text(widget.title),
  56.       ),
  57.     );
  58.   }
  59. }

上述代码 创建了3个颜色不同且不同文本的子widget，按照从左往右排列，要注意的是，颜色对象保存在State中，而文本对象保存在Widget中，然后点击按钮，每次删除最左边的widget。
执行结果：
image.png

虽然每次都能删除文本正确的widget，但是颜色值下一个widget的颜色

这种奇怪现象的原因其实和Flutter的增量渲染机制有关:
我们知道widget树是对应着element树的，而widget树是不稳定的，widget在每次的刷新中都有可能在创建或者销毁，而element不会，他会去对比树中新的widget和旧widget是否一致，是否可以更新widget，如果可以更新，那么element将会指向新的widget。如下图：

image.pngimage.png

一开始，widget树的节点与element树的节点是一一对应的，element的_widget属性指向了对应的widget，当widget树发生改变

image.png
element树并不会全部重新创建，而是与从左到右比较，看是否新的节点的widget与原先的节点的widget是否一致，而判断的依据我们可以在源码中看到

  1. static bool canUpdate(Widget oldWidget, Widget newWidget) {
  2.     return oldWidget.runtimeType == newWidget.runtimeType
  3.         && oldWidget.key == newWidget.key;
  4.   }

他比较的新旧widget的runtimeType和key值，明显widgetA和widgetB的runtimeType和key均一致，所以element会变成这样

image.png
element会复用，而widget则换成新的widget，当state并没有改变，而在案例中颜色是存放在sate中的，所以，首个element的文本变成了widgetB的文本，但是颜色还是sateA的的颜色，而widgetC的颜色变成了stateB的颜色，而由于原先3个节点变成两个，所以最后一个element被移除，最终变成我们看到的结果。

要解决这个问题，我们只需要在Flutter判断是否更新widget的时候给一个false的结果，就能解决这个问题，两个对比条件中，runtimeType肯定是一致的，所以，可以给widget添加一个唯一标示key
我们只需要对代码做下面的修改

  2. class _LocalKeyDemoState extends State<LocalKeyDemo> {
  3.   List<TitleItem> _items = [
  4.     TitleItem(title: "aaaaa", key: ValueKey(1),),
  5.     TitleItem(title: "bbbbb", key: ValueKey(2),),
  6.     TitleItem(title: "ccccc", key: ValueKey(3),),
  7.   ];
  9. }
  11. class TitleItem extends StatefulWidget {
  12.   final String title;
  13.   TitleItem({this.title, Key key}) : super(key: key);
  15.   @override
  16.   _TitleItemState createState() => _TitleItemState();
  17. }

这样，结果就是正常的了。

final Color _randomColor变量定义在StatefulWidget中结果也是正常的，由于Widget持有_randomColor，所有复用Element在改变Widget时，颜色也会随Widget一起编码

LocalKey可以给Widget作为唯一表示，在element树更新能准确的更新。

GlobalKey

GlobalKey可以获取到对应的State,Element以及Widget,源码如下：

  1.   BuildContext get currentContext => _currentElement;
  3.   Widget get currentWidget => _currentElement?.widget;
  5.   T get currentState {
  6.     final Element element = _currentElement;
  7.     if (element is StatefulElement) {
  8.       final StatefulElement statefulElement = element;
  9.       final State state = statefulElement.state;
  10.       if (state is T)
  11.         return state;
  12.     }
  13.     return null;
  14.   }
  15. }

利用这个特性，可以实现局部刷新从而进行优化:
如果只是根widget的按钮被点击，而需要改变的仅仅是子widget，我们并不需要刷新整个widget树，
根Widget通过GlobalKey拿到对应子Widget的State，仅刷新子widget的状态，从而优化性能。

  1. class GlobalKeyDemo extends StatelessWidget {
  2.   final GlobalKey<_ChildPageState> _globalKey = GlobalKey();
  4.   @override
  5.   Widget build(BuildContext context) {
  6.     return Container(
  7.       child: Scaffold(
  8.         appBar: AppBar(
  9.           title: Text("GlobalKey"),
  10.         ),
  11.         body: ChildPage(key: _globalKey),
  12.         floatingActionButton: FloatingActionButton(
  13.           onPressed: () {
  14.             _globalKey.currentState.setState(() {
  15.               _globalKey.currentState.count ++;
  16.             });
  17.           },
  18.           child: Icon(Icons.add),
  19.         ),
  20.       ),
  21.     );
  22.   }
  23. }
  25. class ChildPage extends StatefulWidget {
  26.   ChildPage({Key key}):super(key: key);
  28.   @override
  29.   _ChildPageState createState() => _ChildPageState();
  30. }
  32. class _ChildPageState extends State<ChildPage> {
  33.   int count = 0;
  34.   @override
  35.   Widget build(BuildContext context) {
  36.     return Container(
  37.       child: Center(
  38.         child: Text(count.toString(), style: TextStyle(fontSize: 30, fontWeight: FontWeight.w800, color: Colors.blue),),
  39.       ),
  40.     );
  41.   }
  42. }

总结

Key是一个抽象类，有LocalKey和GlobalKey两个子类:
LocalKey可以作为Widget的唯一标示，避免Element的重用,在删除和排序中创建Widget需加入Key
而GlobalKey可以拿到指定的Widget、Element、State。