浅谈Flutter的状态State

重要消息

本方主要内容为 聊一聊 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 。

对于生命周期方法didChangeDependencies只要是在当前页面的状态State与Widget的引用Context依赖关系发生变化时都会回调,目前在这里的案例中页面创建时有Context与当前页面的State绑定,在页面关闭时,有Context与当前页面的Context解绑,这两个过程都会回调didChangeDependencies方法

所以在 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跨组件获取数据的一个封装。


完毕

早起的年轻人 CSDN认证博客专家 移动开发 项目管理 Java
只要用心去做,每一件事情还是有可能成功的,当然成功是没有界限的,只不过是达到自己心里的那个目标,公众号:我的大前端生涯,一个爱喝茶的程序员,通常会搞搞SpringBoot 、Herbinate、Mybatiys、Android、iOS、Flutter、Vue、小程序等.
©️2020 CSDN 皮肤主题: 代码科技 设计师:Amelia_0503 返回首页