Flutter购物车管理插件shopping_cart的使用
Flutter购物车管理插件shopping_cart的使用
关于ShoppingCart
ShoppingCart
是一个简化Flutter应用中创建和管理购物车的库。它提供了丰富的功能,如添加、删除、更新商品,以及获取购物车总价等。
安装
在 pubspec.yaml
文件中添加以下依赖:
dependencies:
shopping_cart: ^0.0.1
然后,在Dart代码中导入该库:
import 'package:shopping_cart/shopping_cart.dart';
额外依赖
为了使库的功能更加完善,建议添加以下两个额外的依赖:
dependencies:
get:
equatable:
Get
是一个优秀的状态管理工具,ShoppingCart
使用了它来使购物车的状态变得可观察。Equatable
用于比较购物车中的商品模型,以便找到所需的商品。
使用
创建自定义商品类
首先需要创建一个商品模型类,并继承自 ItemModel
类。如果使用了 equatable
包,则还需要混入 EquatableMixin
混入类。
import 'package:equatable/equatable.dart';
import 'package:shopping_cart/shopping_cart.dart';
class FoodModel extends ItemModel with EquatableMixin {
final String name;
final String urlPhoto;
String specialInstruction;
FoodModel({
required this.name,
required this.urlPhoto,
this.specialInstruction = '',
required super.id,
required super.price,
super.quantity = 1,
});
[@override](/user/override)
List<Object?> get props => [name, urlPhoto, specialInstruction];
}
初始化
在开始使用该库之前,需要初始化购物车:
ShoppingCart.init<FoodModel>();
获取实例
可以在代码中的任何地方获取购物车实例:
final cart = ShoppingCart.getInstance<FoodModel>();
确保传递你创建的商品模型类,否则会报错。
Getter方法
cartItems
获取购物车中的商品列表:
final instance = ShoppingCart.getInstance<FoodModel>();
final items = instance.cartItems;
cartItems
是一个可观察的对象,类型为 RxList<T>
。
cartTotal
返回购物车中所有商品的总价:
final instance = ShoppingCart.getInstance<FoodModel>();
final cartTotal = instance.cartTotal;
totalCartPriceInt
返回购物车中所有商品的总价(整数):
final instance = ShoppingCart.getInstance<FoodModel>();
final totalCartPriceInt = instance.totalCartPriceInt;
itemCount
返回购物车中商品的数量:
final instance = ShoppingCart.getInstance<FoodModel>();
final cartLength = instance.itemCount;
cartItemsStream
提供一个流,当购物车中的商品发生变化时会发出通知:
class CartITemsStreamWidgetExample extends StatelessWidget {
const CartITemsStreamWidgetExample({super.key});
[@override](/user/override)
Widget build(BuildContext context) {
final cartInstance = ShoppingCart.getInstance<FoodModel>();
return StreamBuilder<List<FoodModel>>(
stream: cartInstance.cartItemsStream,
initialData: cartInstance.cartItems,
builder: (context, AsyncSnapshot<List<FoodModel>> snap) {
final List<FoodModel> items = snap.data!;
// 返回你需要的任意小部件
return ListView.builder(
itemBuilder: (context, int index) {
final item = items[index];
return ListTile(title: Text(item.name));
},
itemCount: items.length,
);
},
);
}
}
方法
添加商品到购物车
final instance = ShoppingCart.getInstance<FoodModel>();
final item = FoodModel(
id: 1,
name: 'Cheeseburger',
price: 8.99,
urlPhoto: 'https://example.org/Cheeseburger',
);
instance.addItemToCart(item);
删除商品
instance.removeItemFromCart(item);
增加商品数量
instance.incrementItemQuantity(yourItem);
减少商品数量
instance.decrementItemQuantity(yourItem);
注意:如果商品数量减少至1,则会从购物车中移除该商品。
清空购物车
instance.clearCart();
UI重建
使用 Get
为了在购物车内容变化时自动重建UI,可以使用 Obx
小部件:
class TotalCartPriceWidget extends StatelessWidget {
const TotalCartPriceWidget({super.key});
[@override](/user/override)
Widget build(BuildContext context) {
final cartInstance = ShoppingCart.getInstance<FoodModel>();
final cartTotal = cartInstance.cartTotal;
return Obx(() => Text('Cart total $cartTotal'));
}
}
使用 StreamBuilder
如果你不想使用 Get
,也可以使用 StreamBuilder
:
class ItemsListStreamWidget extends StatelessWidget {
const ItemsListStreamWidget({super.key});
[@override](/user/override)
Widget build(BuildContext context) {
final instance = ShoppingCart.getInstance<FoodModel>();
return StreamBuilder(
stream: instance.cartItemsStream,
initialData: instance.cartItems,
builder: (context, AsyncSnapshot<List<FoodModel>> snap) {
final List<FoodModel> data = snap.data!;
return ListView.builder(
itemBuilder: (context, int index) {
final item = data[index];
return ListTile(
title: Text(item.name),
leading: Image.network(item.urlPhoto),
trailing: Text('${item.calculateTotalItemPrice}'),
onLongPress: () => instance.removeItemFromCart(item),
);
},
itemCount: instance.itemCount,
);
},
);
}
}
更多关于Flutter购物车管理插件shopping_cart的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
更多关于Flutter购物车管理插件shopping_cart的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
当然,以下是如何在Flutter项目中使用shopping_cart
插件来管理购物车的示例代码。这个插件可以帮助你轻松管理购物车中的商品及其数量。
1. 添加依赖
首先,你需要在pubspec.yaml
文件中添加shopping_cart
依赖:
dependencies:
flutter:
sdk: flutter
shopping_cart: ^最新版本号 # 请替换为最新版本号
然后运行flutter pub get
来安装依赖。
2. 初始化购物车
在你的Flutter应用的主文件(通常是main.dart
)中,初始化购物车。
import 'package:flutter/material.dart';
import 'package:shopping_cart/shopping_cart.dart';
void main() {
// 初始化购物车
final CartModel cart = CartModel();
runApp(MyApp(cart: cart));
}
class MyApp extends StatelessWidget {
final CartModel cart;
MyApp({required this.cart});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Shopping Cart Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(cart: cart),
);
}
}
3. 创建商品列表和添加商品到购物车
在MyHomePage
中,创建一个商品列表,并添加一个按钮将商品添加到购物车。
import 'package:flutter/material.dart';
import 'package:shopping_cart/shopping_cart.dart';
class MyHomePage extends StatefulWidget {
final CartModel cart;
MyHomePage({required this.cart});
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
final List<CartItem> products = [
CartItem(id: '1', title: 'Product 1', price: 10.0, quantity: 0),
CartItem(id: '2', title: 'Product 2', price: 20.0, quantity: 0),
CartItem(id: '3', title: 'Product 3', price: 30.0, quantity: 0),
];
void addToCart(String id) {
widget.cart.addItem(products.firstWhere((item) => item.id == id));
setState(() {}); // 更新UI
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Shopping Cart Demo'),
),
body: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
children: <Widget>[
Expanded(
child: ListView.builder(
itemCount: products.length,
itemBuilder: (context, index) {
return Card(
child: ListTile(
title: Text(products[index].title),
trailing: Text('\$${products[index].price.toStringAsFixed(2)}'),
onTap: () => addToCart(products[index].id),
),
);
},
),
),
SizedBox(height: 16),
ElevatedButton(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => CartPage(cart: widget.cart)),
);
},
child: Text('View Cart'),
),
],
),
),
);
}
}
4. 显示购物车页面
创建一个新的页面CartPage
来显示购物车中的商品。
import 'package:flutter/material.dart';
import 'package:shopping_cart/shopping_cart.dart';
class CartPage extends StatelessWidget {
final CartModel cart;
CartPage({required this.cart});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Shopping Cart'),
),
body: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
children: <Widget>[
Expanded(
child: cart.itemCount > 0
? ListView.builder(
itemCount: cart.itemCount,
itemBuilder: (context, index) {
final item = cart.items![index];
return Card(
child: ListTile(
leading: CircleAvatar(
child: Text(item.quantity.toString()),
),
title: Text(item.title),
trailing: Text('\$${item.price * item.quantity.toDouble().toStringAsFixed(2)}'),
onTap: () {
cart.removeItemById(item.id);
setState(() {}); // 如果CartPage是StatefulWidget的话
},
),
);
},
)
: Center(
child: Text('Your cart is empty!'),
),
),
SizedBox(height: 16),
Text('Total: \$${cart.totalPrice.toStringAsFixed(2)}'),
SizedBox(height: 16),
ElevatedButton(
onPressed: () {
// 清空购物车或进行其他操作
cart.clear();
// 如果CartPage是StatefulWidget的话,使用setState更新UI
},
child: Text('Clear Cart'),
),
],
),
),
);
}
}
注意事项
- 在实际项目中,你可能需要将
CartModel
实例持久化(例如使用provider
、riverpod
或bloc
等状态管理库)。 - 上述代码假设
CartItem
类在shopping_cart
插件中已定义,如果没有,你可能需要自定义一个类似的类。 CartPage
中的setState
调用是基于假设CartPage
是StatefulWidget
,如果你使用其他状态管理方式,请相应调整。
这个示例代码展示了如何使用shopping_cart
插件来管理购物车,你可以根据实际需求进行扩展和修改。