我们都知道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{
List 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{
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),
),
);
}
}
上面先不看我的注释代码，通过运行程序,下面放出三张图片变化的示意图:
通过比对上面三张图的方块颜色变化顺序，你会发现每次都是从第三个方块开始减少，而内容确是正常显示的，这是什么原因造成的？
这边还是要回到上面说过的增量渲染，先看看这个widget的源码是如何实现数据的更新的。
static bool canUpdate(Widget oldWidget, Widget newWidget) {
return oldWidget.runtimeType == newWidget.runtimeType
&& oldWidget.key == newWidget.key;
}
runtimeType是数据的类型，key是一个类似于标记的作用
下面通过几张图来实现一下数据的更新。
初始状态下：一一对应。
删除一个之后：widget树中的内容发生了变化，然后去element树中对比数据的变化，通过按照顺序比，element中的a与widget树中的b比较，发现数据发生了变化；因此将element中a的数据改成b，然后b的数据与c比较，将b改成了c，而颜色并没有发生变化，当c去比较时，widget树没有对应的内容，因此将c删除。
你或许还会发现一个问题，为什么方块内容会变化，颜色却不会变呢？
在我们上面的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{
int count = 0;
String data = 'hello Flutter';
@override
Widget build(BuildContext context) {
// TODO: implement build
return Center(
child: Column(
children: [
Text(count.toString()),
Text(data),
],
),
);
}
}
在上面的代码中，我们根据GlobalKey抽象类的范型来定义一个StatefulWidget的_globalKey对象。
而在StatefulWidget我们也需要将要改变的变量设置成全局变量。接下来，我们就可以通过按钮来实现_globalKey.currentState.setState去实现数据的更新。这个方法比第一个实现起来要简单很多，也很实用。
flutter小白一个，如有错误，请及时告知，我会及时更改错误！