Flutter中的Widget

avatar
奇舞团移动端团队 @奇舞团

级别: ★☆☆☆☆
标签:「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。如果两个widgetruntimeTypekey相同,则表示新的widget将替换旧的widget,并调用Element.update更新Element;否则旧的element将从树中移出,新的element插入树中。 另外,使用GlobalKey作为widgetkey时,允许element在树上移动(changing parent)不会丢失状态。当找到新的widgetruntimeTypekey与之前相同位置的widget不一致,但是在前一帧树中的其他位置有个与旧widget具有相同globalKeywidget,然后将该widgetelement移动到新的位置。

createElement

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

canUpdate

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

具体的关于canUpdate的处理逻辑,如下图。 canUpdate调用逻辑.png

关注我们的途径有:
QiShare(简书)
QiShare(掘金)
QiShare(知乎)
QiShare(GitHub)
QiShare(CocoaChina)
QiShare(StackOverflow)
QiShare(微信公众号)

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) - 类型转换与模式匹配
浅谈编译过程
奇舞团安卓团队——aTaller
奇舞周刊