「这是我参加2022首次更文应战的第4天,活动概况检查:2022首次更文应战」

Key

StatefulWidget

Android Studio中经常会运用stful这样一个快捷输入办法来创立一个Widget,其默许完成如下:

class KeyDemo extends StatefulWidget {
  const KeyDemo({Key? key}) : super(key: key);
  @override
  _KeyDemoState createState() => _KeyDemoState();
}
class _KeyDemoState extends State<KeyDemo> {
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

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

咱们能够看到,它其实是一个结构函数,默许传递了一个Key的参数,从源码中咱们也能够看到所有的Widget都有这个Key

Flutter(三十六)-Key的作用

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

咱们来看这样一个示例,代码如下:

Flutter(三十六)-Key的作用

KeyDemo中增加三个随机色彩WidgetItem,点击悬浮按钮是,删去三个WidgetItem中的第一个,咱们能够检查一下,运转作用:

Flutter(三十六)-Key的作用

咱们这个时分发现成果跟咱们的预期并不一样:删去之后的色彩块和文字没有对上;

文字每一次删去的是第一个,而色彩块每次删去的确实最终一个

StatelessWidget

接下来,咱们将上述代码中WidgetItemStatefulWidget修正为StatelessWidget,然后在运转看一下成果:

Flutter(三十六)-Key的作用

咱们发现此刻,运转作用与咱们预期相一致,每次都删去第一个WidgetItem

那么,为什么当咱们运用StatefulWidget的时分成果会有偏差,而运用StatelessWidget成果就正常了呢?那么是不是咱们就不能运用StatefulWidget来完成这样的作用了呢?

当然不是,咱们仍然能够运用StatefulWidget来完成如出一辙的作用,这个时分咱们就需求运用WidgetKey特点了,咱们运用承继自StatefulWidgetWidgetItem,并将其结构办法传值修正如下:

Flutter(三十六)-Key的作用

WidgetItem的结构函数中给key特点赋值(key特点值不能重复),成果就和咱们预期成果一向;

咱们会有疑惑,为什么加了key成果就发生了改动呢?咱们注意到,此种状况发生在StatefulWidget上,而StatelessWidget却没有,那么StatefulWidgetStatelessWidget终究有什么不一样呢?

接下来咱们比较一下,承继自StatefulWidgetWidgetItem和承继自StatelessWidgetWidgetItem有何差异?

  • 承继自StatefulWidgetWidgetItem
class WidgetItem extends StatefulWidget {
  final String title;
  const WidgetItem(this.title, {Key? key}) : super(key: key);
  @override
  _WidgetItemState createState() => _WidgetItemState();
}
class _WidgetItemState extends State<WidgetItem> {
  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),
    );
  }
}
  • 承继自StatelessWidgetWidgetItem:
class WidgetItem extends StatelessWidget {
  final String title;
  WidgetItem(this.title, {Key? key}) : super(key: key);
  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(title),
    );
  }
}

咱们发现两个WidgetItemrandomColor的所属不同,在StatelessWidgetrandomColor归于当时Widget,而在StatefulWidgetrandomColor归于当时WidgetState,那么是不是把randomColorState中放进Widget中就能够了呢?

咱们修正代码如下,检查运转成果:

Flutter(三十六)-Key的作用

此刻咱们发现,将randomColor的位置改动之后,即便咱们不运用key特点,也达到了相同的作用;

那么终究是什么原因倒是这样的状况呢?从咱们过错的作用中,能够剖析到这样的状况:

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

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

咱们来验证一下,咱们将randomColor重新放回State中,然后在删去第一个元素的时分,再增加第四个元素(不运用Key特点),咱们看如下代码及成果:

Flutter(三十六)-Key的作用

成果和咱们猜测的如出一辙,数组元素也便是Widget被删去了,但是色彩块仍然存在,并没有被删去;

此刻,咱们也能够经过Debbug模式断点,能够确定StatefulWidgetcreateElement()办法并没有履行,也便是咱们再删去一个Widget之后,马上增加一个新的Widget,但是Element并没有重新创立;

这是什么原因引起的呢?咱们从Widget的源码中能够看到这样一个办法的完成:

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

该办法有什么作用呢?咱们之前已经讲过Flutter之所以渲染效率高,是由于Flutter采用的是增量渲染的机制,那么如何判别一个Widget应该被更新重新渲染呢?便是用过此办法进行判别;

Flutter(三十六)-Key的作用

Debug的成果和注释中咱们能够看到,oldWidgetnewWidgetruntimeType是一向的,而前后两个Widgetkey特点都为null,所以他们匹配成功,能够运用newWidget来更新oldWidgetElement

流程剖析

其大致流程如下:

  • 第一步:咱们的页面运转起来的时分,当Widget树被创立(下图左边),一起Element树也会被创立(下图右侧):

Flutter(三十六)-Key的作用

  • 第二步:删去第一个Widget之后,在判别是否需求更新时canUpdate,由于第一个Widget已经不存在,那么便是运用第一个Element去判别第二个Widget是否可更新,相同的,拿第二个Element去判别第三个Widget是否可更新,由于WidgetruntimeType一向并且key为空,所以将会返回true,允许更新:

Flutter(三十六)-Key的作用

由于咱们的色彩randomColor是保存在了State中,而State是保存在Element中的(StatefulElement的结构办法中会调用widget.createState办法);所以导致文字改动了,而色彩没有改动的状况出现;