参考：https://www.jianshu.com/p/6e704112dc67
概览
在Flutter中，大概大家都知道如何更新界面视图: 通过修改State去触发Widget重建，触发和更新的操作是Flutter框架做的。 但是有时即使修改了State，Flutter框架好像也没有触发Widget重建，
其中就隐含了Flutter框架内部的更新机制，在某些情况下需要结合使用Key，才能触发真正的“重建”。
下面将从 3 个方面 (When, Where, Which) 说明如何在合理的时间和地点使用合理的 Key。
When: 什么时候该使用Key
实战例子
需求: 点击界面上一个按钮，然后交换行中的两个色块。
StatelessWidget 实现
使用StatelessWidget(StatelessColorfulTile) 做child(tiles):
classPositionedTilesextendsStatefulWidget{@overrideState
当点击按钮时，更新PositionedTilesState中储存的tiles:
voidswapTiles(){setState((){tiles.insert(1,tiles.removeAt(0));});}}
classStatelessColorfulTileextendsStatelessWidget{finalColor color=UniqueColorGenaretor.getColor();StatelessColorfulTile({Key key}):super(key:key);@overrideWidgetbuild(BuildContext context)=>buildColorfulTile(color);}
结果
PositionedTiles
成功实现需求_
StatefulWidget 实现
使用StatefulWidget(StatefulColorfulTile) 做child(tiles):
classStatefulColorfulTileextendsStatefulWidget{StatefulColorfulTile({Key key}):super(key:key);@overrideState
修改外部容器PositionedTiles中tiles:
@overridevoidinitState(){super.initState();tiles=[StatefulColorfulTile(),StatefulColorfulTile(),];}
结果
PositionedTiles
貌似没效果 -_-
为什么使用StatefulWidget就不能成功更新呢？ 需要先了解下面的内容。
Fluuter 对 Widget 的更新原理
在 Flutter 框架中，视图维持在树的结构中，我们编写的 Widget 一个嵌套一个，最终组合为一个 Tree。
StatelessWidget
在第一种使用StatelessWidget的实现中，当 Flutter 渲染这些 Widgets 时，RowWidget 为它的子 Widget 提供了一组有序的插槽。对于每一个 Widget，Flutter 都会构建一个对应的Element。构建的这个ElementTree 相当简单，仅保存有关每个Widget类型的信息以及对子Widget的引用。你可以将这个ElementTree 当做就像你的 Flutter App 的骨架。它展示了 App 的结构，但其他信息需要通过引用原始Widget来查找。
StatelessWidget Tree & Element Tree"
当我们交换行中的两个色块时，Flutter 遍历Widget树，看看骨架结构是否相同。它从RowWidget 开始，然后移动到它的子 Widget，Element 树检查 Widget 是否与旧 Widget 是相同类型和Key。 如果都相同的话，它会更新对新 widget 的引用。在我们这里，Widget 没有设置 Key，所以Flutter只是检查类型。它对第二个孩子做同样的事情。所以 Element 树将根据 Widget 树进行对应的更新。
swap之后
当 Element Tree 更新完成后，Flutter 将根据 Element Tree 构建一个 Render Object Tree，最终开始渲染流程。
类似这样的渲染流程
StatefulWidget
当使用StatefulWidget实现时，控件树的结构也是类似的，只是现在 color 信息没有存储控件自身了，而是在外部的 State 对象中。
StatefulWidget Tree & Element Tree
现在，我们点击按钮，交换控件的次序，Flutter 将遍历 Element 树，检查 Widget 树中Row控件并且更新 Element 树中的引用，然后第一个 Tile 控件检查它对应的控件是否是相同类型，它发现对方是相同的类型; 然后第二个 Tile 控件做相同的事情，最终就导致 Flutter 认为这两个控件都没有发生改变。Flutter 使用 Element 树和它对应的控件的 State 去确定要在设备上显示的内容, 所以 Element 树没有改变，显示的内容也就不会改变。
swap之后
StatefullWidget 结合 Key
现在，为StatefulColorfulTile传递一个Key对象:
voidinitState(){super.initState();tiles=[// 使用 UniqueKeyStatefulColorfulTile(key:UniqueKey()),StatefulColorfulTile(key:UniqueKey()),];}
再次运行:
PositionedTiles
成功 swap!
添加了Key之后的结构:
PositionedTiles
当现在执行 swap 时, Element 数中 StatafulWidget 控件除了比较类型外，还会比较key是否相等:
检查比较
只有类型和key都匹配时，才算找到对应的 Widget。于是在 Widget Tree 发生交换后，Element Tree 中子控件和原始控件对应关系就被打乱了，所以 Flutter 会重建 Element Tree，直到控件们正确对应上。
重建
所以，现在 Element 树正确更新了，最终就会显示交换后的色块。
交换完毕
使用场景
如果要修改集合中的控件的顺序或数量，Key会很有用。
Where: 在哪设置 Key
正常情况下应该在当前 Widget 树的顶级 Widget 中设置。
回到StatefulColorfulTile例子中，为每个色块添加一个Padding，同时key还是设置在相同的地方:
@overridevoidinitState(){super.initState();tiles=[Padding(padding:constEdgeInsets.all(8.0),child:StatefulColorfulTile(key:UniqueKey()),),Padding(padding:constEdgeInsets.all(8.0),child:StatefulColorfulTile(key:UniqueKey()),),];}
交换时
当点击按钮发生交换之后，可以看到两个色块的颜色会随机改变，但是我的预期是两个固定的颜色彼此交换。
为什么产生问题
当Widget 树中两个Padding发生了交换，它们包裹的色块也就发生了交换:
交换
然后 Flutter 将进行检查，以便对 Element 树进行对应的更新: Flutter 的Elemetn to Widget匹配算法将一次只检查树的一个层级:
检查
在第一级，PaddingWidget 都正确匹配。
检查
在第二级，Flutter 注意到 Tile 控件的Key不匹配，就停用该 Tile Element，删除 Widget 和 Element 之间的连接
检查
我们这里使用的Key是UniqueKey， 它是一个LocalKey
LocalKey的意思是: 当 Widget 与 Element 匹配时，Flutter 只在树中特定级别内查找匹配的 Key。因此 Flutter 无法在同级中找到具有该 Key 的 Tile Widget，所以它会创建一个新 Element 并初始化一个新 State。 就是这个原因，造成色块颜色发生随机改变，每次交换相当于生成了两个新的 Widget。
解决这个问题: 将Key设置到上层 WidgetPadding上
当 Widget 树中两个Padding发生交换之后，Flutter 就能根据Padding上Key的变化，更新Element树中的两个Padding，从而实现交换。
@overridevoidinitState(){super.initState();tiles=[Padding(key:UniqueKey(),padding:constEdgeInsets.all(8.0),child:StatefulColorfulTile(),),Padding(key:UniqueKey(),padding:constEdgeInsets.all(8.0),child:StatefulColorfulTile(),),];}
根据 Padding Key
Which: 该使用哪种类型的 Key
Key的目的在于为每个 Widget 指明一个唯一的身份，使用何种Key就要依具体的使用场景决定。
ValueKey
例如在一个ToDo列表应用中，每个TodoItem 的文本是恒定且唯一的。这种情况，适合使用ValueKey，value 是文本。
ObjectKey
假设，每个子 Widget 都存储了一个更复杂的数据组合，比如一个用户信息的地址簿应用。任何单个字段（如名字或生日）可能与另一个条目相同，但每个数据组合是唯一的。在这种情况下，ObjectKey最合适。
UniqueKey
如果集合中有多个具有相同值的 Widget，或者如果您想确保每个 Widget 与其他 Widget 不同，则可以使用UniqueKey。 在我们的例子中就使用了UniqueKey，因为我们没有将任何其他常量数据存储在我们的色块上，并且在构建 Widget 之前我们不知道颜色是什么。
不要在Key中使用随机数，如果你那样设置，那么当每次构建 Widget 时，都会生成一个新的随机数，Element 树将不会和 Widget 树做一致的更新。
GlobalKeys
Global Keys有两种用途。
它们允许 Widget 在应用中的任何位置更改父级而不会丢失 State ，或者可以使用它们在 Widget 树 的完全不同的部分中访问有关另一个 Widget 的信息。
比如: 要在两个不同的屏幕上显示相同的 Widget，同时保持相同的 State，则需要使用 GlobalKeys。
复用 Widget
在第二种情况下，您可能希望验证密码，但不希望与树中的其他 Widget 共享该状态信息，可以使用GlobalKey
其实 GlobalKeys 看起来有点像全局变量。有也其他更好的方法达到 GlobalKeys 的作用，比如 InheritedWidget、Redux 或 Block Pattern。
总结
如何合理适当的使用Key:
When: 当您想要保留 Widget 树的状态时，请使用Key。例如: 当修改相同类型的 Widget 集合（如列表中）时
Where: 将Key设置在要指明唯一身份的 Widget 树的顶部
Which: 根据在该 Widget 中存储的数据类型选择使用的不同类型的Key
作者：stefanJi
链接：https://www.jianshu.com/p/6e704112dc67
来源：
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。