Flutter中的key和GlobalKey

我们都知道flutter都是通过setState重新渲染build，实现数据和UI的更新；然而一个界面有时候需要更新的内容较少，而重新build，会大大的影响性能问题。因此，flutter有一个增量渲染的机制，去对数据发生变的进行增量更新。
接下来我们就来讲述一下flutter增量更新常用到的key和GlobalKey的使用。

之前我们讲述过flutter的渲染流程，他有三颗重要的树，widget树，element树，Render树。
而flutter更新数据时，会拿widget现有数据与element之前保存的数据进行比较，通过发现数据是否发生变化，来更新数据。
下面我们通过案例来实现一下这个过程。

我们先用StateleffWidget来做一个实验。

下面的代码是创建一个随机颜色的正方形块。

class Itemless extends StatelessWidget{
  final title;
  Itemless({this.title});
  final _color = Color.fromRGBO(
      Random().nextInt(256), Random().nextInt(256), Random().nextInt(256), 1.0);

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
      width: 100,
      height: 100,
      color: _color,
      child: Center(
        child: Text(title),
      ),
    );
  }
}

我们通过在界面上点击按钮，来减少正方形块，看看颜色的变化。

class keyDemo extends StatefulWidget{

  @override
  _keyDemoState createState() => _keyDemoState();
}
class _keyDemoState extends State<keyDemo>{

  List<Widget> items = [
    Itemless(title:'aaaaa'),
    Itemless(title:'bbbbb'),
    Itemless(title:'ccccc'),
    
    //StateItem('aaaaa',key: ValueKey(1111),),
    //StateItem('bbbbb',key:ValueKey(2222),),
    //StateItem('ccccc',key:ValueKey(3333),),
  ];
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text('keyDemo'),
      ),
      body: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: items,
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: (){
            setState(() {
              items.removeAt(0);
            });
          },
        child: Icon(Icons.add),
      ),
    );
  }
}

上面的代码主要是通过点击floatbtn来减少数组中第0个数据，通过运行程序，一切正常，每次递减都是从第0个开始，每个方块的颜色和内容不会发生改变。

下面我们用StatefulWidget来实现一下上面的功能。

关键代码

class StateItem extends StatefulWidget{
  final title;
  StateItem(this.title);
  //StateItem(this.title,{Key key}):super(key: key);

  _StateItemState createState() => _StateItemState();
  
}
class _StateItemState extends State<StateItem>{
  final _color = Color.fromRGBO(Random().nextInt(256), Random().nextInt(256), Random().nextInt(256), 1.0);
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
      width: 100,
      height: 100,
      color: _color,
      child: Center(
        child: Text(widget.title),
      ),
    );
    
  }
}

上面先不看我的注释代码，通过运行程序,下面放出三张图片变化的示意图:

1、 Simulator Screen Shot - iPhone SE (2nd generation) - 2020-06-18 at 10.59.22.png 2、 Simulator Screen Shot - iPhone SE (2nd generation) - 2020-06-18 at 10.59.29.png 3、 Simulator Screen Shot - iPhone SE (2nd generation) - 2020-06-18 at 10.59.33.png

通过比对上面三张图的方块颜色变化顺序，你会发现每次都是从第三个方块开始减少，而内容确是正常显示的，这是什么原因造成的？

这边还是要回到上面说过的增量渲染，先看看这个widget的源码是如何实现数据的更新的。

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

runtimeType是数据的类型，key是一个类似于标记的作用

下面通过几张图来实现一下数据的更新。

初始状态下：一一对应。

15924498093167.png

删除一个之后：widget树中的内容发生了变化，然后去element树中对比数据的变化，通过按照顺序比，element中的a与widget树中的b比较，发现数据发生了变化；因此将element中a的数据改成b，然后b的数据与c比较，将b改成了c，而颜色并没有发生变化，当c去比较时，widget树没有对应的内容，因此将c删除。

15924499311528.png

你或许还会发现一个问题，为什么方块内容会变化，颜色却不会变呢？
在我们上面的StateItem代码中，颜色和title的初始化并不在同一个地方，一个在statefulWidget中，一个在State里面，相当于一个局部变量，一个全局变量，全局变量需要用widget去引用。如果他们的变量类型相同，那么程序是正常运行的，但是有时候我们需要某些变量外界无法访问，而全局变量和局部变量又有关联，我们如何去实现呢？

那么我们就要用到key来进行标记。
将上面的 StateItem(this.title,{Key key}):super(key: key);的注释打开，然后在items数组中换成有valueKey的，就可以正常的删除第0个元素，且颜色正常。

这个key的作用就是形成一一对应的关系，当你删除widget中的a，通过与element中的a与widgetb比较，发现key不一样，那么他们就不会发生变化，等全部比较完，发现a不存在，因此将a删除。

最后，我们来看一下key抽象类的源码，他有两种类型，LocalKey和GlobalKey，
一、LocalKey有三种类型，用作diff算法的核心所在，用Element和widget进行比较
1、ValueKey 以一个数据作为Key。如：数字、字符
2、ObjectKey 以Object对象作为Key
3、UniqueKey 可以保证Key的唯一性！（一旦使用Uniquekey那么就不存在Element复用 了！）
二、GlobalKey
1、GlobalKey可以获取到对应的Widget的State对象！

下面我们来描述一下GlobalKey的使用。

需求：当我们页面内容很多时，而需要改变的内容只有很少的一部分且在树的底层的时候，我们如何去实现增量更新？

通常情况下有两种方式，第一种是通过方法的回调，去实现数据更新，第二种是通过GlobalKey，在StatelessWidget引用StatefulWidget。

我们直接看代码:

//在statelessWidget中引用statefulWidget更新UI
class GlobalKeyDemo extends StatelessWidget{
  final GlobalKey<_ChildPageState> _globalKey = GlobalKey();

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text('GlobalDemo'),
      ),
      body: ChildPage(
        key: _globalKey,
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.add),
        onPressed: (){
          _globalKey.currentState.data = 'old' + _globalKey.currentState.count.toString();
          _globalKey.currentState.count++;
          _globalKey.currentState.setState(() { });
        },
      ),
    );
  }

}

class ChildPage extends StatefulWidget{
  ChildPage({Key key}):super(key:key);

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

class _ChildPageState extends State<ChildPage>{
  int count = 0;
  String data = 'hello Flutter';

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Center(
      child: Column(
        children: <Widget>[
          Text(count.toString()),
          Text(data),
        ],
      ),
    );
  }
}

在上面的代码中，我们根据GlobalKey抽象类的范型来定义一个StatefulWidget的_globalKey对象。
而在StatefulWidget我们也需要将要改变的变量设置成全局变量。接下来，我们就可以通过按钮来实现_globalKey.currentState.setState去实现数据的更新。这个方法比第一个实现起来要简单很多，也很实用。

flutter小白一个，如有错误，请及时告知，我会及时更改错误！