Key

StatefulWidget

Android Studio中经常会使用stful这样一个快捷输入方式来创建一个Widget,其默认实现如下:

  1. class KeyDemo extends StatefulWidget {
  2. const KeyDemo({Key? key}) : super(key: key);
  3. @override
  4. _KeyDemoState createState() => _KeyDemoState();
  5. }
  6. class _KeyDemoState extends State<KeyDemo> {
  7. @override
  8. Widget build(BuildContext context) {
  9. return Container();
  10. }
  11. }

我们在之前的使用这样的Widget的时候,没有去关心过const KeyDemo({Key? key}) : super(key: key);这行代码究竟有何意义,有时候我们甚至直接将其删除,也没有引起任何开发或者布局问题;那么这行代码究竟有什么用处呢?

我们可以看到,它其实是一个构造函数,默认传递了一个Key的参数,从源码中我们也可以看到所有的Widget都有这个Key
image.png

Key为空安全的,可用可不用;

我们将代码修改如下:
image.png
KeyDemo中添加三个随机颜色WidgetItem,点击悬浮按钮是,删除三个WidgetItem中的第一个,我们可以查看一下,运行效果:
iShot2021-12-08 11.44.02.gif
我们这个时候发现结果跟我们的预期并不一样:删除之后的颜色块和文字没有对上;

文字每一次删除的是第一个,而颜色块每次删除的确实最后一个

StatelessWidget

接下来,我们将上述代码中WidgetItemStatefulWidget修改为StatelessWidget,然后在运行看一下结果:
iShot2021-12-09 09.27.20.gif
我们发现此时,运行效果与我们预期相一致,每次都删除第一个WidgetItem

那么,为什么当我们使用StatefulWidget的时候结果会有偏差,而使用StatelessWidget结果就正常了呢?那么是不是我们就不能使用StatefulWidget来实现这样的效果了呢?

当然不是,我们依然可以使用StatefulWidget来实现一模一样的效果,这个时候我们就需要使用WidgetKey属性了,我们使用继承自StatefulWidgetWidgetItem,并将其构造方法传值修改如下:
iShot2021-12-09 09.37.06.gif
WidgetItem的构造函数中给key属性赋值(key属性值不能重复),结果就和我们预期结果一直;

我们会有疑惑,为什么加了key结果就发生了改变呢?我们注意到,此种情况发生在StatefulWidget上,而StatelessWidget却没有,那么StatefulWidgetStatelessWidget究竟有什么不一样呢?

接下来我们比较一下,继承自StatefulWidgetWidgetItem和继承自StatelessWidgetWidgetItem有何区别?

  • 继承自StatefulWidgetWidgetItem: ```dart class WidgetItem extends StatefulWidget { final String title; const WidgetItem(this.title, {Key? key}) : super(key: key);

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

class _WidgetItemState extends State {

final randomColor = Color.fromRGBO( Random().nextInt(256), Random().nextInt(256), Random().nextInt(256), 1 );

@override Widget build(BuildContext context) { return Container( width: 100, height: 100, color: randomColor, child: Text(widget.title), ); } }

  1. - 继承自`StatelessWidget``WidgetItem`:
  2. ```dart
  3. class WidgetItem extends StatelessWidget {
  4. final String title;
  5. WidgetItem(this.title, {Key? key}) : super(key: key);
  6. final randomColor = Color.fromRGBO(
  7. Random().nextInt(256),
  8. Random().nextInt(256),
  9. Random().nextInt(256),
  10. 1
  11. );
  12. @override
  13. Widget build(BuildContext context) {
  14. return Container(
  15. width: 100,
  16. height: 100,
  17. color: randomColor,
  18. child: Text(title),
  19. );
  20. }
  21. }

我们发现两个WidgetItemrandomColor的所属不同,在StatelessWidgetrandomColor属于当前Widget,而在StatefulWidgetrandomColor属于当前WidgetState,那么是不是把randomColorState中放进Widget中就可以了呢?

我们修改代码如下,查看运行结果:
iShot2021-12-09 09.53.17.gif
此时我们发现,将randomColor的位置改变之后,即使我们不使用key属性,也达到了同样的效果;

那么究竟是什么原因倒是这样的情况呢?从我们错误的效果中,可以分析到这样的情况:

  • ["第一个","第二个","第三个"]这数组中的第一个元素确实被删除了,然后剩余两个元素
  • 三个颜色块并没有被删除,因为只剩下两个元素,所以最后一个颜色块没有显示出来

    Widget被删除了,而State没有被删除;

我们来验证一下,我们将randomColor重新放回State中,然后在删除第一个元素的时候,再添加第四个元素(不使用Key属性),我们看如下代码及结果:
iShot2021-12-09 10.04.04.gif
结果和我们预测的一模一样,数组元素也就是Widget被删除了,但是颜色块依然存在,并没有被删除;

此时,我们也可以通过Debbug模式断点,可以确定StatefulWidgetcreateElement()方法并没有执行,也就是我们再删除一个Widget之后,立刻添加一个新的Widget,但是Element并没有重新创建;

这是什么原因引起的呢?我们从Widget的源码中可以看到这样一个方法的实现:

  1. /// Whether the `newWidget` can be used to update an [Element] that currently
  2. /// has the `oldWidget` as its configuration.
  3. ///
  4. /// An element that uses a given widget as its configuration can be updated to
  5. /// use another widget as its configuration if, and only if, the two widgets
  6. /// have [runtimeType] and [key] properties that are [operator==].
  7. ///
  8. /// If the widgets have no key (their key is null), then they are considered a
  9. /// match if they have the same type, even if their children are completely
  10. /// different.
  11. static bool canUpdate(Widget oldWidget, Widget newWidget) {
  12. return oldWidget.runtimeType == newWidget.runtimeType
  13. && oldWidget.key == newWidget.key;
  14. }

该方法有什么作用呢?我们之前已经讲过Flutter之所以渲染效率高,是因为Flutter采用的是增量渲染的机制,那么如何判断一个Widget应该被更新重新渲染呢?就是用过此方法进行判断;
image.png
Debug的结果和注释中我们可以看到,oldWidgetnewWidgetruntimeType是一直的,而前后两个Widgetkey属性都为null,所以他们匹配成功,可以使用newWidget来更新oldWidgetElement

流程分析

其大致流程如下:

  • 第一步:我们的页面运行起来的时候,当Widget树被创建(下图左侧),同时Element树也会被创建(下图右侧):

image.png

  • 第二步:删除第一个Widget之后,在判断是否需要更新时canUpdate,因为第一个Widget已经不存在,那么就是使用第一个Element去判断第二个Widget是否可更新,同样的,拿第二个Element去判断第三个Widget是否可更新,因为WidgetruntimeType一直并且key为空,所以将会返回true,允许更新:

image.png

因为我们的颜色randomColor是保存在了State中,而State是保存在Element中的(StatefulElement的构造方法中会调用widget.createState方法);所以导致文字改变了,而颜色没有改变的情况出现;