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

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

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

Flexi Cart 模块为 Flutter 应用程序提供了灵活且强大的解决方案来处理购物车和项目集合。该模块扩展了 ChangeNotifier 类的功能,实现了与 Flutter 反应式框架的无缝集成。

目录

特性

  • 灵活的项目结构:利用 ICartItem 接口定义具有关键属性(如键、组、数量和价格)的购物车项目。
  • 分组和组织:使用 CartItemsGroup 类创建逻辑上的项目分组,增强清晰度和组织性。
  • 轻松计算总计:轻松计算购物车中所有项目的总价和总量。
  • 可定制的行为:定义移除项目的条件,并根据应用需求调整添加零数量项目的操作。

开始使用

安装

通过您的首选包管理器安装该模块:

flutter pub add flexi_cart

示例代码

以下是一个完整的示例,展示了如何在 Flutter 应用程序中使用 Flexi Cart 模块。

import 'dart:math';

import 'package:flexi_cart/flexi_cart.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:random_name_generator/random_name_generator.dart';
import 'package:uuid/uuid.dart';

// 自定义购物车项类
class CartItem extends ICartItem {
  CartItem({
    required super.id,
    required super.name,
    required super.price,
    super.quantity = 1.0,
    super.group = 'test-group',
  });
}

void main() {
  runApp(
    MaterialApp(
      theme: ThemeData(
        useMaterial3: true,
        primarySwatch: Colors.deepPurple,
      ),
      home: ChangeNotifierProvider(
        create: (BuildContext context) => FlexiCart(),
        child: const Example(),
      ),
    ),
  );
}

class Example extends StatefulWidget {
  const Example({super.key});

  [@override](/user/override)
  State<Example> createState() => _ExampleState();
}

class _ExampleState extends State<Example> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('FlexiCart Example'),
        actions: [
          IconButton(
            onPressed: _add,
            icon: const Icon(Icons.add),
          ),
          IconButton(
            onPressed: deleteGroup,
            icon: const Icon(Icons.delete),
          ),
        ],
      ),
      body: Builder(builder: (context) {
        final cart = context.watch<FlexiCart>();
        final items = cart.getItemsGroup('aaa');
        return Column(
          children: [
            Text("Total: ${cart.totalPrice()}"),
            Expanded(
              child: ListView.builder(
                padding: const EdgeInsets.all(8),
                itemCount: items.length,
                itemBuilder: (context, index) {
                  final item = items[index];
                  return Card(
                    child: Dismissible(
                      key: Key(item.key),
                      onDismissed: (direction) {
                        _delete(item);
                      },
                      background: Container(
                        color: Colors.red,
                        child: const Icon(Icons.delete),
                      ),
                      child: ListTile(
                        leading: Text(item.group),
                        title: Text(item.name),
                        subtitle: Text(item.price.toString()),
                        trailing: SizedBox(
                          width: 180,
                          child: CartInput(
                            item: item,
                            onChanged: (item) {
                              debugPrint("$item");
                            },
                          ),
                        ),
                      ),
                    ),
                  );
                },
              ),
            ),
          ],
        );
      }),
    );
  }

  // 生成随机商品
  _generateItem() {
    var randomNames = RandomNames(Zone.us);
    final random = Random();
    final price = random.nextInt(10) * 10.0;
    return CartItem(
      id: const Uuid().v4(),
      name: randomNames.manName(),
      group: 'aaa',
      price: price,
    );
  }

  // 删除指定分组的所有项目
  void deleteGroup() {
    final cart = context.read<FlexiCart>();
    cart.clearItemsGroup('ccc');
  }

  // 添加一个新项目到购物车
  void _add() {
    final cart = context.read<FlexiCart>();
    cart.add(_generateItem());
  }

  // 从购物车中删除指定项目
  void _delete(ICartItem item) {
    final cart = context.read<FlexiCart>();
    cart.delete(item);
  }
}

更多关于Flutter购物车管理插件flexi_cart的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter购物车管理插件flexi_cart的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,以下是如何在Flutter项目中使用flexi_cart插件进行购物车管理的示例代码。flexi_cart是一个功能强大的购物车管理插件,它提供了丰富的API来处理购物车中的商品、计算总价、更新数量等功能。

首先,确保你已经在pubspec.yaml文件中添加了flexi_cart依赖:

dependencies:
  flutter:
    sdk: flutter
  flexi_cart: ^最新版本号  # 请替换为实际发布的最新版本号

然后运行flutter pub get来安装依赖。

接下来,在你的Flutter项目中,你可以按照以下步骤使用flexi_cart插件:

1. 初始化购物车

在你的主应用文件(如main.dart)中,你可以初始化购物车服务:

import 'package:flutter/material.dart';
import 'package:flexi_cart/flexi_cart.dart';

void main() {
  // 初始化购物车服务
  final cartService = CartService();

  // 清空购物车(可选,用于演示)
  cartService.clearCart();

  runApp(MyApp(cartService: cartService));
}

class MyApp extends StatelessWidget {
  final CartService cartService;

  MyApp({required this.cartService});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Shopping Cart Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomeScreen(cartService: cartService),
    );
  }
}

2. 添加商品到购物车

在你的HomeScreen组件中,你可以添加商品到购物车:

import 'package:flutter/material.dart';
import 'package:flexi_cart/flexi_cart.dart';

class HomeScreen extends StatefulWidget {
  final CartService cartService;

  HomeScreen({required this.cartService});

  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  void _addToCart() {
    final product = CartProduct(
      id: 'product_1',
      title: 'Sample Product',
      price: 9.99,
      quantity: 1,
    );

    widget.cartService.addToCart(product);

    // 更新UI(这里可以调用setState来刷新UI,展示购物车中的商品数量)
    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Shopping Cart Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(
              onPressed: _addToCart,
              child: Text('Add to Cart'),
            ),
            SizedBox(height: 20),
            Text('Cart Items: ${widget.cartService.cart.length}'),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // 导航到购物车页面
          Navigator.push(
            context,
            MaterialPageRoute(builder: (context) => CartScreen(cartService: widget.cartService)),
          );
        },
        tooltip: 'Go to Cart',
        child: Icon(Icons.shopping_cart),
      ),
    );
  }
}

3. 显示购物车内容

创建一个新的CartScreen组件来显示购物车的内容:

import 'package:flutter/material.dart';
import 'package:flexi_cart/flexi_cart.dart';

class CartScreen extends StatelessWidget {
  final CartService cartService;

  CartScreen({required this.cartService});

  @override
  Widget build(BuildContext context) {
    final cart = cartService.cart;
    double totalPrice = 0.0;

    for (final item in cart) {
      totalPrice += item.price * item.quantity;
    }

    return Scaffold(
      appBar: AppBar(
        title: Text('Shopping Cart'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: <Widget>[
            if (cart.isNotEmpty)
              Expanded(
                child: ListView.builder(
                  itemCount: cart.length,
                  itemBuilder: (context, index) {
                    final product = cart[index];
                    return Card(
                      child: ListTile(
                        leading: Text('${product.quantity}x'),
                        title: Text(product.title),
                        trailing: Text('${product.price * product.quantity}'),
                      ),
                    );
                  },
                ),
              ),
            SizedBox(height: 20),
            Text('Total Price: \$${totalPrice.toStringAsFixed(2)}'),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // 清空购物车(可选)
          cartService.clearCart();

          // 返回上一页(这里可以调用Navigator.pop(context))
          Navigator.pop(context);
        },
        tooltip: 'Clear Cart',
        child: Icon(Icons.delete),
      ),
    );
  }
}

以上代码展示了如何使用flexi_cart插件来管理购物车,包括添加商品到购物车、显示购物车内容以及计算总价。你可以根据实际需求进一步扩展和自定义这些功能。

回到顶部