鸿蒙Flutter ProxyProvider代理Provider：依赖其他Provider的状态


一、ProxyProvider简介

在Flutter开发中，我们经常需要创建依赖其他Provider的Provider。ProxyProvider是Provider库提供的一种特殊Provider，专门用于创建依赖其他Provider的Provider。

ProxyProvider的核心特点：

  • 依赖其他Provider：ProxyProvider可以依赖一个或多个其他Provider
  • 自动更新：当依赖的Provider变化时，ProxyProvider会自动重新计算
  • 支持多依赖：支持ProxyProvider2/3/4等多依赖版本
  • 支持ChangeNotifier：ChangeNotifierProxyProvider用于ChangeNotifier类型
  • previous参数优化：可以使用previous参数避免不必要的重建

二、基本用法

2.1 创建ProxyProvider

MultiProvider(providers:[Provider<String>(create:(_)=>'Hello'),ProxyProvider<String,String>(update:(context,value,previous)=>'$valueWorld!',),],child:Consumer<String>(builder:(context,value,child)=>Text(value),),)

三、ProxyProvider2/3/4

3.1 依赖两个Provider

ProxyProvider2<UserProvider,CartProvider,OrderSummary>(update:(context,user,cart,previous){returnOrderSummary(userName:user.name,totalAmount:cart.totalAmount,itemCount:cart.itemCount,);},)

3.2 依赖三个Provider

ProxyProvider3<UserProvider,CartProvider,CouponProvider,CheckoutData>(update:(context,user,cart,coupon,previous){returnCheckoutData(user:user,cart:cart,discount:coupon.calculateDiscount(cart.totalAmount),);},)

四、ChangeNotifierProxyProvider

4.1 创建依赖其他Provider的ChangeNotifier

MultiProvider(providers:[Provider<ApiService>(create:(_)=>ApiService()),ChangeNotifierProxyProvider<ApiService,DataProvider>(create:(context)=>DataProvider(),update:(context,apiService,dataProvider){returndataProvider!..apiService=apiService;},),],child:constMyApp(),)

4.2 在ChangeNotifier中使用ProxyProvider

classDataProviderextendsChangeNotifier{lateApiService_apiService;List<Item>_items=[];List<Item>getitems=>_items;setapiService(ApiServicevalue){_apiService=value;_loadData();}Future<void>_loadData()async{_items=await_apiService.fetchItems();notifyListeners();}}

五、FutureProxyProvider

5.1 创建依赖其他Provider的FutureProvider

MultiProvider(providers:[Provider<String>(create:(_)=>'api_key'),FutureProxyProvider<String,User>(update:(context,apiKey,previous){returnfetchUser(apiKey);},initialData:User.empty(),),],child:constUserPage(),)

六、StreamProxyProvider

6.1 创建依赖其他Provider的StreamProvider

MultiProvider(providers:[Provider<String>(create:(_)=>'channel_id'),StreamProxyProvider<String,List<Message>>(update:(context,channelId,previous){returnsubscribeToChannel(channelId);},initialData:const[],),],child:constChatPage(),)

七、previous参数的使用

7.1 使用previous参数优化性能

ProxyProvider<UserProvider,String>(update:(context,user,previous){if(previous!=null&&previous.contains(user.name)){returnprevious;}return'欢迎回来,${user.name}!';},)

7.2 previous参数的作用

  • previous参数：表示上一次计算的结果
  • 优化性能：可以通过比较previous和当前值，避免不必要的重建
  • 适用场景：当计算结果可能不变时，可以使用previous参数优化

八、完整示例

8.1 创建用户Provider

classUserProviderextendsChangeNotifier{String_name='张三';Stringgetname=>_name;voidupdateName(StringnewName){_name=newName;notifyListeners();}}

8.2 创建购物车Provider

classCartProviderextendsChangeNotifier{double _totalAmount=0;int _itemCount=0;doublegettotalAmount=>_totalAmount;intgetitemCount=>_itemCount;voidaddItem(double price){_totalAmount+=price;_itemCount++;notifyListeners();}}

8.3 创建订单汇总数据类

classOrderSummary{finalStringuserName;finaldouble totalAmount;finalint itemCount;constOrderSummary({requiredthis.userName,requiredthis.totalAmount,requiredthis.itemCount,});}

8.4 创建ProxyProvider页面

classProxyProviderPageextendsStatelessWidget{constProxyProviderPage({super.key});@overrideWidgetbuild(BuildContextcontext){returnMultiProvider(providers:[ChangeNotifierProvider(create:(_)=>UserProvider()),ChangeNotifierProvider(create:(_)=>CartProvider()),ProxyProvider2<UserProvider,CartProvider,OrderSummary>(update:(context,user,cart,previous){returnOrderSummary(userName:user.name,totalAmount:cart.totalAmount,itemCount:cart.itemCount,);},),],child:Scaffold(appBar:AppBar(title:constText('ProxyProvider演示')),body:ListView(padding:constEdgeInsets.all(16),children:[_buildSection('基本用法',_basicUsage()),_buildSection('多依赖ProxyProvider',_multiDependencyUsage()),_buildSection('ChangeNotifierProxyProvider',_changeNotifierProxyUsage()),_buildSection('previous参数优化',_previousParameterUsage()),],),),);}Widget_buildSection(Stringtitle,Widgetcontent){returnCard(margin:constEdgeInsets.only(bottom:16),child:Padding(padding:constEdgeInsets.all(16),child:Column(crossAxisAlignment:CrossAxisAlignment.start,children:[Text(title,style:constTextStyle(fontSize:18,fontWeight:FontWeight.bold)),constSizedBox(height:12),content,],),),);}Widget_basicUsage(){returnConsumer<OrderSummary>(builder:(context,summary,child){returnColumn(children:[Text('用户名:${summary.userName}',style:constTextStyle(fontSize:16)),Text('总金额: ¥${summary.totalAmount.toStringAsFixed(2)}',style:constTextStyle(fontSize:16)),Text('商品数量:${summary.itemCount}',style:constTextStyle(fontSize:16)),],);},);}Widget_multiDependencyUsage(){returnColumn(children:[TextField(decoration:constInputDecoration(labelText:'输入用户名'),onSubmitted:(value){context.read<UserProvider>().updateName(value);},),constSizedBox(height:16),ElevatedButton(onPressed:()=>context.read<CartProvider>().addItem(19.9),child:constText('添加商品(¥19.9)'),),],);}}

8.5 代码解析

在这个演示页面中：

  1. 基本用法：使用ProxyProvider2创建依赖UserProvider和CartProvider的OrderSummary
  2. 多依赖ProxyProvider：展示了如何依赖多个Provider
  3. ChangeNotifierProxyProvider：展示了如何创建依赖其他Provider的ChangeNotifier
  4. previous参数优化：展示了如何使用previous参数优化性能

九、ProxyProvider类型总结

类型用途
ProxyProvider创建依赖一个Provider的不可变Provider
ProxyProvider2/3/4创建依赖多个Provider的不可变Provider
ChangeNotifierProxyProvider创建依赖其他Provider的ChangeNotifier
FutureProxyProvider创建依赖其他Provider的FutureProvider
StreamProxyProvider创建依赖其他Provider的StreamProvider

十、关键要点

10.1 ProxyProvider用于创建依赖其他Provider的Provider

ProxyProvider适合创建依赖其他Provider的Provider，当依赖的Provider变化时，自动重新计算。

10.2 支持ProxyProvider2/3/4等多依赖版本

ProxyProvider支持多个依赖，可以根据需要选择不同的版本。

10.3 ChangeNotifierProxyProvider用于ChangeNotifier类型

对于ChangeNotifier类型，使用ChangeNotifierProxyProvider而不是普通的ProxyProvider。

10.4 previous参数可以用于优化，避免不必要的重建

通过比较previous和当前值，可以避免不必要的重建，提高性能。

10.5 当依赖的Provider变化时，ProxyProvider会自动重新计算

ProxyProvider会自动监听依赖的Provider变化，当依赖变化时重新计算。

十一、常见错误

11.1 错误：依赖的Provider未声明

MultiProvider(providers:[// 错误：依赖的Provider未声明ProxyProvider<String,String>(update:(context,value,previous)=>'$valueWorld!',),],child:constMyApp(),)

正确：先声明依赖的Provider

MultiProvider(providers:[Provider<String>(create:(_)=>'Hello'),ProxyProvider<String,String>(update:(context,value,previous)=>'$valueWorld!',),],child:constMyApp(),)

11.2 错误：依赖的Provider顺序错误

MultiProvider(providers:[// 错误：ProxyProvider依赖UserProvider，但UserProvider在后面声明ProxyProvider<UserProvider,String>(update:(context,user,previous)=>user.name,),ChangeNotifierProvider(create:(_)=>UserProvider()),],child:constMyApp(),)

正确：按依赖顺序声明Provider

MultiProvider(providers:[ChangeNotifierProvider(create:(_)=>UserProvider()),// 正确：UserProvider在ProxyProvider之前声明ProxyProvider<UserProvider,String>(update:(context,user,previous)=>user.name,),],child:constMyApp(),)

11.3 错误：忘记处理previous参数

// 错误：每次都重新创建对象，即使数据没有变化ProxyProvider<UserProvider,OrderSummary>(update:(context,user,previous){returnOrderSummary(userName:user.name);},)

正确：使用previous参数优化

// 正确：只有当用户名变化时才重新创建对象ProxyProvider<UserProvider,OrderSummary>(update:(context,user,previous){if(previous!=null&&previous.userName==user.name){returnprevious;}returnOrderSummary(userName:user.name);},)

十二、最佳实践

12.1 合理划分依赖关系

将相关的Provider组织在一起，清晰地表达依赖关系：

MultiProvider(providers:[Provider<ApiService>(create:(_)=>ApiService()),Provider<StorageService>(create:(_)=>StorageService()),ChangeNotifierProxyProvider2<ApiService,StorageService,DataProvider>(create:(context)=>DataProvider(),update:(context,api,storage,data){returndata!..updateDependencies(api,storage);},),],child:constMyApp(),)

12.2 使用immutable数据类

对于ProxyProvider的输出，使用immutable数据类可以提高性能：

@immutableclassOrderSummary{finalStringuserName;finaldouble totalAmount;constOrderSummary({requiredthis.userName,requiredthis.totalAmount,});}

12.3 使用previous参数优化性能

当计算结果可能不变时，使用previous参数避免不必要的重建：

ProxyProvider<UserProvider,String>(update:(context,user,previous){if(previous!=null&&previous==user.name){returnprevious;}return'欢迎,${user.name}!';},)

12.4 避免过度使用ProxyProvider

不要为简单的计算使用ProxyProvider，只有当确实需要依赖其他Provider时才使用：

// 不推荐：简单计算不需要ProxyProviderProxyProvider<String,String>(update:(context,value,previous)=>value.toUpperCase(),)// 推荐：直接在Widget中计算Consumer<String>(builder:(context,value,child)=>Text(value.toUpperCase()),)

十三、总结

ProxyProvider是创建依赖其他Provider的Provider的强大工具，它提供了以下功能：

  • 依赖一个或多个其他Provider
  • 当依赖的Provider变化时自动重新计算
  • 支持多种类型的ProxyProvider
  • previous参数可以优化性能

在实际开发中，建议遵循以下原则：

  1. 合理划分依赖关系
  2. 使用immutable数据类
  3. 使用previous参数优化性能
  4. 避免过度使用ProxyProvider
  5. 按依赖顺序声明Provider

希望本文能帮助你掌握ProxyProvider的使用，并在实际项目中正确处理依赖关系！