共计 1723 个字符,预计需要花费 5 分钟才能阅读完成。
## Widget
在
flutter
中,every is widget
, 了解起来很容易,咱们所应用的显示文字的Text
,展现图片的Image
,展现地位信息的Padding
, 都是Widget
.
在浏览 Flutter 源码的,你可能会留神到 Widget
的定义:
@immutable
abstract class Widget extends DiagnosticableTree {
...
const Widget({this.key});
final Key key;
static bool canUpdate(Widget oldWidget, Widget newWidget) {
return oldWidget.runtimeType == newWidget.runtimeType
&& oldWidget.key == newWidget.key;
}
...
}
官网这样讲:
A widget is an immutable description of part of a user interface.
小部件是对用户界面的不可变的形容。
咱们留神到左上角有 @immutable
, 这个很重要,窗口小部件中的所有属性都必须为final
, 一旦实例化,就无奈跟更改外部属性,然而事实上,咱们的UI
不可能变化无穷的,因而 Flutter
如何治理 UI
的状态呢?
Flutter
有三棵树,Widget
树、Element
树、RenderObjects
树,这些树分工不同,将他们组合在一起,来优化 UI 的各种可能性。
Element 是什么
记录一个 Widget 的地位信息
An instantiation of a [Widget] at a particular location in the tree.
它是树的可变局部,用于治理 UI
更新和更改,您能够将它看做是治理 widget
的生命周期的元素。每个元素都援用了一个widget
, 很简略的。
RenderObject 是什么
在 Flutter
绘制 UI 时,它不会查看 Widget
的树,而是查看 RenderObjects
, 它管制大小,布局并保留用于绘制理论widget
的所有逻辑,这就是渲染对象实例化很好性能的起因。
为了更好的展现这三棵树,咱们看上面小部件:
class HomeRoute extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(child: Text('Hello world'),
);
}
}
当咱们启动利用时
1.Flutter
将遍历您的窗口小部件并创立窗口小部件树。
- 与小部件对应,
Flutter
创立元素树,在其中通过createElement()
创立每一个Element
对象。 - 当
Element
调用createRenderObject()
时,将创立每个渲染对象。
如图所示:
当咱们要扭转小部件 Text
的值,咱们看下 Flutter Inspector
的信息。
更改前:
更改后:
在 text
中显示的值从 4
变为 5
,它的renderObject
并未扭转。
因为在实例化渲染对象很消耗性能,flutter
在这点做了保留,省掉了反复实例化的开销,如果他们具备雷同的类型,则无需从新创立渲染对象。咱们只须要更新 key
的值,能够做到从新创立渲染对象。
在理论开发中,一个页面预计至多几十个 widget
,或者上百个widget
,那么对应的element
和renderObject
也是数量相等的,因而从新创立整个树是十分耗费性能的,flutter 最大水平减小性能节约,从而取得更佳的 UI
性能。
参考
- How Flutter renders Widgets
- How Flutter renders Widgets
文章汇总
<<Dart 异步与多线程 >>
<<Flutter 详解(一、深刻理解状态治理 –ScopeModel)>>
<<Flutter 详解(二、深刻理解状态治理 –Redux)>>
<<Flutter 详解(三、深刻理解状态治理 –Provider)>>
<<Flutter 详解(四、深刻理解状态治理 –BLoC)>>
<<Flutter 详解 (五、深刻理解 –Key)>>
<<Flutter 详解(六、深刻理解 –Stream>>
<<Flutter 详解(七、深刻理解绘制原理 >>