Widget状态管理

Widget 类别的原始码上有标注 @immutable，这个标注的意思是不可变的；简单的来说这个类别里的类别属性必需宣告成 final，经赋值後就不可改变。

@immutable
abstract class Widget extends DiagnosticableTree {
  /// Initializes [key] for subclasses.
  const Widget({ this.key });
  ...

State

在先前的范例中，我们有使用过 StatelessWidget，这类型的控件通常只需要定义布局内容，而 StatefulWidget 内部使用 State 来处理状态变化的管理，可以在收到异动後透过 setState 通知 Flutter 重新渲染画面。

StatefulWidget

Widget 在设计上是 immutable 的，也就是说控件在经过创建後就不能够修改，所以 Flutter 设计上将状态管理的这件事情交由 State 类别来处理。

继承 StatefulWidget 的控件需要覆写掉 createState 这个方式，回传自己定义的 State 对象，在 State 中，我们可以定义想要的属性，并且定义控件 build 方法，这个方法与 StatelessWidget 的 build 行为一样是用来定义布局的内容。

StatefulWidget 的实作可以参考下面时间控件的写法，在状态中我们有个字串类别的 _now 属性用来显示目前的时间。TimeModel 类别 mixin ChangeNotifier，每隔一秒钟就会触发时间变更的事件。

我们在生命周期阶段的 initState 监听时间变更的事件，并在收到事件後更新_now的资料并呼叫setState更新画面。

class Clock extends StatefulWidget {
  // 这边的 key 是底层 widget canUpdate 方法有关
  const Clock({Key? key}) : super(key: key);

  @override
  _Clock createState() => _Clock();
}

class _Clock extends State<Clock> {
  // TimeModel 自己实作的时间类别
  // 此类别 mixin ChangeNotifier 类别，提供`观察者模式`的特性
  final TimeModel time = TimeModel();

  String _now = "";

   // 透过呼叫 setState 通知状态已异动
  _updateTime() {
    setState(() {
      _now = time.toString();
    });
  }

  // State 生命周期
  @override
  void initState() {
    print('====initState===');
    super.initState();
    // 监听事件
    time.addListener(_updateTime);
  }

  @override
  Widget build(BuildContext context) {
    print('====build====');
    return Text(_now);
  }
}

今日成果

小结

练习成果

重点回顾：

1. 从控件状态管理是否可变更来区分，控件有 StatelessWidget 和 StatefulWidget 两种。
2. 需要状态的话使用 StatefulWidget，并定义 State 物件。
3. 资料异动後，需要触发 setState 通知 widget