Flutter中状态管理

在flutter开发中，我们对State来进行管理，通过State的改变，来更新界面的刷新，状态管理分为两大类：
1.短时状态管理(定时器，动画效果等)
2.应用状态管理(用户信息，购物车等)

● 共享状态管理flutter官方提供了两种方案：

1. InheritedWidget
2. Provider（Provider是目前官方推荐的全局状态管理工具）

一、InheritedWidget 用法示例:

1. InheritedWidget 用法
① 继承 InheritedWidget
② 实现updateShouldNotify方法
③ 定义一个需要共享的状态，如counter；
④ 通过静态对象拿到对象，如counter;

InheritedWidget 写法如下：

class FCounterWidget extends  InheritedWidget {
  // 1.共享的数据
  final int counter;

  // 2.定义构造方法
  FCounterWidget({this.counter, Widget child}): super(child: child);

  // 3.获取组件最近的当前InheritedWidget
  static FCounterWidget of(BuildContext context) {
    // 沿着Element树, 去找到最近的HYCounterElement, 从Element中取出Widget对象
    return context.dependOnInheritedWidgetOfExactType();
  }


  // 4.绝对要不要回调State中的didChangeDependencies
  // 如果返回true: 执行依赖当期的InheritedWidget的State中的didChangeDependencies
  @override
  bool updateShouldNotify(FCounterWidget oldWidget) {
    return oldWidget.counter != counter;
  }
}

DEMO用法：

class InheritedWidgetPage extends StatefulWidget {
  @override
  _InheritedWidgetPageState createState() => _InheritedWidgetPageState();
}

class _InheritedWidgetPageState extends State<InheritedWidgetPage> {
  int _counter = 100;
  @override
  Widget build(BuildContext context) {
    return  Scaffold(
      appBar: AppBar(
        title: Text("InheritedWidget"),
      ),
      body: FCounterWidget(
        counter: _counter,
        child: Center(
          child: Column(
            children: <Widget>[
              Text("当前计数: $_counter", style: TextStyle(fontSize: 30),),
            ],
          ),
        ),
      ),

      floatingActionButton:FloatingActionButton(
        child: Icon(Icons.add),
          onPressed: () {
            setState(() {
              _counter += 1;
            });
          },
      ),
    );
  }
}

二、Provider 用法示例:

2.Provider 用法 [官方推荐]
前提： 在项目中添加依赖 provider: ^4.1.2
① 创建需要共享的数据
② 在main函数中ChangeNotifierProvider
③ 使用共享的数据

核心代码如下：

//1.创建自己要共享的数据
class ContentViewModel extends ChangeNotifier {
  int _counter = 100;
  int get counter => _counter;
  set counter(int value) {
    _counter = value;
    notifyListeners();
  }
}

//2.在应用的main函数中使用ChangeNotifierProvider
void main() {
  runApp(
      ChangeNotifierProvider(
        create: (ctx) => ContentViewModel(),
        child: MyApp(),
      )
  );
}

//3.在其他位置使用共享的数据
class ProviderWidget extends StatefulWidget {
  @override
  _ProviderWidgetState createState() => _ProviderWidgetState();
}

class _ProviderWidgetState extends State<ProviderWidget> {
  @override
  Widget build(BuildContext context) {
    int counter = Provider.of<ContentViewModel>(context).counter;
    return  Scaffold(
      appBar: AppBar(
        title: Text("InheritedWidget"),
      ),
      body: Text("当前计数: $counter", style: TextStyle(fontSize: 30)),

      floatingActionButton:Consumer<ContentViewModel>(
          builder:(context,contentVM,child) {
            return FloatingActionButton(
              child: Icon(Icons.adb),
              onPressed: () {
                contentVM.counter +=1;
              },
            );
          }
      )
    );
  }
}

int counter = Provider.of<ContentViewModel>(context).counter;这种共享数据的方式不好，写法不推荐，一般更推荐下面的写法：

class _ProviderWidgetState extends State<ProviderWidget> {
  @override
  Widget build(BuildContext context) {
    int counter = Provider.of<ContentViewModel>(context).counter;
    return  Scaffold(
        appBar: AppBar(
          title: Text("InheritedWidget"),
        ),
        body: Consumer<ContentViewModel>(
            builder:(context,contentVM,child) {
              return Text("当前计数: $counter", style: TextStyle(fontSize: 30));
            }
        ),

        floatingActionButton:Consumer<ContentViewModel>(
            builder:(context,contentVM,child) {
              return FloatingActionButton(
                child: Icon(Icons.adb),
                onPressed: () {
                  contentVM.counter +=1;
                },
              );
            }
        )
    );
  }
}

Provider.of(context) VS Consumer 对比：

① 当Provider.of(context)中的数据发生改变时, Provider.of(context)所在的Widget将整个build方法重新构建；
① Consumer方法不会执行整个build,只会重新执行Consumer里面的build,此外Consumer方法里面的child也可以优化控件是否重新构建。

所以一般项目开发中用Consumer居多

如上述floatingActionButton的代码可优化为如下代码：

  ///第一种优化方案 Icon 不需要重新构建
        floatingActionButton:Consumer<ContentViewModel>(
            builder:(context,contentVM,child) {
              return FloatingActionButton(
                child: child,
                onPressed: () {
                  contentVM.counter +=1;
                },
              );
            },
          child:Icon(Icons.adb),
        ),

  ///第二种优化方案 FloatingActionButton 也不需要重新构建
      floatingActionButton:Selector<ContentViewModel,ContentViewModel>(
        selector: (context,contentVM) => contentVM,
        //是否重新构建 true 是 false 否
        shouldRebuild: (prev,next) => false,
        builder:(context,contentVM,child) {
          return FloatingActionButton(
            child: child,
            onPressed: () {
              contentVM.counter +=1;
            },
          );
        },
        child:Icon(Icons.adb),
      ),

上述情况仅涉及一个ContentViewModel需要共享，但实际开发中有很多需要共享，比如用户信息，购物车，偏好设置等，假如我们又有一个用户信息的UserViewModel，所以此时main函数creaet方法需要优化为如下代码：

void main() {
  final userInfo = UserInfo("allison", "女", 18);
  runApp(
    //注册多个provider
      MultiProvider(
        providers: [
          ChangeNotifierProvider(create: (context) => ContentViewModel()),
          ChangeNotifierProvider(create: (context) => UserViewModel(userInfo)),
        ],
      ),
  );

  //注册单个通知
//  runApp(
//      ChangeNotifierProvider(
//        create: (ctx) => ContentViewModel(),
//        child: MyApp(),
//      )
//  );
}

这样我们就可以实现多个provider的注册了，实现数据的共享。
其实像类似Consumer还有一些高级的用法，如：Consumer2，Consumer3，Consumer4，Consumer5，Consumer6等一些高级函数，比如：Consumer2可以实现两个viewModel数据拼接的展示，如：
例：想要展示ContentViewModel 和 UserViewModel的数据，可使用Consumer2，代码如下：

// Consumer常规用法
 Consumer<UserViewModel>(
        builder: (context,userVM,child) {
          return Text("当前计数: ${userVM.user.name}", style: TextStyle(fontSize: 30),);
        },
      )

//Consumer2高级用法
Consumer2<UserViewModel,ContentViewModel>(
        builder: (context,userVM,contentVM,child) {
          return Text("名字: ${userVM.user.name} 当前计数:${contentVM.counter}",
            style: TextStyle(fontSize: 30),);
        },
      )

更多高阶用法，期待后续发现中。
DEMO下载