Flutter学习之四 StatelessWidget 和 StatefulWidget

物类之起，必有所始。荣辱之来，必象其德。

Flutter学习之三 Widget

前言

前面一章简单的介绍了Widget类，这一章主要介绍一下StatelessWidget和StatefulWidget，两者都是继承Widget。

正文

• StatelessWidget

StatelessWidget相对比较简单，用于不需要维护状态的场景（初始化后不需要改变UI），它通常在build方法中通过嵌套其它 widget来构建UI，在构建过程中会递归的构建其嵌套的 widget 。其类的定义如下：

abstract class StatelessWidget extends Widget {
  const StatelessWidget({ Key? key }) : super(key: key);

  /// Creates a [StatelessElement] to manage this widget's location in the tree.
  ///
  /// It is uncommon for subclasses to override this method.
  @override
  StatelessElement createElement() => StatelessElement(this);

  @protected
  Widget build(BuildContext context);
}

重写了createElement()方法，StatelessElement间接继承自Element类，与StatelessWidget相对应（作为其配置数据）。

举个栗子：

class StatelessPage extends StatelessWidget {
  const StatelessPage({
    Key? key,
    required this.content,
    required this.backgroudColor,
  }) : super(key: key);

  final String content;
  final Color backgroudColor;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(content),
      ),
      body: Center(
        child: Container(
          height: 50,
          alignment: Alignment.center,
          color: backgroudColor,
          child: Text(content),
        ),
      ),
    );
  }
}

这是一个简单的页面，有2个必传的构造属性（content、backgroudColor），导航title是传进来的content。页面的中间有个组件，组件是个高50，子控件居中，背景颜色是传进来的颜色，子组件是Text，内容是传进来的content。

注意：构造参数要用final修饰，前面说过flutter刷新机制，属性变了，这个Widget就不是本身的了。另外的，如果是必传的要加required，可选的用？修饰即可。

构造方法

StatelessPage(content: '我的StatelessWidget', backgroudColor: Colors.yellow)

效果如图1：

1.png

• StatefulWidget

和StatelessWidget相比，StatefulWidget添加了一个新的接口createState()。其类定义如下：

abstract class StatefulWidget extends Widget {
  const StatefulWidget({ Key key }) : super(key: key);
    
  @override
  StatefulElement createElement() => StatefulElement(this);
    
  @protected
  State createState();
}

• StatefulElement 间接继承自Element类，与StatefulWidget相对应（作为其配置数据）。StatefulElement中可能会多次调用createState()来创建状态（State）对象。

• createState()用于创建和 StatefulWidget相关的状态，它在StatefulWidget的生命周期中可能会被多次调用。例如，当一个StatefulWidget同时插入到widget 树的多个位置时，Flutter 框架就会调用该方法为每一个位置生成一个独立的State实例，其实，本质上就是一个StatefulElement对应一个State实例。

不好理解可以跳过，写段时间再回头看。下面详细介绍一下State。

一个StatefulWidget 类会对应一个 State类，State表示与其对应的 StatefulWidget要维护的状态，State中的保存的状态信息可以：

• 在 Widget 构建时可以被同步读取。
• 在 Widget生命周期中可以被改变，当State被改变时，可以手动调用其setState()方法通知Flutter 框架状态发生改变，Flutter 框架在收到消息后，会重新调用其build方法重新构建 widget 树，从而达到更新UI的目的。

State 中有两个常用属性：

• widget，它表示与该 State 实例关联的 widget 实例，由Flutter 框架动态设置。注意，这种关联并非永久的，因为在应用生命周期中，UI树上的某一个节点的 widget 实例在重新构建时可能会变化，但State实例只会在第一次插入到树中时被创建，当在重新构建时，如果 widget 被修改了，Flutter 框架会动态设置State. widget 为新的 widget 实例。

• context。StatefulWidget对应的 BuildContext，作用同StatelessWidget的BuildContext。

state生命周期：

理解State的生命周期对flutter开发非常重要，如果想看详细的请参见 state生命周期，我这里对生命周期主要方法总结一下：

• 1、initState()：当 widget 第一次插入到 widget 树时会被调用，对于每一个State对象，Flutter 框架只会调用一次该回调。

• 2、didChangeDependencies()：当State对象的依赖发生变化时会被调用；

• 3、build()：主要是用于构建 widget 子树的，会在如下场景被调用：

1、在调用initState()之后。
2、在调用didUpdateWidget()之后。
3、在调用setState()之后。
4、在调用didChangeDependencies()之后。
5、在State对象从树中一个位置移除后（会调用deactivate）又重新插入到树的其它位置之后。

• 4、reassemble()：此回调是专门为了开发调试而提供的，在热重载(hot reload)时会被调用，此回调在Release模式下永远不会被调用。
• 5、didUpdateWidget ()：在新旧 widget 的key和runtimeType同时相等时didUpdateWidget()就会被调用。
• 6、deactivate()：当 State 对象从树中被移除时，会调用此回调；
• 7、dispose()：当 State 对象从树中被永久移除时调用；通常在此回调中释放资源；

StatefulWidget 生命周期图2

2.png

小结

前期开发记住几点就行了：
1、先走initState()，后走build()；
2、所有的UI构建要放在build()里面；
3、刷新UI直接调用setState()；
4、回收垃圾在dispose()。

总结

• Q：什么时候使用StatelessWidget和StatefulWidget？
  A：如果一个UI在初始化之后就不用更新，那就使用StatelessWidget，反之StatefulWidget。
• Q：既然都是Widget，啥是VC，啥是view？
  A：StatelessWidget、StatefulWidget的build方法里面，如果第一子节点是Scaffold（带有appBar、body、bottomNavigationBar这种的），那就可以理解为这个页面是VC，反之可以理解为view。
• Q：iOS中的self在Flutter中是啥？
  A：首字母小写的widget。