之前讲flutter的渲染原理时我们知道flutter有三棵树：widgetTree，elementTree，renderObjectTree，widget包含了基本的配置信息，element决定要不要重新创建renderObject，而renderObject则负责实际的渲染工作。我们来看一个例子，代码如下：
main.dart
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(
appBar: AppBar(
title: const Text("key demon"),
),
body: Center(
child:Column(children: [
Box(Colors.red),
Box(Colors.red),
Box(Colors.orange),
],)
),
),
);
}
}
基础框架就不看了，主要是body里面放了三个box的widget，下面是box的代码：
class Box extends StatefulWidget{
final color;
Box(this.color);
@override
State<StatefulWidget> createState() {
return _BoxState();
}
}
class _BoxState extends State<Box>{
var count = 0;
@override
Widget build(BuildContext context) {
return Container(
margin: const EdgeInsets.only(top: 30),
alignment: AlignmentDirectional.center,
child: RawMaterialButton(
onPressed: () {
setState(() {
count++;
});
},
child: Text("$count",textAlign: TextAlign.center,style: const TextStyle(fontSize: 50,color: Colors.white),),
constraints: const BoxConstraints(minWidth: 80,minHeight: 80),
fillColor: widget.color,
)
);
}
}
很显然，box是一个statefulWidget，或根据传进来的color来改变自身的颜色，而它内部也有一个点击事件，用来改变state缓存的count变量，每次点击加一。运行效果如下图：
将第一个box点击几下使之变成5，运行效果如下图：
此时，如果我们把body里面的三个box最上面的一个去掉
body: Center(
child:Column(children: [
// Box(Colors.red),
Box(Colors.red),
Box(Colors.orange),
],)
),
得到的效果应该是并列的两个box，上面的为红色，下面为橙色，且两个数字都为0，但实际热更新编译的效果却是上面一个的红色box数字是5，下面的橙色box数字为0。如下图：
为啥会这样呢？
我们知道，flutter的ui渲染包含widget，element和renderObject，widget作为配置信息比较轻量级，每一帧渲染的时候就会有一个新的widget对象产生，而element和renderObject却只有在widget类型发生改变或者所持有的key不一致时才会进行重建。
static bool canUpdate(Widget oldWidget, Widget newWidget) {
return oldWidget.runtimeType == newWidget.runtimeType
&& oldWidget.key == newWidget.key;
}
因此，就可以有下一张图：
当box1被删除后，box2顶了上来。实际上只是box的widget发生了变化，由box1的widget替换成了box2的widget，而element依然还是box1的element，因此该element里面的state并没有发生变化，state里面缓存的值也没有发生改变。对应的，renderObject也没有改变。
同样的，box3也是widget由box2替换成了box3的，element依然还是box2的，因为widget变化了，相应的颜色也变化了，所以渲染之后的效果就变成了橙色的。而state里面的值依然还是0。
box3下面没有元素了，所以对应的widget和element都变成了null，因此原来的box3的element和renderObject直接从各自的树上移除掉。
说了这么多，依然还只是引子，那么，假如将box1移除后我们想要得到的效果是box2和box3直接上移，它们的颜色和值都不改变，应该怎么做呢？
答案就是使用key。
key
key我们可以理解为每个控件所独有的一个ID，用以识别是哪个UI。有了key，element和renderObject就会被强行重建，从而得到所见即所得的效果。
key可以分为LocalKey和GlobalKey，字面上理解就是局部key和全局key。
具体分类如下：
LocalKey
LocalKey 直接继承至 Key，它应用于拥有相同父 Element 的小部件进行比较的情况，也就是上述例子中，有一个多子 Widget 中需要对它的子 widget 进行移动处理，这时候你应该使用Localkey。它也是我们日常用到的比较多的key。
Localkey 派生出了许多子类 key：
-ValueKey : ValueKey(‘String’)
-ObjectKey : ObjectKey(Object)
-UniqueKey : UniqueKey()
- Valuekey 又派生出了 PageStorageKey : PageStorageKey(‘value’)
如果是statelessWidget，那么就没必要使用key了，因为每一帧widget都会重建；而statefulWidget由于使用了state，state当中通常会缓存很多需要在UI上展示的变量，它不会时常重建，所以就需要使用key来强制改变。
ValueKey
可以传入任何对象，比较的时候会对比它的内容是否一致。
@override
bool operator ==(Object other) {
if (other.runtimeType != runtimeType)
return false;
return other is ValueKey<T>
&& other.value == value;
}
ObjectKey
可以传入任何参数，比较的时候会比较它的指针是否一致，即是否为同一个对象。
@override
bool operator ==(Object other) {
if (other.runtimeType != runtimeType)
return false;
return other is ObjectKey
&& identical(other.value, value);
}
UniqueKey
不需要传任何参数，每次刷新都会生成一个新的值，通常用于动画的过渡当中。比如：
AnimatedSwitcher(
duration: const Duration(seconds: 1),
child: Text("no keyrrths", key: UniqueKey()),
)
每次改变文字时，假如不传uniqueKey，就不会有动画的渐变效果，而如果传了UniqueKey，则会有渐变动画效果。因为不传uniqueKey时，每次都只会认为text的widget发生了变化，只会将text的widget给替换为新的widget，而element还是同一个不会变化，所以会认为UI没有发生变化，因此不会改变；而如果传了uniqueKey时，每次widget比较时都会因为自身的key不一致而被认为是不同的widget，导致会重建element和renderObject，前后两个UI不一致，此时就会发生动画效果。
GlobalKey
全局变量，顾名思义，整个应用程序里都是唯一的，所以同一个globalKey只能作用在一个widget上。可以通过globalKey拿到所对应的state和element或者widget，用以改变state的状态或者变量值，以及刷新UI。不过不推荐这样做，一般推荐通过控制外面的变量来刷新UI。
floatingActionButton: FloatingActionButton(
onPressed: (){
var state = (_globalKey as BoxState);
state.count++;
state.setState(() {
});
},
child: const Icon(Icons.add),
),
（注意，这里带下划线的变量为私有变量，文件外部引用不到）
滑块游戏
接下来使用ReorderableListView来做一个滑块的小游戏。
主要包含两个文件：main.dart和move_game.dart(发现假如使用大写命名dart文件就会报一堆波浪线警告)
main.dart
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
MyApp({Key? key}) : super(key: key);
final _globalKey = GlobalKey();
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(
appBar: AppBar(
title: const Text("key demon"),
),
body: Center(
child: MoveGameWidget(key:_globalKey),
),
floatingActionButton: FloatingActionButton(
onPressed: () {
changeMoveGameStateByGlobalKey();
},
child: const Icon(Icons.add),
),
),
);
}
changeMoveGameStateByGlobalKey(){
var state = _globalKey.currentState as MoveGameState;
state.shuffle();
state.setState(() {
});
}
}
move_game.dart
class MoveGameWidget extends StatefulWidget{
const MoveGameWidget({Key? key}) : super(key: key);
@override
State<StatefulWidget> createState() {
return MoveGameState();
}
}
class MoveGameState extends State<MoveGameWidget> {
final boxes = [Box2(Colors.blue.shade100, "100",key: UniqueKey()),
Box2(Colors.blue.shade200, "200",key: UniqueKey()),
Box2(Colors.blue.shade300, "300",key: UniqueKey()),
Box2(Colors.blue.shade400, "400",key: UniqueKey()),
Box2(Colors.blue.shade500, "500",key: UniqueKey()),
Box2(Colors.blue.shade600, "600",key: UniqueKey()),
Box2(Colors.blue.shade700, "700",key: UniqueKey()),];
@override
void initState() => shuffle();
shuffle(){
boxes.shuffle();
}
@override
Widget build(BuildContext context) {
return ReorderableListView(
onReorder: (int oldIndex, int newIndex) {
print("oldIndex ="+oldIndex.toString()+",newIndex ="+newIndex.toString());
var tmp = boxes.removeAt(oldIndex);
boxes.insert(newIndex, tmp);
},
children:boxes);
}
}
class Box2 extends StatelessWidget {
final Color color;
final String tag;
const Box2(this.color, this.tag,{Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Container(
color: color,
width: 40,
height: 50,
alignment: Alignment.center,
margin: const EdgeInsets.all(10),
child: Text(tag,textAlign: TextAlign.center,style: const TextStyle(fontSize: 30,color: Colors.deepOrange),),
);
}
}
效果如下：
短短几十行代码就实现了色块的滑动插入功能。每个色块长按都可以滑动到指定位置，初始化的时候会调用shuffle函数将数组顺序打乱，按照数字顺序排好之后，点击加号按钮又会将顺序打乱，则又可以继续移动滑块了。
这里有两个地方用到了key，一个是点加号刷新的时候，会通过globalKey找到moveGameWidget的state从而进行数组重排；另外一个就是每个色块都拥有一个单独的uniqueKey，每次刷新都与之前不同，所以会进行element重建，从而形成过渡动画。
