Flutter中的Widget

级别： ★☆☆☆☆
标签：「Flutter」「Widget 」
作者： 沐灵洛
审校： QiShare团队

---

Widget是什么？

Widget是描述UI元素Element的配置数据；一个Widget可以对应多个Element，即：同一份配置，可生成多个Element；每个Element都会对应一个Widget。

abstract class Widget extends DiagnosticableTree {

  const Widget({ this.key });

  final Key key;

  @protected
  Element createElement();

  ...
  

  static bool canUpdate(Widget oldWidget, Widget newWidget) {
    return oldWidget.runtimeType == newWidget.runtimeType
        && oldWidget.key == newWidget.key;
  }
}

Key

控制一个widget如何替换树中另一个widget。如果两个widget的runtimeType与key相同，则表示新的widget将替换旧的widget，并调用Element.update更新Element；否则旧的element将从树中移出，新的element插入树中。
另外，使用GlobalKey作为widget的key时，允许element在树上移动（changing parent）不会丢失状态。当找到新的widget的runtimeType与key与之前相同位置的widget不一致，但是在前一帧树中的其他位置有个与旧widget具有相同globalKey的widget，然后将该widget的element移动到新的位置。

createElement

给定的widget可以被包含在树中零次或多次。特别是给定的widget可以被放置到树中多次。每次一个widget被放置到树中时，都会注入到一个element中，这意味着widget合并到树中多次也会被多次注入。

canUpdate

新旧两个widget的 runtimeType与key是否相同， 决定一个使用oldWidget作为自己配置的element，是否能够使用newWidget更新它自己。如果两个widget没有key，则认为它们是匹配的，即使children 完全不相同。

具体的关于canUpdate的处理逻辑，如下图。

canUpdate调用逻辑.png

Flutter中的Element（下篇）
Flutter中的Element（上篇）
iOS 解决 [NSURL fileURLWithPath:] 对 # 的编码问题
Xcode 调整导航目录字体大小b
Swift 5.1 (21) - 泛型
Swift 5.1 (20) - 协议
Swift 5.1 (19) - 扩展
Swift 5.1 (18) - 嵌套类型
Swift 5.1 (17) - 类型转换与模式匹配
浅谈编译过程