Flutter 之旅（四）—— Provider 状态管理

Flutter 之旅（四）—— Provider 状态管理

在 flutter 开发中，我们经常会遇到，页面之间传值、以及状态管理 等操作，

官方在最早提出的方案是在 StatefulWidget 中去处理，但是此方案非常繁琐切容易出错，对刚入门的新手非常不友好。。

随后市面上就出现了一些解决方案，其中 最火的是 Redux ，其思想来源于前端，对与移动端的开发者（本人恰好就是）理解起来会话一些时间。。 又兴趣的同学可以自行了解一下 https://blog.csdn.net/xcf111/article/details/90752577 这篇文章还不错。

那么下面介绍今天的主角 Provider，他是 官方推荐 的一款 状态管理框架，学习官方推荐 你懂的 错不了 嘿嘿～～ 。

1 、集成

在 pubspec.yaml 文件下 添加

#使用包管理
dependencies:
  provider: 3.0.0+1

2、基本使用

比如想要管理 UserInfo 这个实体类的 状态

class UserInfo extends Object {
  String name;

  UserInfo({this.name});

  UserInfo.fromJson(Map json) {
    name = json['name'];
  }
  Map toJson() {

    final Map data = Map ();
    data['name'] = this.name;
    return data;
  }
}

UserModel 去继承 UserInfo

注意：这里一定要 实现 ChangeNotifier 需要用它的 notifyListeners() 来通知状态变化

这里就只写了一个 setName 的方法用来 修改参数

class UserModel extends UserInfo with ChangeNotifier {
  UserInfo _userInfo = UserInfo(name: '华为加油');
  String get name => _userInfo.name;
  void setName (name) {
    _userInfo.name = name;
    notifyListeners();
  }
}

实际开发中 我门会去管理多个 XXXModel，在Store 中将它们管理起来

注意：在 init 方法 返回 MultiProvider 本身继承了 StatelessWidget，

所以我们可以将 init 直接作为 一个 Widget 作为根布局。

class Store {
  static BuildContext context;
  static BuildContext widgetCtx;
  static init({context, child}) {  //初始化 Store 
    return MultiProvider(
      providers: [  // 将需要的 XXXModel 放入下面的数组中 
        ChangeNotifierProvider(builder: (_) => Counter()),
        ChangeNotifierProvider(builder: (_) => UserModel(),)
      ],
      child: child,
    );
  }
  // 通过一个泛型对象去获取里面的值
  static T value(context) {
    return Provider.of(context);
  }
  // 可以在这个方法中，返回一个视图，还可以作一些打印等操作，
  static Consumer connect({builder, child}) {
    return Consumer(builder: builder, child: child);
  }
}

准备工作完毕，看看具体使用

比如：我们期望在一开始就要使用它 main.dart 文件中去初始化使用

Store.init() 并且 在child 里放入根布局。

class MyApp extends StatelessWidget {
  MyApp({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Store.init(
       context: context,
       child: MaterialApp(
         title: '翻过吧章鱼',
         debugShowCheckedModeBanner: false,
         theme: ThemeData(
             primaryColor: Colors.blueAccent
         ),
           home:IndexPage()
       )
    );
  }

修改操作

print(Store.value(context).name)); // 华为加油
Store.value(context).setName(“中国加油”); //修改后，页面中的数据也会随之刷新。
print(Store.value(context).name)); // 中国加油
使用起来还是比较简单的哦～～

上面介绍了 provider 的简单用法，通过它我们已经可以做很多事情了，

后面我会介绍一些 provider 的高级用法 （持续更新中。。。）