Flutter - 本地状态 vs 应用范围状态

Flutter 是一个快速发展的移动应用程序框架，它提供了许多功能和工具来帮助开发人员创建高质量的移动应用程序。其中一个最重要的概念是状态管理，Flutter 具有许多不同类型的状态管理。

在 Flutter 中，本地状态和应用范围状态是最常用的两种状态管理方式。本文将介绍这两种状态，并解释它们如何在 Flutter 应用程序中使用。

本地状态

本地状态（也称为页面状态）是指仅在单个 Flutter 页面或窗口内使用的状态。该状态仅可通过 widget 的状态对象进行访问和管理，并仅在该 widget 生命周期的时间内存在。任何更改或修改都不会影响到应用程序中的其他部分。

实现本地状态

要在 Flutter 中实现本地状态，可以使用 StatefulWidget。 StatefulWidgets 中包含可变状态，这些状态可在 widget 的生命周期中实现。要使用 StatefulWidget 实现本地状态，需要：

1. 创建一个 Stateful Widget

class MyWidget extends StatefulWidget {
  @override
  _MyWidgetState createState() => _MyWidgetState();
}

2. 在 Stateful Widget 中创建状态类

class _MyWidgetState extends State<MyWidget> {
  String _name = 'Flutter';
  ...
}

3. 在 Stateful Widget 中使用状态类

class _MyWidgetState extends State<MyWidget> {
  String _name = 'Flutter';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('My Widget'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Name:',
            ),
            Text(
              '$_name',
            ),
          ],
        ),
      ),
    );
  }
}

4. 更改状态类中的状态

class _MyWidgetState extends State<MyWidget> {
  String _name = 'Flutter';

  void _changeName() {
    setState(() {
      _name = 'Dart';
    });
  }

  @override
  Widget build(BuildContext context) {
    ...
  }
}

此处使用 setState() 方法更改状态类中的 _name 字符串。

应用范围状态

应用范围状态（也称为全局状态）是指可在整个 Flutter 应用程序中使用的状态。该状态仅可通过 InheritedWidget 进行访问和管理，并可由多个 widget 共享和使用。

实现应用范围状态

要在 Flutter 中实现应用范围状态，可以使用 InheritedWidget。InheritedWidget 从其父级 widget 中继承数据，并将该数据传递到其子级 widget 中。InheritedWidget 的主要用途是在 widget 树中向下传递状态。

要使用 InheritedWidget 实现应用范围状态，需要：

1. 创建一个 Inherited Widget

class MyInheritedWidget extends InheritedWidget {
  final String name;
  final Widget child;

  MyInheritedWidget({required this.name, required this.child});

  @override
  bool updateShouldNotify(MyInheritedWidget oldWidget) {
    return name != oldWidget.name;
  }

  static MyInheritedWidget of(BuildContext context) {
    return context.dependOnInheritedWidgetOfExactType<MyInheritedWidget>()!;
  }
}

2. 在 Inherited Widget 中使用状态

class _MyInheritedWidgetState extends State<MyInheritedWidget> {
  String _name = 'Flutter';

  void _changeName() {
    setState(() {
      _name = 'Dart';
    });
  }

  @override
  Widget build(BuildContext context) {
    return MyInheritedWidget(
      name: _name,
      child: Scaffold(
        appBar: AppBar(
          title: Text('My Inherited Widget'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text(
                'Name:',
              ),
              Text(
                '${MyInheritedWidget.of(context).name}',
              ),
            ],
          ),
        ),
      ),
    );
  }
}

此处将 _name 字符串存储在 MyInheritedWidget 中，并使用 MyInheritedWidget.of(context).name 访问。当调用 setState() 方法更改 _name 字符串时，InheritedWidget 会在整个 widget 树中传递新的状态。

结论

本地状态和应用范围状态都是 Flutter 中常用的状态管理方式。选择何种状态管理方式取决于应用程序的要求。如果需要在多个 widget 之间共享状态，则应使用 InheritedWidget。否则，应使用 StatefulWidget 实现本地状态。