Flutter购物车管理插件shopping_cart的使用

发布于 1周前 作者 itying888 来自 Flutter

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

1 回复

更多关于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'),
            ),
          ],
        ),
      ),
    );
  }
}

注意事项

  1. 在实际项目中,你可能需要将CartModel实例持久化(例如使用providerriverpodbloc等状态管理库)。
  2. 上述代码假设CartItem类在shopping_cart插件中已定义,如果没有,你可能需要自定义一个类似的类。
  3. CartPage中的setState调用是基于假设CartPageStatefulWidget,如果你使用其他状态管理方式,请相应调整。

这个示例代码展示了如何使用shopping_cart插件来管理购物车,你可以根据实际需求进行扩展和修改。

回到顶部