Flutter 基础（1）

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

Widget

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绘制回调");//每帧都回调
});