Flutter(八)——状态管理（一）

前言

在学习完Flutter的常用组件之后，我们对这些组件的使用都有了一定的了解。但是，只是了解还是不够的，因为我们的数据是动态的，具备交互性，界面上的展示会根据用户的操作产生变化。这个时候，就需要对Flutter的状态管理机制有一定的了解，我们先来看一张图：

Flutter一切皆是组件，而组件Widget主要被划分为StatelessWidget和StatefulWidget两大类，下面将分辨介绍一下两类组件。

Widget

我们使用Flutter开发过程中，会出现布局层级。不管这个界面是简单的，还是复杂的，都会有布局的嵌套层级，这样的布局我们称为Widget树，并且在Widget之间存在这“父子”关系。其实Widget只是起到“描述”的作用，真正在屏幕上显示给用户看的UI是Element，Widget只是描述了Element的数据配置，Widget树的层级展现形式如下：

如果一个Widget存在子Widget，那么上一层的Widget就是父Widget，父Widget里面的则是子Widget。在实际开发中，我们会遇到复杂的布局情况，这个时候，不妨记住这颗布局树，回想一下，就会清晰了。

Context

做过Java开发的，应该清楚这个Context，因为用的最多，就是上下文的意思。Context对应的是，构建Widget树结构中具体某一个Widget的位置引用，并且它被视为Widget一部分，而每个Context只对应一个Widget。如果一个Context对应的是父Widget A，则Widget A对应的Context也包含了子Widget的Context。通过Context可以遍历和查找当前Widget树，Context之间也是关联在一起的，它们组成一颗Context树。

StatelessWidget

StatelessWidget即无状态的Widget，它无法通过setState设置组件的状态，其写法通过继承StatelessWidget，然后重写build函数来实现。对于其内部属性，应该声明为final，以防止被意外改变，例如：

class MyStatelessWidget extends StatelessWidget{
  MyStatelessWidget({
  Key key;
  this.parameter,
  }):super(key:key);
  final parameter;
  @override
  Widget build(BuildContext context){
  return new ....
  }
}

上面的代码中parameter参数只能传递一次，之后就无法被修改了。它的生命周期非常简单，就两部：1.初始化，2.通过build进行渲染。

StatefulWidget

StatefulWidget是有状态的Widget。当我们创建一个StatefulWidget组件时，它同时也创建了一个State对象，并且StatefulWidget通过与State关联可以达到刷新UI的目的。我们看一下官方的一个图示：

和React/Vue中的Reactive思想相似，但是还是有区别的，StatefulWidget只需要调用setState(…)方法，而不需要调用类似Android里的textView.setText(…)方法。某些组件在其生命周期里，内部数据会发生变化，基于这种情况，我们应该考虑使用StatefulWidget。

StatefulWidget的组成

StatefulWidget由两部分组成，第一部分为主体部分，代码如下所示：

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

在主体部分里Widget继承了StatefulWidget的内容。在主体部分中创建的变量是无法变更的，第二部分代码如下：

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    ..........
  }
}

MyHomePageState前面以""开头，证明这个类为私有，可以通过widget.{name of the variable}格式访问第一部分里定义的变量，比如widget.title。

State

State是对StatefulWidget的行为和布局的描述，和StatefulWidget存在一一对应的关系。有时候StatefulWidget的组件需要改变其界面的表现形式，这个时候就可以通过setState(…)来改变。Flutter为我们做的服务功能非常全面，改变的过程只需要由Framework层控制，从而达到更新UI的目的。