浅谈Flutter的状态State

重要消息

• 网易云【玩转大前端】配套课程

• EDU配套 教程

• Flutter开发的点滴积累系列文章

• 一行代代码置灰应用?对就是这么干

本方主要内容为 聊一聊 Widget 、谈一谈 Context 、说一说 State 、 看一看 of(context)方法

1 引言

在 Flutter 应用程序开发中，我们常常会使用使用Widget 、 BuildContext 、State 等等
例如：

当我们的数据更新时，我们需要刷新页面效果时使用用如下方法

    setState(() {
      
    });

又比如我们在使用主题颜色引用时像如下这样写 

Theme.of(context).primaryColor

2 聊一聊 Widget

Widget 我们可以理解为 Android、ios 中的 View ，前端中的 div , 在 Flutter 程序设计中，则是采用了 dom树的结构方式来组织起来的。

3 谈一谈 Context

Context 是 Flutter 应用程序在通过 Widget 构建 Widgets树时的引用，应用像是 Android 中的 Context ,ios 中的CGContextRef ，我们通常称之为上下文对象。

一个Flutter 程序有 若干个 Widget 组成 Widgets 树形结构 ，而每一个 Widget 都对应一个 Context ,那么有 Widget 树结构，那么也必然有 Context 树形结构了。

4 说一说 State

Flutter 应用程序是由 Widget 缓存的树形结构 ，在 Flutter 中，sdk 提供了两个 默认的 Widget 
* StatelessWidget 渲染出的页面不会再次被更改
* StatefulWidget 渲染出的页面会再次被更改

那么针对 StatefulWidget 这种 Widget 来讲，在实际开发中，渲染出的页面效果会随着数据的改变而改变，数据每改变一次那么页面重新渲染一次，每一次都对应一个状态，就是这里说的 State

在 React 的开发来讲

假如我们需要修改上述 state 引用的 date ，需要如下这样来写

  tick() {
    this.setState({
      date: new Date()
    });
  }

所以 Flutter 程序的设计中 State 与 React 的 State 大同小异，不过 Flutter 中的 State 设计的就更人性化了一点，一个 Widget 在被创建的时候就绑定了一个 State ,从 Widget 的出现 到消亡，也就是 Widget 的生命周期。

我们在创建一个 StatefulWidget 里通常会这样写

class CustomScrollDemoPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return ScrollHomePageState();
  }
}

class ScrollHomePageState extends State{
  @override
  void initState() {
    super.initState();
  }
  
  @override
  void didChangeDependencies(){
    super.didChangeDependencies();
  }
  
  @override
  Widget build(BuildContext context) {
  }

}

initState() 方法是在创建 State 对象后要调用的第一个方法，常常用做于初始化一些数据

在实际开发中，我们有时会在这个方法中使用到 context ，比如初始化一个字体颜色时，我们如下这样调用

Theme.of(context).primaryColor

常常会报错异常错误，这是因为 Context 可用 程序还没有完全将 State 与 Context 相关联起来，所以还不能使用，当 initState() 方法完全执行完毕后，State 与 Context 也就完全关联起来了。

didChangeDependencies() 方法是在 initState() 方法执行完毕后执行的第二个方法，在这个方法中， State 与 Context 已经完全关联起来了，所以可以使用 Context 

所以在 Flutter 中， StatefulWidget 、Context 、State 是一个不错的组合，当一个 Widget 继承于 StatefulWidget 来创建组件时，会调用StatefulWidget的 createElement方法，并t生成对就StatefulElement对象，

并保留widget引用也就是对应的 BuildContext ，

然后 将这个StatefulElement挂载到Element树上（也就是我们上面说的 Widgets树），

然后根据widget的 createState 方法创建State，

然后 StatefulElement对象调用state的build方法，并将element自身作为BuildContext传入

所以我们在build函数中所使用的context，正是当前widget所创建的Element对象，因为 context 就是 Element 元素的引用，实际指向。

5 看一看 of(context)方法

在上述代码中，我们有如下的写法

Theme.of(context).primaryColor

关键代码部分通过 context.rootAncestorStateOfType 向上遍历 Element tree，并找到最近匹配的 State。也就是说of实际上是对context跨组件获取数据的一个封装。

---

完毕