美文网首页
一、Flutter Widget 的生命周期

一、Flutter Widget 的生命周期

作者: 帅气的阿斌 | 来源:发表于2022-01-21 14:47 被阅读0次
Widget 的生命周期 我自己又按照自己的理解整了下流程
关于构造函数是在父节点build里调用的构造函数实例化的子节点widget,然后父节点调用inflateWidget进入子节点的生命周期
inflateWidget要理解为当前的element为父节点,调用inflateWidget来创建子节点,也就是说父节点的build等流程已经走完(build要初始化子节点实例)

举例:A 的 child 是 B

  Element inflateWidget(Widget newWidget, Object? newSlot) {
    //this为A newWidget则是B,通过Bwidget 创建对应的element
    final Element newChild = newWidget.createElement();
    //新生成的element插入element树中
    newChild.mount(this, newSlot);
    return newChild;
  }

newChild执行该方法 则B element的parent设置为A,_depth做+1操作

  • ComponentElement重写Element的mount方法
    abstract class Element extends DiagnosticableTree implements BuildContext
    _parent = parent;
    _depth = _parent != null ? _parent!.depth + 1 : 1;
继承关系:

abstract class ComponentElement extends Element
class StatelessElement extends ComponentElement
class StatefulElement extends ComponentElement
abstract class RenderObjectElement extends Element

StatelessElement extends ComponentElement
ComponentElement重写Element的mount,触发build(Element可没有build方法)

abstract class ComponentElement extends Element {...
  void mount(Element? parent, Object? newSlot) {
    super.mount(parent, newSlot);
    _firstBuild();
  }
  • StatefulElement重写_firstBuild 方法
    StatefulElement主要是触发initState didChangeDependencies _firstBuild
  void _firstBuild() {
    final Object? debugCheckForReturnedFuture = state.initState() as dynamic;
    state.didChangeDependencies();
    super._firstBuild();

由此可以看出第一次显示时,initState -> didChangeDependencies -> _firstBuild

abstract class RenderObjectElement extends Element重写mount方法

  • ps: inflateWidget~newChild.mount->_firstBuild->rebuild()->performRebuild->updateChild

相关文章

  • Flutter的生命周期

    Flutter 的生命周期分为两个部分: Widget的生命周期 App的生命周期 Flutter里的Widget...

  • Flutter 的生命周期(转载)

    一,概述 Flutter 的生命周期分为两个部分: Widget 的生命周期 App 的生命周期 二,Widget...

  • Flutter 页面生命周期

    Flutter 页面生命周期就是 Flutter 页面组件 Widget 的生命周期。 Flutter 有两种组件...

  • Flutter 的生命周期

    Flutter 的生命周期Flutter 的生命周期分为两个部分: Widget 的生命周期App 的生命周期Fl...

  • Flutter 生命周期

    前提 Flutter 的生命周期分为两个部分: 1.Widget 的生命周期2.App 的生命周期 Widget的...

  • 监听Flutter的生命周期

    监听Flutter的生命周期 要了解Widget,就需要先知道Widget的生命周期。 这里说到的生命周期分为两个...

  • Flutter的生命周期

    Flutter的生命周期 1、widget的生命周期 1.1 StatelessWidget 的生命周期(只有bu...

  • Flutter生命周期及监听状态

    Flutter Widget生命周期分为3个阶段: 1.创建: 构造方法:Flutter通过StatefulWid...

  • flutter学习资源

    一、我的github的flutter中的demo项目,持续更新中。。。 flutter_widget组件生命周期的...

  • [Flutter] 10-Flutter的生命周期

    本章介绍 Flutter 的组件,以及组件的生命周期。 一、组件 Widget定义 Flutter 中的组件与前端...

网友评论

      本文标题:一、Flutter Widget 的生命周期

      本文链接:https://www.haomeiwen.com/subject/zoprhrtx.html