【Flutter 专题】100 何为 Flutter Widgets ?
和尚学习 Flutter 有一段时间了,其中 Flutter 的核心思想是 Everything is Widget;但是什么是 Widget 它与我们常说的 Element 和 RenderObject 有什么关系呢,和尚就个人理解简单整理一下;
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 是该树上的一个对象;
- Widget 描述了 Element 的配置,只是用来保存属性的容器;
- createElement() 用来生成一个 Element 对象并添加到 Widget 树中;
- toStringShort() 是对该 Widget 的简短说明,包括 Widget 类型和对应的 Key 等;
- canUpdate() 用来判断当前 Widget 是否重建,当两个新旧 runtimeType 和 key 相同时则更新 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 生命周期进行维护;
- created 对象创建,在 initState() 生命周期时执行;
- initialized 对象初始化,在 didChangeDependencies() 过程中执行;initState() 只是创建了 State 对象但是未初始化完成;
- ready 对象准备好且 dispose() 方法未执行;
- defunct 对象销毁,在 dispose() 执行时进行销毁;
2. ProxyWidget
ProxyWidget 作为一个抽象的代理 Widget 并没有实质性的作用,只是在父类和子类需要传递信息时使用;主要有 InheritedWidget 和 ParentDataWidget 两类;
abstract class ProxyWidget extends Widget {
const ProxyWidget({ Key key, @required this.child }) : super(key: key);
final Widget child;
}
使用过 Bloc 或 Provider 等状态管理的朋友都了解过 InheritedWidget,主要都是对 InheritedWidget 的优化和封装;可以在树结构中传递信息,当使用 InheritedWidget 时,子类状态变更时可以通知父类进行对应的变更;和尚简单理解为数据上移;
而 ParentDataWidget 与 InheritedWidget 作用方向相反,用于为具有多个子类的 RenderObjectWidget 提供对于的配置等,例如 Stack 使用已定位好的父类 Widget 来定位每个子 Widget;和尚简单理解为数据下移;
InheritedWidget 和 ParentDataWidget 涉及内容较多,和尚暂不做深入研究;
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 是在 RenderObject 在 Render Tree 中删除时调用;
Key / GlobalKey
Key 可以用来控制在 Widget 重建时是否与其他 Widget 匹配,只有 Key 和 runtimeType 同时一致才会认为是同一个 Widget;Key 在构建相同类型 Widget 的多个实例时很有用,例如 List 列表中多个相同类型的 item,可以提高列表效率;
GlobalKey 可以作为应用全局唯一标识,在整个 Widget 层级中都是唯一的,可以使用 GlobalKey 来检索与 Widget 关联的状态;
Widget 与 Element 和 RenderObject 都是密不可分的,之后进一步学习 Element 和 RenderObject;和尚对底层的研究还不够深入;如有错误,请多多指导!
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Python+selenium 自动化-selenium自带的截图功能
- PyQt5 技巧篇-便于文字排版的等宽字体推荐,中文为英文两倍宽字体
- php List()函数及json_encode时无法转为数组的问题
- Python 技术篇-邮件发送并展示本地图片
- PHP变量传递值的方法
- Python 技术篇-邮件发送各种类型的附件
- PHP循环语句
- Markdown简易教程
- 【剑指Offer】表示数值的字符串
- JetBrains 集成开发环境常用插件-快捷键-内存优化
- Hugo Travis
- hugo-站点变量
- hugo-页面变量
- 将hexo文章头转为hugo格式
- python 技术篇-使用pytesseract库进行图像识别之环境配置