Flutter控件——常用控件：StatefulWidget与State

Posted 2022-06-16 wzj_what_why_how

StatefulWidget和State

和StatelessWidget一样，StatefulWidget也是继承自widget类，并重写了createElement()方法，不同的是返回的Element 对象并不相同；另外StatefulWidget类中添加了一个新的接口createState()。

下面我们看看StatefulWidget的类定义：

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

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生命周期

例子运行分析：

class CounterWidget extends StatefulWidget 
  const CounterWidget(Key? key, this.initValue = 0);

  final int initValue;

  @override
  _CounterWidgetState createState() => _CounterWidgetState();

CounterWidget接收一个initValue整型参数，它表示计数器的初始值。下面我们看一下State的代码：

class _CounterWidgetState extends State<CounterWidget> 
  int _counter = 0;

  @override
  void initState() 
    super.initState();
    //初始化状态
    _counter = widget.initValue;
    print("initState");
  

  @override
  Widget build(BuildContext context) 
    print("build");
    return Scaffold(
      body: Center(
        child: TextButton(
          child: Text('$_counter'),
          //点击后计数器自增
          onPressed: () => setState(
            () => ++_counter,
          ),
        ),
      ),
    );
  

  @override
  void didUpdateWidget(CounterWidget oldWidget) 
    super.didUpdateWidget(oldWidget);
    print("didUpdateWidget ");
  

  @override
  void deactivate() 
    super.deactivate();
    print("deactivate");
  

  @override
  void dispose() 
    super.dispose();
    print("dispose");
  

  @override
  void reassemble() 
    super.reassemble();
    print("reassemble");
  

  @override
  void didChangeDependencies() 
    super.didChangeDependencies();
    print("didChangeDependencies");
  

接下来，我们创建一个新路由，在新路由中，我们只显示一个CounterWidget：

class StateLifecycleTest extends StatelessWidget 
  const StateLifecycleTest(Key? key) : super(key: key);

  @override
  Widget build(BuildContext context) 
    return CounterWidget();
  

我们运行应用并打开该路由页面，在新路由页打开后，屏幕中央就会出现一个数字0，然后控制台日志输出：

I/flutter ( 5436): initState
I/flutter ( 5436): didChangeDependencies
I/flutter ( 5436): build

可以看到，在StatefulWidget插入到 widget 树时首先initState方法会被调用。

然后我们点击⚡️按钮热重载，控制台输出日志如下：

I/flutter ( 5436): reassemble
I/flutter ( 5436): didUpdateWidget
I/flutter ( 5436): build

可以看到此时initState 和didChangeDependencies都没有被调用，而此时didUpdateWidget被调用。

接下来，我们在 widget 树中移除CounterWidget，将 StateLifecycleTest 的 build方法改为：

 Widget build(BuildContext context) 
  //移除计数器
  //return CounterWidget ();
  //随便返回一个Text()
  return Text("xxx");

然后热重载，日志如下：

I/flutter ( 5436): reassemble
I/flutter ( 5436): deactive
I/flutter ( 5436): dispose

我们可以看到，在CounterWidget从 widget 树中移除时，deactive和dispose会依次被调用。

• initState：当 widget 第一次插入到 widget 树时会被调用，对于每一个State对象，Flutter 框架只会调用一次该回调，
  所以，通常在该回调中做一些一次性的操作，如状态初始化、订阅子树的事件通知等。不能在该回调中调用BuildContext.dependOnInheritedWidgetOfExactType
  （该方法用于在 widget 树上获取离当前 widget 最近的一个父级InheritedWidget，关于InheritedWidget我们将在后面章节介绍），原因是在初始化完成后， widget 树中的InheritFrom widget也可能会发生变化，所以正确的做法应该在在build（）方法或didChangeDependencies()中调用它。

• didChangeDependencies()：当State对象的依赖发生变化时会被调用；例如：在之前build() 中包含了一个InheritedWidget ，
  然后在之后的build() 中Inherited widget发生了变化，那么此时InheritedWidget的子 widget 的didChangeDependencies()回调都会被调用。典型的场景是当系统语言 Locale 或应用主题改变时，Flutter 框架会通知 widget 调用此回调。
  需要注意，组件第一次被创建后挂载的时候（包括重创建）对应的didChangeDependencies也会被调用。

• build()：此回调读者现在应该已经相当熟悉了，它主要是用于构建 widget 子树的，会在如下场景被调用：

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

• reassemble()：此回调是专门为了开发调试而提供的，在热重载(hot reload)时会被调用，此回调在Release模式下永远不会被调用。

• didUpdateWidget ()：在 widget 重新构建时，Flutter 框架会调用widget.canUpdate来检测 widget 树中同一位置的新旧节点，
  然后决定是否需要更新，如果widget.canUpdate返回true则会调用此回调。正如之前所述，widget.canUpdate会在新旧 widget 的 key和 runtimeType 同时相等时会返回true，也就是说在在新旧 widget 的key和runtimeType同时相等时didUpdateWidget()就会被调用。

• deactivate()：当 State 对象从树中被移除时，会调用此回调。在一些场景下，Flutter 框架会将 State 对象重新插到树中，
  如包含此 State 对象的子树在树的一个位置移动到另一个位置时（可以通过GlobalKey 来实现）。如果移除后没有重新插入到树中则紧接着会调用dispose()方法。

• dispose()：当 State 对象从树中被永久移除时调用；通常在此回调中释放资源。

---

在 widget 树中获取State对象

由于 StatefulWidget 的的具体逻辑都在其 State 中，所以很多时候，我们需要获取 StatefulWidget 对应的State 对象来调用一些方法。
我们有两种方法在子 widget 树中获取父级 StatefulWidget 的State 对象。

• 1.通过Context获取
  context对象有一个findAncestorStateOfType()方法，该方法可以从当前节点沿着 widget 树向上查找指定类型的 StatefulWidget 对应的 State 对象。

• 2.通过GlobalKey
  Flutter还有一种通用的获取State对象的方法——通过GlobalKey来获取！