写点什么

【Flutter 专题】100 何为 Flutter Widgets ?

发布于: 2 小时前
【Flutter 专题】100 何为 Flutter Widgets ?

      小菜学习 Flutter 有一段时间了,其中 Flutter 的核心思想是 Everything is Widget;但是什么是 Widget 它与我们常说的 ElementRenderObject 有什么关系呢,小菜就个人理解简单整理一下;

Widget

源码分析

abstract class Widget extends DiagnosticableTree {  const Widget({ this.key });
final Key key;
@protected Element createElement();
@override String toStringShort() { return key == null ? '$runtimeType' : '$runtimeType-$key'; }
@override void debugFillProperties(DiagnosticPropertiesBuilder properties) { super.debugFillProperties(properties); properties.defaultDiagnosticsTreeStyle = DiagnosticsTreeStyle.dense; }
static bool canUpdate(Widget oldWidget, Widget newWidget) { return oldWidget.runtimeType == newWidget.runtimeType && oldWidget.key == newWidget.key; }}
复制代码


      简单分析源码和注释可得,Widget 继承自 DiagnosticableTree 是该树上的一个对象;


  1. Widget 描述了 Element 的配置,只是用来保存属性的容器;

  2. createElement() 用来生成一个 Element 对象并添加到 Widget 树中;

  3. toStringShort() 是对该 Widget 的简短说明,包括 Widget 类型和对应的 Key 等;

  4. canUpdate() 用来判断当前 Widget 是否重建,当两个新旧 runtimeTypekey 相同时则更新 Widget 否则会新建一个 Widget 替代老旧的 Widget

子类 Widget

      Widget 主要有三类子类 Widget;分别是组合类 Widget(StatelessWidget/StatefulWidget)、代理类 Widget(ProxyWidget)、渲染类 Widget(RenderObjectWidget);


1. StatelessWidget / StatefulWidget

      StatelessWidget 是状态不可变的 Widget,主要通过 build() 方法,把一个或多个 Widget 整合成一个新的 Widget;这也完全符合 Flutter 【组合大于继承】的思想;StatelessWidget 的核心方法就是 build() 方法,把多个 Widget 组合包装成一个新的 Widget


abstract class StatelessWidget extends Widget {  const StatelessWidget({ Key key }) : super(key: key);
@override StatelessElement createElement() => StatelessElement(this); @protected Widget build(BuildContext context);}
复制代码


      StatefulWidget 是状态可变的 Widget,而其核心是 State 状态管理;常用的 setState(){} 便是用来更新重构 Widget


abstract class StatefulWidget extends Widget {  const StatefulWidget({ Key key }) : super(key: key);
@override StatefulElement createElement() => StatefulElement(this);
@protected State createState();}
复制代码


      State 用于处理 StatefulWidget 业务逻辑和状态管理,有 _StateLifecycle 生命周期进行维护;


  1. created 对象创建,在 initState() 生命周期时执行;

  2. initialized 对象初始化,在 didChangeDependencies() 过程中执行;initState() 只是创建了 State 对象但是未初始化完成;

  3. ready 对象准备好且 dispose() 方法未执行;

  4. defunct 对象销毁,在 dispose() 执行时进行销毁;

2. ProxyWidget

      ProxyWidget 作为一个抽象的代理 Widget 并没有实质性的作用,只是在父类和子类需要传递信息时使用;主要有 InheritedWidgetParentDataWidget 两类;


abstract class ProxyWidget extends Widget {  const ProxyWidget({ Key key, @required this.child }) : super(key: key);
final Widget child;}
复制代码


      使用过 BlocProvider 等状态管理的朋友都了解过 InheritedWidget,主要都是对 InheritedWidget 的优化和封装;可以在树结构中传递信息,当使用 InheritedWidget 时,子类状态变更时可以通知父类进行对应的变更;小菜简单理解为数据上移;


      而 ParentDataWidgetInheritedWidget 作用方向相反,用于为具有多个子类的 RenderObjectWidget 提供对于的配置等,例如 Stack 使用已定位好的父类 Widget 来定位每个子 Widget;小菜简单理解为数据下移;


      InheritedWidgetParentDataWidget 涉及内容较多,小菜暂不做深入研究;

3. RenderObjectWidget

      RenderObjectWidget 是真正用于绘制渲染 Widget,一切在屏幕上展示的 Widget 根本上都离不开 RenderObjectWidget;它提供了 RenderObjectElement 的创建配置和 RenderObject 渲染对象的规定,提供了应用程序的实际渲染;


abstract class RenderObjectWidget extends Widget {  const RenderObjectWidget({ Key key }) : super(key: key);
@override RenderObjectElement createElement();
@protected RenderObject createRenderObject(BuildContext context);
@protected void updateRenderObject(BuildContext context, covariant RenderObject renderObject) { } @protected void didUnmountRenderObject(covariant RenderObject renderObject) { }}
复制代码


      updateRenderObject 是在 Widget 更新后,修改对应的 RenderObject 对象,在每次更新时都会调用;didUnmountRenderObject 是在 RenderObjectRender Tree 中删除时调用;

Key / GlobalKey

      Key 可以用来控制在 Widget 重建时是否与其他 Widget 匹配,只有 KeyruntimeType 同时一致才会认为是同一个 WidgetKey 在构建相同类型 Widget 的多个实例时很有用,例如 List 列表中多个相同类型的 item,可以提高列表效率;


      GlobalKey 可以作为应用全局唯一标识,在整个 Widget 层级中都是唯一的,可以使用 GlobalKey 来检索与 Widget 关联的状态;




      WidgetElementRenderObject 都是密不可分的,之后进一步学习 ElementRenderObject;小菜对底层的研究还不够深入;如有错误,请多多指导!


来源: 阿策小和尚

发布于: 2 小时前阅读数: 2
用户头像

还未添加个人签名 2021.05.13 加入

Android / Flutter 小菜鸟~

评论

发布
暂无评论
【Flutter 专题】100 何为 Flutter Widgets ?