重要消息
1 引言在 Flutter 应用程序开发中,我们常常会使用使用Widget 、 BuildContext 、State 等等 当我们的数据更新时,我们需要刷新页面效果时使用用如下方法
又比如我们在使用主题颜色引用时像如下这样写
2 聊一聊 WidgetWidget 我们可以理解为 Android、ios 中的 View ,前端中的 div , 在 Flutter 程序设计中,则是采用了 dom树的结构方式来组织起来的。 3 谈一谈 ContextContext 是 Flutter 应用程序在通过 Widget 构建 Widgets树时的引用,应用像是 Android 中的 Context ,ios 中的CGContextRef ,我们通常称之为上下文对象。 一个Flutter 程序有 若干个 Widget 组成 Widgets 树形结构 ,而每一个 Widget 都对应一个 Context ,那么有 Widget 树结构,那么也必然有 Context 树形结构了。 4 说一说 StateFlutter 应用程序是由 Widget 缓存的树形结构 ,在 Flutter 中,sdk 提供了两个 默认的 Widget 那么针对 StatefulWidget 这种 Widget 来讲,在实际开发中,渲染出的页面效果会随着数据的改变而改变,数据每改变一次那么页面重新渲染一次,每一次都对应一个状态,就是这里说的 State 在 React 的开发来讲
所以 Flutter 程序的设计中 State 与 React 的 State 大同小异,不过 Flutter 中的 State 设计的就更人性化了一点,一个 Widget 在被创建的时候就绑定了一个 State ,从 Widget 的出现 到消亡,也就是 Widget 的生命周期。 我们在创建一个 StatefulWidget 里通常会这样写
initState() 方法是在创建 State 对象后要调用的第一个方法,常常用做于初始化一些数据 在实际开发中,我们有时会在这个方法中使用到 context ,比如初始化一个字体颜色时,我们如下这样调用
常常会报错异常错误,这是因为 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)方法在上述代码中,我们有如下的写法
关键代码部分通过 context.rootAncestorStateOfType 向上遍历 Element tree,并找到最近匹配的 State。也就是说of实际上是对context跨组件获取数据的一个封装。 完毕 |
|