Flutter学习笔记28-状态管理

Flutter是声明式编程的：

Flutter构建应用过程

在编写一个应用的过程中，我们有大量的State需要来进行管理，而正是对这些State的改变，来更新界面的刷新。

状态管理分类

短时状态Ephemeral state

某些状态只需要在自己的Widget中使用，如简单计数器counter、一个PageView组件记录当前的页面、一个BottomNavigationBar中当前被选中的tab，这种状态我们只需要使用StatefulWidget对应的State类自己管理即可，Widget树中的其它部分并不需要访问这个状态。

应用状态App state

开发中也有非常多的状态需要在多个部分进行共享，如用户一个个性化选项、用户的登录状态信息、一个电商应用的购物车，这种状态我们如果在Widget之间传递来、传递去，那么是无穷尽的，并且代码的耦合度会变得非常高，无论是代码编写质量、后期维护、可扩展性都非常差。这个时候我们可以选择全局状态管理的方式，来对状态进行统一的管理和应用。

开发中，没有明确的规则去区分哪些状态是短时状态，哪些状态是应用状态。某些短时状态可能在之后的开发维护中需要升级为应用状态。我们可以简单遵守下面这幅流程图的规则：

状态管理选择

共享状态管理

InheritedWidget

InheritedWidget可以实现跨组件数据的传递。代码示例如下：

class CounterWidget extends InheritedWidget {
  CounterWidget({Widget child, this.counter}) : super(child: child);

  final int counter;

  static CounterWidget of(BuildContext context) {
    // 沿着Element树，去找最近的CounterElement 从Element中取出的Widget对象
    return context.dependOnInheritedWidgetOfExactType();
  }

  // 如果返回true：执行依赖当前的InheritedWidget的State中的didChangeDependencies
  @override
  bool updateShouldNotify(covariant CounterWidget oldWidget) {
    return oldWidget.counter != counter;
  }
}

定义一个共享数据的InheritedWidget，需要继承自InheritedWidget

• 这里定义了一个of方法，该方法沿着Element树，去找最近的CounterElement , 然后从Element中取出的Widget对象
• updateShouldNotify方法是对比新旧CounterWidget，是否需要对更新相关依赖的Widget

创建CounterWidget，并且传入数据,在某个Widget中使用共享的数据，并且监听，代码示例如下：

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State {
  int _counter = 100;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'InheritedWidget Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('InheritedWidget Demo'),
        ),
        body: CounterWidget(
          counter: _counter,
          child: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [ShowData1(), ShowData2()],
            ),
          ),
        ),
        floatingActionButton: FloatingActionButton(
          child: Icon(Icons.add),
          onPressed: () {
            setState(() {
              _counter++;
            });
          },
        ),
      ),
    );
  }
}

class ShowData1 extends StatefulWidget {
  @override
  _ShowData1State createState() => _ShowData1State();
}

class _ShowData1State extends State {

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    print('didChangeDependencies执行');
  }

  @override
  Widget build(BuildContext context) {
    int counter = CounterWidget.of(context).counter;
    return Card(
      color: Colors.red,
      child: Text('当前计数：$counter', style: TextStyle(fontSize: 30)),
    );
  }
}

class ShowData2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    int counter = CounterWidget.of(context).counter;
    return Container(
      color: Colors.blue,
      child: Text(
        '当前计数：$counter',
        style: TextStyle(fontSize: 30),
      ),
    );
  }
}

现在很多三方库提供了状态管理。Provider是目前官方推荐的全局状态管理工具，由社区作者Remi Rousselet 和 Flutter Team共同编写。

代码传送门