1
回顾一下 Android 生命周期
在学习 Flutter 之前, 我们总会要从最基本的东西了解起来, 就好比当接触 Android 的时候, 我们学四大组件都要学好久, 是否还记得在 Android 的生命周期? 首先让我们回顾下 Android 中的生命周期. 然后再去对比一下 Flutter, 你就会有更深刻的认识和理解.
关于这个就不在多说了, 常用场景总结下:
1. 启动 Activity: 系统会先调用 onCreate 方法, 然后调用 onStart 方法, 最后调用 onResume,Activity 进入运行状态.
2. 当前 Activity 被其他 Activity 覆盖其上或被锁屏: 系统会调用 onPause 方法, 暂停当前 Activity 的执行.
3. 当前 Activity 由被覆盖状态回到前台或解锁屏: 系统会调用 onResume 方法, 再次进入运行状态.
4. 当前 Activity 转到新的 Activity 界面或按 Home 键回到主屏, 自身退居后台: 系统会先调用 onPause 方法, 然后调用 onStop 方法, 进入停滞状态.
5. 用户后退回到此 Activity: 系统会先调用 onRestart 方法, 然后调用 onStart 方法, 最后调用 onResume 方法, 再次进入运行状态.
6. 当前 Activity 处于被覆盖状态或者后台不可见状态, 即第 2 步和第 4 步, 系统内存不足, 杀死当前 Activity, 而后用户退回当前 Activity: 再次调用 onCreate 方法, onStart 方法, onResume 方法, 进入运行状态.
7. 用户退出当前 Activity: 系统先调用 onPause 方法, 然后调用 onStop 方法, 最后调用 onDestory 方法, 结束当前 Activity.
emmm, 相信小伙伴们现在应该记忆起来了吧, 前戏好了, 进入主题, 聊聊我们今天的主人公 "State" .
2
Widget 的引入
在我们的主人公出场前, 先认识下它的小伙伴:"Widget".
Flutter 中几乎所有的对象都是一个 Widget , 与原生开发中 "控件" 不同的是, Flutter 中的 widget 的概念更广泛, 它不仅可以表示 UI 元素 , 也可以表示一些 功能性的组件. 如: 用于手势检测的 GestureDetector widget, 用于应用主题数据传递的 Theme 等等. 而原生开发中的控件通常只是指 UI 元素.
3
State 的引入
Flutter 有两个关键的核心类:"StatelessWidget" 和 "StatefulWidget".
● StatelessWidget(用于不需要维护状态的场景)
abstract class StatelessWidget extends Widget
● StatefulWidget(用于需要维护状态的场景)
abstract class StatefulWidget extends Widget
从上述的代码中我们看到他们都继承了一个东西 Widget , 那就先简单的看下这个类:
- @immutable
- abstract class Widget extends DiagnosticableTree {
- const Widget({ this.key });
- final Key key;
- @protected
- Element createElement();
- @override
- String toStringShort() {
- return key == null ? '$runtimeType' : '$runtimeType-$key';
- }
- @override
- void debugFillProperties(DiagnosticPropertiesBuilder properties) {
- super.debugFillProperties(properties);
- properties.defaultDiagnosticsTreeStyle = DiagnosticsTreeStyle.dense;
- }
- static bool canUpdate(Widget oldWidget, Widget newWidget) {
- return oldWidget.runtimeType == newWidget.runtimeType
- && oldWidget.key == newWidget.key;
- }
- }
左右滑动滚动条查看完整代码块
上述代码中有一个我们很常见的方法, 每次在继承的时候都需要重写的一个方法:
@override StatefulElement createElement() => StatefulElement(this);
左右滑动滚动条查看完整代码块
继续跟踪 StatefulElement 发现存在一个 * widget.createState()* 方法, 发现了就要继续:
class StatefulElement extends ComponentElement { /// Creates an element that uses the given widget as its configuration. StatefulElement(StatefulWidget widget) : _state = widget.createState(), super(widget) { ..... assert(_state._element == null); _state._element = this; assert(_state._widget == null); _state._widget = widget; assert(_state._debugLifecycleState == _StateLifecycle.created); } .....
左右滑动滚动条查看完整代码块
点击 createState 方法我们终于找到了今天的主人公, 没错, 就是它 ---- State 了.
@protected State createState(); 4
Flutter 生命周期
到了现在这一步, 我们已经找到想要的了, 正如前面所说, Android 有自己的生命周期, 那么作为 Flutter 也有自己独特的生命周期:
嗯, 我一眼就看到了 initState 这个方法, 还记得在网络请求的时候亦或是变量的初始化, 总是要写到这个方法里面:
@override void initState() { // TODO: implement initState super.initState(); _loadItemPage(); }
我们可以将上述方法分为三个部分进行描述, 见下图:
大致可以看成三个阶段:
● 初始化 (插入渲染树)
1, 构造函数
不属于生命周期, 因为这个时候 State 的 widget 属性为空, 此时无法在构造函数中访问 widget 属性.
2,initState
这个函数在生命周期中只调用一次. 这里可以做一些初始化工作, 比如 初始化 State 的变量.
来源: http://www.tuicool.com/articles/JBBjuaI