如何通过Stepper的onIncrement/onDecrement更新购物车总计金额

问题描述 #

已实现可正常计算总计的添加函数，需求为点击Stepper组件的+/-按钮时同步更新购物车总计金额，但不清楚如何将总计变量传入Stepper中。

解决方案 #

核心问题是当前直接修改商品的quantity但未同步更新Order类中的productTotal，且现有Order类缺少专门处理单商品数量增减的逻辑。以下是具体修改步骤：

1. 完善Order类的数量增减方法

修改Order类，新增专门的数量增减方法，统一处理数据更新和总计计算：

import SwiftUI

class Order: ObservableObject {

    @Published var products = [Product]()
    @Published private(set) var productTotal: Int = 0

    func add(item: Product) {
        if let index = products.firstIndex(where: {$0.id == item.id }) {
            // 已有商品，数量+1，总计加单价
            products[index].quantity += 1
            productTotal += item.price
        } else {
            // 新商品，添加后总计加总价（数量×单价）
            var newItem = item
            newItem.total = item.quantity * item.price
            products.append(newItem)
            productTotal += newItem.total
        }
    }

    func remove(item: Product) {
        if let index = products.firstIndex(of: item) {
            productTotal -= item.total
            products.remove(at: index)
        }
    }
    
    // 新增：增加商品数量
    func increaseQuantity(for item: Product) {
        if let index = products.firstIndex(where: {$0.id == item.id }) {
            products[index].quantity += 1
            products[index].total += item.price
            productTotal += item.price
        }
    }
    
    // 新增：减少商品数量（最少保留1个）
    func decreaseQuantity(for item: Product) {
        if let index = products.firstIndex(where: {$0.id == item.id }), products[index].quantity > 1 {
            products[index].quantity -= 1
            products[index].total -= item.price
            productTotal -= item.price
        }
    }
}

2. 修改Stepper的回调逻辑

在OrderView的Stepper组件中，不再直接修改item.quantity，而是调用Order类的增减方法：

Stepper {
    Text("\(Image(systemName: \"multiply\"))\(item.quantity)")
} onIncrement: {
    order.increaseQuantity(for: item)
} onDecrement: {
    order.decreaseQuantity(for: item)
}

3. 修改后的完整OrderView代码

import SwiftUI

struct OrderView: View {
    @EnvironmentObject var order: Order

    var body: some View {
        NavigationStack {
            List {
                Section {
                    ForEach($order.products) { $item in
                        Section {
                            HStack {
                                Text("商品信息")
                                    .foregroundColor(.blue)
                                    .bold()
                                Spacer()
                                Text("操作")
                                    .foregroundColor(.blue)
                                    .bold()
                            }
                        }

                        HStack {
                            if let url = URL(string: item.thumbnail) {
                                ProductAsyncImageView(url: url)
                                    .frame(width: 90, height: 90)
                                    .padding(.bottom, -10)
                                    .clipShape(Circle())
                            }
                            Spacer()

                            VStack {
                                HStack {
                                    Stepper {
                                        Text("\(Image(systemName: \"multiply\"))\(item.quantity)")
                                    } onIncrement: {
                                        order.increaseQuantity(for: item)
                                    } onDecrement: {
                                        order.decreaseQuantity(for: item)
                                    }
                                    
                                    Image(systemName: "trash")
                                        .foregroundColor(Color(hue: 1.0, saturation: 0.89, brightness: 0.835))
                                        .onTapGesture {
                                            order.remove(item: item)
                                        }
                                }
                            }
                            Spacer()
                        }

                        VStack {
                            HStack(spacing: 20) {
                                Text("名称: \(item.title)")
                                    .font(.subheadline)
                                    .frame(maxWidth: .infinity, alignment: .leading)
                                    .bold()
                            }
                            HStack {
                                Text("单价: £\(item.price)")
                                    .font(.subheadline)
                                    .bold()
                                    .frame(maxWidth: .infinity, alignment: .leading)
                                Text("小计: £\(item.total)")
                                    .font(.subheadline)
                                    .bold()
                                    .frame(maxWidth: .infinity, alignment: .leading)
                            }
                        }
                    }
                    
                    HStack {
                        Text("购物车总计:")
                            .bold()
                        Spacer()
                        Text("£\(order.productTotal).00")
                            .bold()
                    }
                    .padding()
                }
                
                Section {
                    NavigationLink("提交订单") {
                        // 可跳转至订单确认页
                    }
                }
            }
            .navigationTitle("我的订单")
        }
    }
}

关键说明

• 将数量增减逻辑统一封装到Order类中，确保数据一致性，避免直接修改商品属性导致总计不同步
• Order类中的productTotal通过@Published修饰，修改时会自动通知视图刷新
• Stepper仅负责触发操作，不直接修改数据，符合MVVM架构的职责分离原则

内容的提问来源于stack exchange，提问作者user21666271