Flutter渲染原理

最新推荐文章于 2025-03-24 12:38:28 发布

原创

最新推荐文章于 2025-03-24 12:38:28 发布 · 873 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#flutter

在Flutter框架中，Widget是界面描述，Element是Widget的实例化，它们之间通过createElement建立一一对应关系。RenderObject则负责具体的布局和绘制工作，不所有Widget都与其一一对应，仅RenderObjectWidget子类才有。BuildContext是Element的引用，在构建UI时用于传递上下文信息。频繁更改Widget不会直接影响性能，因为更新判断基于runtimeType和key。Build方法在Element挂载后调用，对于StatefulWidget，createState方法在生成Element时调用，创建state对象。

一 Widget Element RenderObject 之间的关系

1 Widget

在Flutter 中，万物皆是Widget,无论是可见的还是功能型的。一切都是Widget.

官方文档中说的Widget 使用配置和状态来描述View 界面应该长什么样子。

它不仅可以表示UI元素，也可以表示一些功能性的组件如：用于手势检测的 GestureDetector、用于APP主题数据传递的Theme、布局元素等等

两个重要的方法

一个是通过 createElement 来创建 Element 对象的，

一个是根据 key 来决定更新行为的 canUpdate 方法。

在这个方法中会对比runtimeType （也就是widget 的类型）和 key 是否相同

@immutable
abstract class Widget extends DiagnosticableTree {
  /// Initializes [key] for subclasses.
  const Widget({this.key});
  
  
  final Key? key;

 
  @protected
  @factory
  Element createElement();

  /// A short, textual description of this widget.
  @override
  String toStringShort() {
    final String type = objectRuntimeType(this, 'Widget');
    return key == null ? type : '$type-$key';
  }

  @override
  void