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

一、ProxyProvider简介在Flutter开发中我们经常需要创建依赖其他Provider的Provider。ProxyProvider是Provider库提供的一种特殊Provider专门用于创建依赖其他Provider的Provider。ProxyProvider的核心特点依赖其他ProviderProxyProvider可以依赖一个或多个其他Provider自动更新当依赖的Provider变化时ProxyProvider会自动重新计算支持多依赖支持ProxyProvider2/3/4等多依赖版本支持ChangeNotifierChangeNotifierProxyProvider用于ChangeNotifier类型previous参数优化可以使用previous参数避免不必要的重建二、基本用法2.1 创建ProxyProviderMultiProvider(providers:[ProviderString(create:(_)Hello),ProxyProviderString,String(update:(context,value,previous)$valueWorld!,),],child:ConsumerString(builder:(context,value,child)Text(value),),)三、ProxyProvider2/3/43.1 依赖两个ProviderProxyProvider2UserProvider,CartProvider,OrderSummary(update:(context,user,cart,previous){returnOrderSummary(userName:user.name,totalAmount:cart.totalAmount,itemCount:cart.itemCount,);},)3.2 依赖三个ProviderProxyProvider3UserProvider,CartProvider,CouponProvider,CheckoutData(update:(context,user,cart,coupon,previous){returnCheckoutData(user:user,cart:cart,discount:coupon.calculateDiscount(cart.totalAmount),);},)四、ChangeNotifierProxyProvider4.1 创建依赖其他Provider的ChangeNotifierMultiProvider(providers:[ProviderApiService(create:(_)ApiService()),ChangeNotifierProxyProviderApiService,DataProvider(create:(context)DataProvider(),update:(context,apiService,dataProvider){returndataProvider!..apiServiceapiService;},),],child:constMyApp(),)4.2 在ChangeNotifier中使用ProxyProviderclassDataProviderextendsChangeNotifier{lateApiService_apiService;ListItem_items[];ListItemgetitems_items;setapiService(ApiServicevalue){_apiServicevalue;_loadData();}Futurevoid_loadData()async{_itemsawait_apiService.fetchItems();notifyListeners();}}五、FutureProxyProvider5.1 创建依赖其他Provider的FutureProviderMultiProvider(providers:[ProviderString(create:(_)api_key),FutureProxyProviderString,User(update:(context,apiKey,previous){returnfetchUser(apiKey);},initialData:User.empty(),),],child:constUserPage(),)六、StreamProxyProvider6.1 创建依赖其他Provider的StreamProviderMultiProvider(providers:[ProviderString(create:(_)channel_id),StreamProxyProviderString,ListMessage(update:(context,channelId,previous){returnsubscribeToChannel(channelId);},initialData:const[],),],child:constChatPage(),)七、previous参数的使用7.1 使用previous参数优化性能ProxyProviderUserProvider,String(update:(context,user,previous){if(previous!nullprevious.contains(user.name)){returnprevious;}return欢迎回来,${user.name}!;},)7.2 previous参数的作用previous参数表示上一次计算的结果优化性能可以通过比较previous和当前值避免不必要的重建适用场景当计算结果可能不变时可以使用previous参数优化八、完整示例8.1 创建用户ProviderclassUserProviderextendsChangeNotifier{String_name张三;Stringgetname_name;voidupdateName(StringnewName){_namenewName;notifyListeners();}}8.2 创建购物车ProviderclassCartProviderextendsChangeNotifier{double _totalAmount0;int _itemCount0;doublegettotalAmount_totalAmount;intgetitemCount_itemCount;voidaddItem(double price){_totalAmountprice;_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()),ProxyProvider2UserProvider,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(){returnConsumerOrderSummary(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.readUserProvider().updateName(value);},),constSizedBox(height:16),ElevatedButton(onPressed:()context.readCartProvider().addItem(19.9),child:constText(添加商品(¥19.9)),),],);}}8.5 代码解析在这个演示页面中基本用法使用ProxyProvider2创建依赖UserProvider和CartProvider的OrderSummary多依赖ProxyProvider展示了如何依赖多个ProviderChangeNotifierProxyProvider展示了如何创建依赖其他Provider的ChangeNotifierprevious参数优化展示了如何使用previous参数优化性能九、ProxyProvider类型总结类型用途ProxyProvider创建依赖一个Provider的不可变ProviderProxyProvider2/3/4创建依赖多个Provider的不可变ProviderChangeNotifierProxyProvider创建依赖其他Provider的ChangeNotifierFutureProxyProvider创建依赖其他Provider的FutureProviderStreamProxyProvider创建依赖其他Provider的StreamProvider十、关键要点10.1 ProxyProvider用于创建依赖其他Provider的ProviderProxyProvider适合创建依赖其他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未声明ProxyProviderString,String(update:(context,value,previous)$valueWorld!,),],child:constMyApp(),)正确先声明依赖的ProviderMultiProvider(providers:[ProviderString(create:(_)Hello),ProxyProviderString,String(update:(context,value,previous)$valueWorld!,),],child:constMyApp(),)11.2 错误依赖的Provider顺序错误MultiProvider(providers:[// 错误ProxyProvider依赖UserProvider但UserProvider在后面声明ProxyProviderUserProvider,String(update:(context,user,previous)user.name,),ChangeNotifierProvider(create:(_)UserProvider()),],child:constMyApp(),)正确按依赖顺序声明ProviderMultiProvider(providers:[ChangeNotifierProvider(create:(_)UserProvider()),// 正确UserProvider在ProxyProvider之前声明ProxyProviderUserProvider,String(update:(context,user,previous)user.name,),],child:constMyApp(),)11.3 错误忘记处理previous参数// 错误每次都重新创建对象即使数据没有变化ProxyProviderUserProvider,OrderSummary(update:(context,user,previous){returnOrderSummary(userName:user.name);},)正确使用previous参数优化// 正确只有当用户名变化时才重新创建对象ProxyProviderUserProvider,OrderSummary(update:(context,user,previous){if(previous!nullprevious.userNameuser.name){returnprevious;}returnOrderSummary(userName:user.name);},)十二、最佳实践12.1 合理划分依赖关系将相关的Provider组织在一起清晰地表达依赖关系MultiProvider(providers:[ProviderApiService(create:(_)ApiService()),ProviderStorageService(create:(_)StorageService()),ChangeNotifierProxyProvider2ApiService,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参数避免不必要的重建ProxyProviderUserProvider,String(update:(context,user,previous){if(previous!nullprevioususer.name){returnprevious;}return欢迎,${user.name}!;},)12.4 避免过度使用ProxyProvider不要为简单的计算使用ProxyProvider只有当确实需要依赖其他Provider时才使用// 不推荐简单计算不需要ProxyProviderProxyProviderString,String(update:(context,value,previous)value.toUpperCase(),)// 推荐直接在Widget中计算ConsumerString(builder:(context,value,child)Text(value.toUpperCase()),)十三、总结ProxyProvider是创建依赖其他Provider的Provider的强大工具它提供了以下功能依赖一个或多个其他Provider当依赖的Provider变化时自动重新计算支持多种类型的ProxyProviderprevious参数可以优化性能在实际开发中建议遵循以下原则合理划分依赖关系使用immutable数据类使用previous参数优化性能避免过度使用ProxyProvider按依赖顺序声明Provider希望本文能帮助你掌握ProxyProvider的使用并在实际项目中正确处理依赖关系