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

前言

前面一章简单的介绍了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。

Flutter学习之四 StatelessWidget 和 StatefulWidget

Flutter学习之四 StatelessWidget 和 StatefulWidget

前言

正文

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

小结

总结