title: “Flutter中的Key(一)”
comments: true
share: true
toc: true
categories:

Flutter
tags:

Flutter中的Key(一)

本篇主要通过一些实例来深入分析Flutter中的key

简介

通过key.dart中的注释可以看到相关说明

它是 Widgets, Elements and SemanticsNodes 的标识符
当新Widget的Key和Element相关联的当前Widget的Key相等时，才会将Element关联的Widget更新成最新的Widget
具有相同Parent的Elements，key必须唯一
它有两个子类 LocalKey和GlobalKey
推荐 https://www.youtube.com/watch?v=kn0EOS-ZiIc

Flutter中的内部重建机制，有时候需要配合Key的使用才能触发真正的“重建”，key通常在widget的构造函数中，当widget在widget树中移动时，Keys存储对应的state，在实际中，这将能帮助我们存储用户滑动的位置，修改widget集合等等

什么是key

大多数时候我们并不需要key，但是当我们需要对具有某些状态且相同类型的组件进行添加、移除、或者重排序时，那就需要使用key，否则就会遇到一些古怪的问题，看下例子，
点击界面上的一个按钮，然后交换行中的两个色块
**

StatelessWidget 实现

使用 StatelessWidget(StatelessColorfulTile) 做 child(tiles):

class PositionedTiles extends StatefulWidget {
 @override
 State<StatefulWidget> createState() => PositionedTilesState();
}

class PositionedTilesState extends State<PositionedTiles> {
 List<Widget> tiles = [
   StatelessColorfulTile(),
   StatelessColorfulTile(),
 ];

 @override
 Widget build(BuildContext context) {
   return Scaffold(
     body: Row(children: tiles),
     floatingActionButton: FloatingActionButton(
         child: Icon(Icons.sentiment_very_satisfied), onPressed: swapTiles),
   );
 }

 swapTiles() {
   setState(() {
     tiles.insert(1, tiles.removeAt(0));
   });
 }
}

class StatelessColorfulTile extends StatelessWidget {
 Color myColor = UniqueColorGenerator.getColor();
 @override
 Widget build(BuildContext context) {
   return Container(
       color: myColor, child: Padding(padding: EdgeInsets.all(70.0)));
 }
}

StatefulWidget 实现

使用 StatefulWidget(StatefulColorfulTile) 做 child(tiles):

List<Widget> tiles = [
   StatefulColorfulTile(),
   StatefulColorfulTile(),
];

...
class StatefulColorfulTile extends StatefulWidget {
 @override
 ColorfulTileState createState() => ColorfulTileState();
}

class ColorfulTileState extends State<ColorfulTile> {
 Color myColor;

 @override
 void initState() {
   super.initState();
   myColor = UniqueColorGenerator.getColor();
 }

 @override
 Widget build(BuildContext context) {
   return Container(
       color: myColor,
       child: Padding(
         padding: EdgeInsets.all(70.0),
       ));
 }
}

结果点击切换颜色按钮，没有反应了

为了解决这个问题，我们在StatefulColorfulTile widget构造时传入一个UniqueKey

class _ScreenState extends State<Screen> {
  List<Widget> widgets = [
    StatefulContainer(key: UniqueKey(),),
    StatefulContainer(key: UniqueKey(),),
  ];
  ···

然后点击切换按钮，又可以愉快地交换颜色了。

为什么StatelessWidget正常更新，StatefullWidget就更新失效，加了key之后又可以了呢？为了弄清楚这其中发生了什么，我们需要再次弄清楚Flutter中widget的更新原理
在framework.dart中可以看到关于widget的代码

@immutable
abstract class Widget extends DiagnosticableTree {
  const Widget({ this.key });
  final Key key;
  ···
    
  /// 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;
  }
}

由于widget只是一个无法修改的配置，而Element才是真正被修改使用的对象，在前面的文章可以知道，当新的widget到来时将会调用canUpdate方法来确定这个Element是否需要更新,从上面可以看出，canUpdate 对两个（新老） Widget 的 runtimeType 和 key 进行比较，从而判断出当前的 Element 是否需要更新。

StatelessContainer比较

我们并没有传入key，所以只比较两个runtimeType，我们将color定义在widget中，这将使得他们具有不同的runtimeType，因此能够更新element 显示出交换位置的效果

StatefulContainer比较过程

改成stateful之后我们将color的定义放在在State中，Widget并不保存State，真正hold State的引用是Stateful Element，在我们没有给widget设置key之前，将只会比较这两个widget的runtimeType，由于两个widget的属性和方法都相同，canUpdate方法将返回false，在Flutter看来，没有发生变化，因此点击按钮色块并没有交换，当我们给widget一个key以后，canUpdate方法将会比较两个widget的runtimeType以及key，返回true(这里runtimeType相同，key不同),这样就可以正确感知两个widget交换顺序，但是这种比较也是有范围的tu

如何正确设置key

为了提升性能，Flutter的diff算法是有范围的，会对某一个层级的widget进行比较而不是一个个比较，我们把上面的ok的例子再改动一下，将带key的 StatefulContainer 包裹上 Padding 组件，然后点击交换按钮，会发生下面奇怪的现象。点击之后不是交换widget，而是重新创建了！

@override
void initState() {
  super.initState();
  tiles = [
    Padding(
      padding: const EdgeInsets.all(8.0),
      child: StatefulColorfulTile(key: UniqueKey()),
    ),
    Padding(
      padding: const EdgeInsets.all(8.0),
      child: StatefulColorfulTile(key: UniqueKey()),
    ),
  ];
}

对应的widget和Element树如下

为什么会出现这种问题，上面提到，Flutter 的 Elemetn to Widget 匹配算法将一次只检查树的一个层级:，
（1）显然Padding并没有发生本质的变化

（2）于是开始第二层的对比，此时发现元素与组件的Key并不匹配，于是把它设置成不可用状态，但是这里的key是本地key,（Local Key），Flutter并不能找到另一层里面的Key(另外一个Padding Widget中的key)，因此flutter就创建了一个新的

因此为了解决这个问题，我们需要将key放到Row的children这一层

class _ScreenState extends State<Screen> {
  List<Widget> widgets = [
    Padding(
      key: UniqueKey(),
      padding: const EdgeInsets.all(8.0),
      child: StatefulContainer(),
    ),
    Padding(
      key: UniqueKey(),
      padding: const EdgeInsets.all(8.0),
      child: StatefulContainer(),
    ),
  ];

不积跬步，无以至千里；不积小流，无以成江海

Flutter中的Key(一)

简介

什么是key

StatelessWidget 实现

StatefulWidget 实现

如何正确设置key

参考