鸿蒙Flutter ChangeNotifier实现：购物车状态管理实战

一、ChangeNotifier简介ChangeNotifier是Flutter SDK中提供的一个简单的可监听对象用于实现状态变化通知机制。它是Provider状态管理方案的核心数据模型类几乎所有的Provider状态管理都基于ChangeNotifier。1.1 什么是ChangeNotifierChangeNotifier是一个抽象类它实现了Listenable接口提供了以下核心功能添加和移除监听者当状态变化时通知所有监听者管理监听者的生命周期1.2 ChangeNotifier的工作原理ChangeNotifier的工作原理非常简单当状态变化时调用notifyListeners()方法notifyListeners()会遍历所有注册的监听者每个监听者收到通知后执行相应的回调函数在Provider中这个回调函数会触发Widget的重建二、创建CartProvider2.1 定义数据模型首先我们需要定义购物车中的商品数据模型classCartItem{finalStringid;finalStringname;finaldouble price;int quantity;CartItem({requiredthis.id,requiredthis.name,requiredthis.price,this.quantity1,});}这个数据模型包含了商品的基本信息id商品唯一标识name商品名称price商品价格quantity商品数量默认值为12.2 创建CartProvider接下来创建CartProvider类继承自ChangeNotifierclassCartProviderextendsChangeNotifier{// 私有状态finalMapString,CartItem_items{};// 公开的只读视图MapString,CartItemgetitemsMap.unmodifiable(_items);// 获取商品数量intgetitemCount{return_items.values.fold(0,(sum,item)sumitem.quantity);}// 获取总金额doublegettotalAmount{return_items.values.fold(0.0,(sum,item)sumitem.price*item.quantity);}}在这个类中我们定义了私有状态_items是一个Map用于存储购物车中的商品key是商品idvalue是CartItem对象。公开的只读视图itemsgetter返回一个不可修改的Map防止外部直接修改状态。计算属性itemCount计算购物车中所有商品的总数量totalAmount计算购物车中所有商品的总金额2.3 添加状态修改方法现在添加状态修改方法// 添加商品voidaddItem(StringproductId,Stringname,double price){if(_items.containsKey(productId)){// 商品已存在增加数量_items.update(productId,(existingItem)CartItem(id:existingItem.id,name:existingItem.name,price:existingItem.price,quantity:existingItem.quantity1,));}else{// 添加新商品_items.putIfAbsent(productId,()CartItem(id:productId,name:name,price:price,));}notifyListeners();}// 减少商品数量voidremoveItem(StringproductId){if(!_items.containsKey(productId)){return;}if(_items[productId]!.quantity1){_items.update(productId,(existingItem)CartItem(id:existingItem.id,name:existingItem.name,price:existingItem.price,quantity:existingItem.quantity-1,));}else{_items.remove(productId);}notifyListeners();}// 移除商品voidremoveSingleItem(StringproductId){_items.remove(productId);notifyListeners();}// 清空购物车voidclear(){_items.clear();notifyListeners();}这些方法实现了购物车的基本操作addItem添加商品到购物车如果商品已存在则增加数量removeItem减少商品数量如果数量为1则移除商品removeSingleItem直接移除商品不管数量多少clear清空购物车注意每个方法在修改状态后都调用了notifyListeners()这是触发UI更新的关键。三、ChangeNotifier关键方法3.1 notifyListeners()这是最常用的方法用于通知所有监听者状态已变化。当调用这个方法时所有注册的监听者都会收到通知并执行相应的回调函数。3.2 addListener(VoidCallback)用于添加监听者。监听者是一个VoidCallback函数当状态变化时会被调用。3.3 removeListener(VoidCallback)用于移除监听者。当不再需要监听时应该调用这个方法避免内存泄漏。3.4 dispose()用于释放资源移除所有监听者。当ChangeNotifier不再使用时应该调用这个方法。四、最佳实践4.1 状态私有化提供只读访问这是非常重要的一点。状态应该私有化通过getter提供只读访问防止外部直接修改状态。// 错误示例状态公开classBadProviderextendsChangeNotifier{ListStringitems[];// 外部可以直接修改}// 正确示例状态私有化classGoodProviderextendsChangeNotifier{finalListString_items[];ListStringgetitemsList.unmodifiable(_items);// 提供只读访问}4.2 使用计算属性计算属性可以简化代码提高可读性。它们只在需要时计算不会缓存结果但对于简单的计算来说性能影响可以忽略不计。intgetitemCount_items.length;doublegettotalAmount_calculateTotal();4.3 状态变化后调用notifyListeners这是最基本的要求。如果忘记调用notifyListeners()监听者将不会收到通知UI也不会更新。voidaddItem(CartItemitem){_items.add(item);notifyListeners();// 必须调用}4.4 避免在异步操作中直接调用notifyListeners在异步操作中应该确保在正确的时机调用notifyListeners()。通常应该在数据获取完成后再调用。FuturevoidfetchData()async{finaldataawaitapi.fetch();_itemsdata;notifyListeners();// 在数据获取完成后调用}五、注意事项5.1 notifyListeners()必须在状态变化后调用这是最常见的错误之一。如果在状态变化前调用notifyListeners()监听者收到的将是旧的数据。5.2 避免在build方法中调用notifyListeners()在build方法中调用notifyListeners()会导致无限循环因为notifyListeners()会触发重建而重建又会调用build方法。5.3 不需要监听时记得调用dispose()虽然Provider会自动处理ChangeNotifier的dispose但如果手动添加了监听者应该在适当的时机移除它们。5.4 Provider会自动处理dispose当Provider被从Widget树中移除时它会自动调用ChangeNotifier的dispose()方法释放资源。六、完整示例6.1 创建完整的购物车应用让我们创建一个完整的购物车应用演示ChangeNotifier的实际应用classCartItem{finalStringid;finalStringname;finaldouble price;int quantity;CartItem({requiredthis.id,requiredthis.name,requiredthis.price,this.quantity1,});}classCartProviderextendsChangeNotifier{finalMapString,CartItem_items{};MapString,CartItemgetitemsMap.unmodifiable(_items);intgetitemCount{return_items.values.fold(0,(sum,item)sumitem.quantity);}doublegettotalAmount{return_items.values.fold(0.0,(sum,item)sumitem.price*item.quantity);}voidaddItem(StringproductId,Stringname,double price){if(_items.containsKey(productId)){_items.update(productId,(existingItem)CartItem(id:existingItem.id,name:existingItem.name,price:existingItem.price,quantity:existingItem.quantity1,));}else{_items.putIfAbsent(productId,()CartItem(id:productId,name:name,price:price,));}notifyListeners();}voidremoveItem(StringproductId){if(!_items.containsKey(productId))return;if(_items[productId]!.quantity1){_items.update(productId,(existingItem)CartItem(id:existingItem.id,name:existingItem.name,price:existingItem.price,quantity:existingItem.quantity-1,));}else{_items.remove(productId);}notifyListeners();}voidclear(){_items.clear();notifyListeners();}}classCartPageextendsStatelessWidget{constCartPage({super.key});overrideWidgetbuild(BuildContextcontext){returnChangeNotifierProvider(create:(_)CartProvider(),child:Scaffold(appBar:AppBar(title:constText(购物车)),body:ConsumerCartProvider(builder:(context,cart,child){returnListView(padding:constEdgeInsets.all(16),children:[Text(商品数量:${cart.itemCount},style:constTextStyle(fontSize:18)),Text(总金额: ¥${cart.totalAmount.toStringAsFixed(2)},style:constTextStyle(fontSize:18)),constSizedBox(height:16),if(cart.items.isEmpty)constText(购物车为空)elseColumn(children:cart.items.values.map((item){returnCard(margin:constEdgeInsets.symmetric(vertical:4),child:Padding(padding:constEdgeInsets.all(8),child:Row(mainAxisAlignment:MainAxisAlignment.spaceBetween,children:[Column(crossAxisAlignment:CrossAxisAlignment.start,children:[Text(item.name),Text(¥${item.price}x${item.quantity}),],),Row(children:[IconButton(onPressed:()cart.removeItem(item.id),icon:constIcon(Icons.remove),),IconButton(onPressed:()cart.addItem(item.id,item.name,item.price),icon:constIcon(Icons.add),),],),],),),);}).toList(),),constSizedBox(height:16),ElevatedButton(onPressed:()cart.clear(),child:constText(清空购物车),),],);},),floatingActionButton:FloatingActionButton(onPressed:(){context.readCartProvider().addItem(1,iPhone 15,5999);},child:constIcon(Icons.add_shopping_cart),),),);}}6.2 代码解析在这个完整的购物车应用中创建了CartItem数据模型包含商品的基本信息。创建了CartProvider继承自ChangeNotifier管理购物车状态。在CartPage中使用ChangeNotifierProvider注入CartProvider。使用ConsumerCartProvider监听购物车变化并显示商品列表。使用context.readCartProvider()获取Provider实例并调用状态修改方法。添加了FloatingActionButton用于快速添加商品到购物车。七、总结ChangeNotifier是Provider状态管理的核心它提供了简单而强大的状态变化通知机制。通过本文的介绍你应该已经了解了ChangeNotifier的工作原理、实现方式和最佳实践。在实际开发中建议遵循以下原则状态私有化提供只读访问使用计算属性简化代码状态变化后调用notifyListeners()避免在build方法中调用notifyListeners()合理划分状态管理范围希望本文能帮助你掌握ChangeNotifier的使用并在实际项目中发挥其强大的功能