Flutter状态管理Provider的使用示例详解

籍恬静

目录

• 前言
  
• 计数器
  
• 全局状态
  
• 总结
  

前言

Provider是三大主流状态管理框架官方推荐使用的框架，它是基于官方数据共享组件

1. InheritedWidget

复制代码

实现的，通过数据改变调用生命周期中的

1. didChangeDependencies()

复制代码

方法，来实现状态的通知改变。

1. InheritedWidget

复制代码

的使用可以参考我之前的这篇Flutter中几种数据传递的应用总结。

计数器

还是以计数器为例，这次通过

1. Provider

复制代码

实现，

1. provider

复制代码

相较于

1. bloc

复制代码

并没有那么强制性分层，所以这里我们自己分为数据层(state)、逻辑处理层(provider)、UI层(view)。
首先创建文件夹：

数据层： 用来保存数据，基本和

1. bloc

复制代码

一样。

1. /// 数据层
   
2. class PNumState {
   
3.   int num;
   
4.   // 初始化
   
5.   PNumState({this.num = 0});
   
6.   PNumState clone() {
   
7.     // 获取最新对象
   
8.     return PNumState()..num = num;
   
9.   }
   
10. }

复制代码

业务逻辑层 ChangeNotifier： 用来处理页面的逻辑，和

1. bloc

复制代码

相比较代码较为简洁，

1. ChangeNotifier

复制代码

继承自

1. Listenable

复制代码

,Listenable是一个维护监听者列表的对象，通过它我们可以调用

1. notifyListeners();

复制代码

方法发送通知监听者实现页面状态的更新。

1. /// 业务逻辑层
   
2. class PNumProvider extends ChangeNotifier {
   
3. /// 初始化数据对象
   
4.   final state = PNumState(num: 0);
   
5.   /// 自增计数方法
   
6.   add() {
   
7.     state.num++;
   
8.     notifyListeners();
   
9.   }
   
10. }

复制代码

UI层： 根结点返回

1. ChangeNotifierProvider

复制代码

,通过它可以让provider实例和页面所有子节点进行绑定，实现

1. create

复制代码

方法和

1. builder

复制代码

方法分别返回

1. provider

复制代码

和我们的页面

1. Widget

复制代码

。 对于需要更新的组件使用

1. Consumer<P>

复制代码

包裹，当范型里的实例调用

1. notifyListeners

复制代码

的时候，

1. builder

复制代码

返回的

1. Widget

复制代码

将得到通知，从而达到数据的更新。

1. /// UI层
   
2. class PNumPage extends StatelessWidget {
   
3.   @override
   
4.   Widget build(BuildContext context) {
   
5.   // 通过ChangeNotifierProvider将UI层和逻辑层进行绑定
   
6.     return ChangeNotifierProvider(
   
7.       create: (BuildContext context) => PNumProvider(),
   
8.       builder: (context, child) => _buildPage(context),
   
9.     );
   
10.   }
    
11.   Widget _buildPage(BuildContext context) {
    
12.   // 获取provider示例
    
13.     final provider = context.read<PNumProvider>();
    
14.     return Stack(
    
15.       children: [
    
16.         Consumer<PNumProvider>(
    
17.           builder: (context, provider, child) {
    
18.           // builder方法回返回provider实例，和上面获取的实例一样
    
19.             return Center(child: Text("点击了${provider.state.num}次"));
    
20.           },
    
21.         ),
    
22.         Positioned(
    
23.           child: FloatingActionButton(
    
24.             onPressed: () {
    
25.             // 调用自增方法
    
26.               provider.add();
    
27.             },
    
28.             child: Icon(Icons.add),
    
29.           ),
    
30.           bottom: 20,
    
31.           right: 20,
    
32.         )
    
33.       ],
    
34.     );
    
35.   }
    
36. }

复制代码

效果：

当然上方的代码也可以通过小呆呆的插件自动生成。

全局状态

1. provider

复制代码

全局状态使用也非常的方便，我们刚才的逻辑层需要在顶层runApp方法里进行初始化

1. provider

复制代码

，使用

1. MultiProvider

复制代码

可以同时管理多个全局状态。

1. //全部状态管理
   
2. class Status {
   
3.   // 全局初始化
   
4.   static Widget init(Widget child) {
   
5.     //使用 MultiProvider 设置多个Provider 状态
   
6.     return MultiProvider(
   
7.       providers: [
   
8.         ChangeNotifierProvider(
   
9.         // 全局管理app主题
   
10.             create: (_) => AppTheme(AppTheme.getDefaultTheme())),
    
11.       ],
    
12.       child: child,
    
13.     );
    
14.   }
    
15. }
    
16. // 在 runApp方法之前初始化
    
17. runApp(Status.init(MyApp()));

复制代码

在接收的地方还是一样使用

1. Consumer

复制代码

包裹组件，代码略...

总结

1. provider

复制代码

相较于

1. bloc

复制代码

没有强制的分层，即使是数据也是我们自己分出来的，不分出来直接写在逻辑层也是可以的，所以

1. provider

复制代码

的使用感觉更加的灵活一些。对于不同项目我们可以使用不同的框架，开发人多建议

1. bloc

复制代码

强制代码分层,如果人少就

1. provider

复制代码

。
以上就是Flutter状态管理Provider的使用示例详解的详细内容，更多关于Flutter状态管理Provider的资料请关注晓枫资讯其它相关文章！

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

郦晓曼

路过，支持一下

一被提问就发呆

顶顶更健康！！！

胡肉肉湃

感谢楼主分享。

山清昶

感谢楼主，顶。