Flutter 基础（1）

进击的学霸...大约 7 分钟

Flutter 基础之 Widget 、 State 和生命周期

Widget 是 Flutter 功能的抽象描述，是视图的配置信息，同样也是数据的映射，Flutter 的核心设计思想便是“一切皆 Widget”。Flutter 将视图树的概念进行了扩展，把视图数据的组织和渲染抽象为三部分，即 Widget，Element 和 RenderObject。这类似于 Vue 中的虚拟 dom 相关，Widget 相当于 Template，Element 相当于虚拟 DOM，RenderObject 则相当于浏览器 DOM。所以接触过 React 和 Vue 的伙伴应该能比较快的理解 Flutter 的渲染概念。

Flutter 渲染过程，可以分为这么三步：

首先，通过 Widget 树生成对应的 Element 树；
然后，创建相应的 RenderObject 并关联到 Element.renderObject 属性上；
最后，构建成 RenderObject 树，以完成最终的渲染。

Flutter 通过控件树（Widget 树）中的每个控件（Widget）创建不同类型的渲染对象，组成渲染对象树。而渲染对象树在 Flutter 的展示过程分为四个阶段，即布局、绘制、合成和渲染。其中，布局和绘制在 RenderObject 中完成，Flutter 采用深度优先机制遍历渲染对象树，确定树中各个对象的位置和尺寸，并把它们绘制到不同的图层上。绘制完毕后，合成和渲染的工作则交给 Skia 搞定。

State

在 Widget 的生命周期内，应用到 State 中的任何更改都将强制 Widget 重新构建。在 Flutter 中，Widget 采用由父到子、自顶向下的方式进行构建，父 Widget 控制着子 Widget 的显示样式，其样式配置由父 Widget 在构建时提供。在一些特殊场景下，Widget 的 build 方法有可能会执行多次。因此，我们不应该在这个方法内部，放置太多有耗时的操作，相当于应更多的操作数据，以数据变更驱动视图更新，而尽量少的在视图中进行逻辑处理。

关于 StatelessWidget 和 StatefulWidget ，在 Vue 中也有类似概念—— 纯 UI 组件（注：不是函数式组件），不进行数据的复杂处理，主要专注于 UI 展示的组件。

生命周期

State 生命周期

在用户参与的情况下，其关联的 Widget 所经历的，从创建到显示再到更新最后到停止，直至销毁等各个过程阶段。State 的生命周期流程如下图：

State 的生命周期流程

创建

初始化执行：构造方法 -> initState -> didChangeDependencies -> build

构造方法是 State 生命周期的起点，Flutter 会通过调用 StatefulWidget.createState() 来创建一个 State。我们可以通过构造方法，来接收父 Widget 传递的初始化 UI 配置数据。这些配置数据，决定了 Widget 最初的呈现效果。
initState，会在 State 对象被插入视图树的时候调用。这个函数在 State 的生命周期中只会被调用一次，所以我们可以在这里做一些初始化工作，比如为状态变量设定默认值。
didChangeDependencies 则用来专门处理 State 对象依赖关系变化，会在 initState() 调用结束后，被 Flutter 调用。
build，作用是构建视图。经过以上步骤，Framework 认为 State 已经准备好了，于是调用 build。我们需要在这个函数中，根据父 Widget 传递过来的初始化配置数据，以及 State 的当前状态，创建一个 Widget 然后返回。

更新

一旦 setState、didchangeDependencies 与 didUpdateWidget这三个方法被调用，Flutter 随后就会销毁老 Widget，并调用 build 方法重建 Widget。

setState：我们最熟悉的方法之一。当状态数据发生变化时，我们总是通过调用这个方法告诉 Flutter：“我这儿的数据变啦，请使用更新后的数据重建 UI！”
didChangeDependencies：State 对象的依赖关系发生变化后，Flutter 会回调这个方法，随后触发组件构建。哪些情况下 State 对象的依赖关系会发生变化呢？典型的场景是，系统语言 Locale 或应用主题改变时，系统会通知 State 执行 didChangeDependencies 回调方法。
didUpdateWidget：当 Widget 的配置发生变化时，比如，父 Widget 触发重建（即父 Widget 的状态发生变化时），热重载时，系统会调用这个函数。

销毁

比如组件被移除，或是页面销毁的时候，系统会调用 deactivate 和 dispose 这两个方法，来移除或销毁组件。

当组件的可见状态发生变化时，deactivate 函数会被调用，这时 State 会被暂时从视图树中移除。值得注意的是，页面切换时，由于 State 对象在视图树中的位置发生了变化，需要先暂时移除后再重新添加，重新触发组件构建，因此这个函数也会被调用。
当 State 被永久地从视图树中移除时，Flutter 会调用 dispose 函数。而一旦到这个阶段，组件就要被销毁了，所以我们可以在这里进行最终的资源释放、移除监听、清理环境，等等。

销毁相关生命周期回调触发图示：

总览

在构造函数中Widget还未生成，所以只能做一些参数传入的处理，initState中可以做初始化State的变量的操作。

方法名	功能	调用时机	调用次数
构造方法	接收父 Widget 传递的初始化 UI 配置数据	创建 State 时	1
initState	与渲染相关的初始化工作	在 State 被插入视图树时	1
didChangeDependencies	处理 State 对象依赖关系变化	initState 后及 State 对象依赖关系变化时	>=1
build	构建视图	State 准备好数据需要渲染时	>=1
setState	触发视图重建	需要刷新 UI 时	>=1
didUpdateWidget	处理 Widget 的配置变化	父 Widget setState 触发子 Widget 重建时	>=1
deactivate	组件被移除	组件不可视	>=1
dispose	组件被销毁	组件被永久移除	1

App 生命周期

App 的生命周期，则定义了 App 从启动到退出的全过程。在 Flutter 中可以利用 WidgetsBindingObserver 这个类提供的丰富的回调函数，来对一些屏幕旋转、屏幕亮度、语言变化、内存警告等事件进行回调

abstract class WidgetsBindingObserver {
  //页面pop
  Future<bool> didPopRoute() => Future<bool>.value(false);
  //页面push
  Future<bool> didPushRoute(String route) => Future<bool>.value(false);
  //系统窗口相关改变回调，如旋转
  void didChangeMetrics() { }
  //文本缩放系数变化
  void didChangeTextScaleFactor() { }
  //系统亮度变化
  void didChangePlatformBrightness() { }
  //本地化语言变化
  void didChangeLocales(List<Locale> locale) { }
  //App生命周期变化
  void didChangeAppLifecycleState(AppLifecycleState state) { }
  //内存警告回调
  void didHaveMemoryPressure() { }
  //Accessibility相关特性回调
  void didChangeAccessibilityFeatures() {}
}

App 生命周期回调

didChangeAppLifecycleState，有一个参数类型为 AppLifecycleState 的枚举类，这个枚举类是 Flutter 对 App 生命周期状态的封装。它的常用状态包括 resumed、inactive、paused 这三个：

resumed：可见的，并能响应用户的输入。
inactive：处在不活动状态，无法处理用户响应。
paused：不可见并不能响应用户的输入，但是在后台继续活动中。

class _MyHomePageState extends State<MyHomePage>  with WidgetsBindingObserver{
...
  @override
  @mustCallSuper
  void initState() {
    super.initState();
    WidgetsBinding.instance.addObserver(this);//注册监听器
  }
  @override
  @mustCallSuper
  void dispose(){
    super.dispose();
    WidgetsBinding.instance.removeObserver(this);//移除监听器
  }
  @override
  void didChangeAppLifecycleState(AppLifecycleState state) async {
    print("$state");
    if (state == AppLifecycleState.resumed) {
      //do sth
    }
  }
}

帧绘制回调

用于在组件渲染之后做一些与显示安全相关的操作，比如要等界面上的某个元素出现之后，才认为视图渲染完成，就可以用这个机制：

单次 Frame 绘制回调，通过 addPostFrameCallback 实现。它会在当前 Frame 绘制完成后进行进行回调，并且只会回调一次，如果要再次监听则需要再设置一次。
实时 Frame 绘制回调，则通过 addPersistentFrameCallback 实现。这个函数会在每次绘制 Frame 结束后进行回调，可以用做 FPS 监测。

WidgetsBinding.instance.addPostFrameCallback((_){
  print("单次Frame绘制回调");//只回调一次
});
WidgetsBinding.instance.addPersistentFrameCallback((_){
  print("实时Frame绘制回调");//每帧都回调
});

昵称

邮箱

网址

按正序
按倒序
按热度

Flutter 基础（1）

# Widget

# State

# 生命周期

# State 生命周期

# 创建

# 更新

# 销毁

# 总览

# App 生命周期

# App 生命周期回调

# 帧绘制回调

预览:

Widget