Flutter：key的作用原理（LocalKey ，GlobalKey）

第一段代码实现的内容：创建了3个块，随机3个颜色，每次点击按钮时，把第一个块删除

1. import 'dart:math';
2. import 'package:flutter/material.dart';
3. import 'package:flutter_one/demo.dart';
5. void main() {
6.   runApp(const App());
7. }
9. class App extends StatelessWidget {
10.   const App({Key? key}) : super(key: key);
11.   @override
12.   Widget build(BuildContext context) {
13.     return const MaterialApp(
14.       home: KeyDemo(),
15.     );
16.   }
17. }
19. class KeyDemo extends StatefulWidget {
20.   const KeyDemo({Key? key}) : super(key: key);
21.   @override
22.   State<KeyDemo> createState() => _KeyDemoState();
23. }
25. class _KeyDemoState extends State<KeyDemo> {
26.   // 生成三个无状态的块
27.   List<Widget> items = [
28.     StlItem('1'),
29.     StlItem('2'),
30.     StlItem('3')
31.   ];
33.   @override
34.   Widget build(BuildContext context) {
35.     return Scaffold(
36.       appBar: AppBar(
37.         title: const Text('KeyDemo'),
38.         centerTitle: true,
39.       ),
40.       body: Row(
41.         mainAxisAlignment: MainAxisAlignment.center,
42.         children: items,
43.       ),
44.       floatingActionButton: FloatingActionButton(
45.         child: Icon(Icons.add),
46.         onPressed: (){
47.           setState(() {
48.             items.removeAt(0); // 点击按钮把第一个删除
49.           });
50.         }
51.       ),
52.     );
53.   }
54. }

复制代码

  先调用无状态的StatelessWidget ，当删除发生时看看效果

1. class StlItem extends StatelessWidget {
2.   final String title;
3.   StlItem(this.title,{Key? key}) : super(key: key);
5.   // 随机的颜色
6.   final color = Color.fromRGBO(Random().nextInt(256), Random().nextInt(256), Random().nextInt(256), 1.0);
8.   @override
9.   Widget build(BuildContext context) {
10.     return Container(
11.       width: 100,
12.       height: 100,
13.       child: Text(title),
14.       color: color,
15.     );
16.   }
17. }

复制代码

发生删除时：

删除后

总结发现，如果是无状态的StatelessWidget 纵然不传key：StlItem(this.title,{Key? key}) : super(key: key);
也能正常删除。
   下面看下有状态的StatelessWidget，不传key会出现什么BUG

1. // 第一段代码中：生成三个有状态的块
2. List<Widget> items = [
3.   StfulItem('1'),
4.   StfulItem('2'),
5.   StfulItem('3')
6. ];
8. // 有状态
9. class StfulItem extends StatefulWidget {
10.   final String title;
11.   StfulItem(this.title,{Key? key}) : super(key: key);
12.   @override
13.   State<StfulItem> createState() => _StfulItemState();
14. }
16. class _StfulItemState extends State<StfulItem> {
17.   // 随机的颜色
18.   final color = Color.fromRGBO(Random().nextInt(256), Random().nextInt(256), Random().nextInt(256), 1.0);
19.   @override
20.   Widget build(BuildContext context) {
21.     return Container(
22.       width: 100,
23.       height: 100,
24.       child: Text(widget.title),
25.       color: color,
26.     );
27.   }
28. }

复制代码

删除前

删除后

发现问题了：我删除的是第一条数据，发现笔墨1正常删除，但是颜色怎么是把颜色3给删除了呢？？
源码中，StatelessWidget和StatefulWidget都继续Widget

1. abstract class StatefulWidget extends Widget{}

复制代码

而在Widget中有如许一个方法，Flutter的增量渲染就是通过canUpdate来判定哪里需要更新数据。

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

复制代码

  Flutter中的3棵树中，Widget树和Element树
  每创建一个Widget，都会有对应的Element

当删除第一个Widget，Element就会调用canUpdate更新数据，Element是按顺序判定，它会拿Element111和删除后的Widget222进行对比
oldWidget.runtimeType == newWidget.runtimeType 旧的部件类型和新的部件类型是一样的，oldWidget.key == newWidget.key;旧的没有传key和新的也没传key，效果那就是true，增量渲染发现可以复用，Element111就指向了Widget222
最后对比到Element333，发现Widget树中已经没有了，Element333就被删除了。
那么颜色为什么会错了，由于颜色是生存在State中，State是生存在Element中，所以最后一个颜色canUpdate时被删除了。

   加上key之后办理这个BUG

1. List<Widget> items = [
2.   StfulItem('1',key: const ValueKey('1'),),
3.   StfulItem('2',key: const ValueKey('2'),),
4.   StfulItem('3',key: const ValueKey('3'),)
5. ];

复制代码

  key的原理

1. Key本身是一个抽象类，有一个工厂构造方法，创建ValueKey
2. 直接子类主要有：LocalKey 和 GlobalKey
4. GlobalKey：帮助我们访问某个Widget的信息
7. LocalKey ：它用来区别哪个Element保留，哪个Element要删除
8.         ValueKey 以值作为参数（数字、字符串）
9.         ObjectKey：以对象作为参数
10.         UniqueKey：创建唯一标识

复制代码

  GlobalKey利用

1. import 'package:flutter/material.dart';
2. class GlobalKeyDemo extends StatelessWidget {
3.   // 定义：GlobalKey<拿谁的数据> 变量 = GlobalKey();
4.   final GlobalKey<_childPageState> _globalKey = GlobalKey();
5.   GlobalKeyDemo({Key? key}) : super(key: key);
7.   @override
8.   Widget build(BuildContext context) {
9.     return Scaffold(
10.       appBar: AppBar(
11.         title: const Text('GlobalKeyDemo'),
12.       ),
13.       body: childPage(
14.         key: _globalKey,
15.       ),
16.       floatingActionButton: FloatingActionButton(onPressed: (){
17.               // _globalKey  就能访问到 _childPageState 中的属性，进行修改
18.         _globalKey.currentState!.setState((){
19.           _globalKey.currentState!.data = 'hello word';
20.           _globalKey.currentState!.count++;
21.         });
22.       },
23.       child: const Icon(Icons.add),),
24.     );
25.   }
26. }
28. class childPage extends StatefulWidget {
29.   const childPage({Key? key}):super(key: key);
31.   @override
32.   State<childPage> createState() => _childPageState();
33. }
35. class _childPageState extends State<childPage> {
36.   int count = 0;
37.   String data = 'heelo';
38.   @override
39.   Widget build(BuildContext context) {
40.     return Column(
41.       children: [
42.         Text(count.toString()),
43.         Text(data),
44.       ],
45.     );
46.   }
47. }

复制代码

除了定义GlobalKey外，还可以利用InheritedWidget数据共享。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。