「这是我参加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

接下来，咱们将上述代码中WidgetItem从StatefulWidget修正为StatelessWidget，然后在运转看一下成果：

Flutter(三十六)-Key的作用

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

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

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

Flutter(三十六)-Key的作用

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

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

接下来咱们比较一下，承继自StatefulWidget的WidgetItem和承继自StatelessWidget的WidgetItem有何差异？

  • 承继自StatefulWidget的WidgetItem：
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),
    );
  }
}
  • 承继自StatelessWidget的WidgetItem:
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),
    );
  }
}

咱们发现两个WidgetItem中randomColor的所属不同，在StatelessWidget中randomColor归于当时Widget，而在StatefulWidget中randomColor归于当时Widget的State，那么是不是把randomColor从State中放进Widget中就能够了呢？

咱们修正代码如下，检查运转成果：

Flutter(三十六)-Key的作用

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

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

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

Widget被删去了，而State没有被删去；

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

Flutter(三十六)-Key的作用

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

此刻，咱们也能够经过Debbug模式断点，能够确定StatefulWidget的createElement()办法并没有履行，也便是咱们再删去一个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的成果和注释中咱们能够看到，oldWidget和newWidget的runtimeType是一向的，而前后两个Widget的key特点都为null，所以他们匹配成功，能够运用newWidget来更新oldWidget的Element；

流程剖析

其大致流程如下：

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

Flutter(三十六)-Key的作用

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

Flutter(三十六)-Key的作用

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