SwiftUI商品数量跨视图同步更新问题技术求助

问题根源解析 #

1. 值类型拷贝导致数据不同步：Product是struct（值类型），首页和购物车传递的是不同副本，修改一个不会影响另一个。
2. Hashable默认实现缺陷：默认的Hashable会对比所有属性（包括quantity），数量变化后firstIndex(of:)无法匹配原商品，导致数量重置。
3. @Published更新未触发：直接修改数组中struct的属性时，SwiftUI无法检测到@Published数组的变化，视图不更新。
4. 视图显示错误：ProductCardView中用product.quantity-1显示数量是逻辑错误，CardView存在拼写错误quantita。

解决方案分步实现 #

1. 自定义Product的Hashable实现 #

确保同一商品无论数量多少都能被正确匹配，修改Product结构体：

struct Product: Identifiable, Hashable {
    var id = UUID().uuidString
    var categoria: ProductType
    var codice: String
    var descrizione: String = ""
    var prezzo: String
    var immagine: String = ""
    var quantity: Int = 1
    
    // 仅通过商品编码codice判断是否为同一商品（或用id）
    static func == (lhs: Product, rhs: Product) -> Bool {
        lhs.codice == rhs.codice
    }
    
    func hash(into hasher: inout Hasher) {
        hasher.combine(codice)
    }
}

2. 重构SharedDataModel的数量管理逻辑 #

修改数组元素时重新赋值，触发@Published更新，并新增方法统一获取购物车数量：

class SharedDataModel: ObservableObject {
    
    @Published var cartProducts: [Product] = []
    
    func addToCart(product: Product) {
        if let index = cartProducts.firstIndex(of: product) {
            // 修改数量后重新赋值回数组，触发视图更新
            var updatedProduct = cartProducts[index]
            updatedProduct.quantity += 1
            cartProducts[index] = updatedProduct
        } else {
            // 添加新商品时默认数量为1
            var newProduct = product
            newProduct.quantity = 1
            cartProducts.append(newProduct)
        }
    }

    func removeFromCart(product: Product) {
        guard let index = cartProducts.firstIndex(of: product) else { return }
        var updatedProduct = cartProducts[index]
        if updatedProduct.quantity > 1 {
            updatedProduct.quantity -= 1
            cartProducts[index] = updatedProduct
        } else {
            cartProducts.remove(at: index)
        }
    }
    
    // 统一获取指定商品在购物车中的数量
    func getCartQuantity(for product: Product) -> Int {
        guard let index = cartProducts.firstIndex(of: product) else {
            return 0
        }
        return cartProducts[index].quantity
    }
}

3. 修正视图的数量显示与数据依赖 #

移除不必要的@Binding，统一从SharedDataModel获取数量：

ProductCardView修改：

struct ProductCardView: View {
    
    let product: Product
    @EnvironmentObject var sharedData: SharedDataModel
    
    var body: some View {
        HStack {
            Button(action: {
                sharedData.removeFromCart(product: product)
            }, label: {
                Image(systemName: "minus")
                    .frame(width: 25, height: 30)
                    .foregroundColor(.black)
            })
            
            // 从共享模型获取当前数量
            Text("\(sharedData.getCartQuantity(for: product))")
                .frame(width: 25, height: 30)
            
            Button(action: {
                sharedData.addToCart(product: product)
            }, label: {
                Image(systemName: "plus")
                    .frame(width: 25, height: 30)
                    .foregroundColor(.black)
            })
        }
    }
}

CardView修改：

struct CardView: View {
    
    let product: Product
    @EnvironmentObject var sharedData: SharedDataModel
    
    var body: some View {
        HStack {
            Button {
                sharedData.removeFromCart(product: product)
            } label: {
                Image(systemName: "minus")
                    .font(.caption)
                    .foregroundColor(.white)
                    .frame(width: 20, height: 20)
                    .background(Color("Quantity"))
                    .cornerRadius(4)
            }
            
            // 修正拼写错误，并从共享模型获取数量
            Text("\(sharedData.getCartQuantity(for: product))")
                .font(.custom(customFont, size: 14))
                .fontWeight(.semibold)
                .foregroundColor(.black)
            
            Button {
                sharedData.addToCart(product: product)
            } label: {
                Image(systemName: "plus")
                    .font(.caption)
                    .foregroundColor(.white)
                    .frame(width: 20, height: 20)
                    .background(Color("Quantity"))
                    .cornerRadius(4)
            }
        }
    }
}

4. 确保全局共享模型实例传递 #

在App入口或父视图中注入SharedDataModel，确保所有子视图使用同一实例：

@main
struct YourApp: App {
    @StateObject private var sharedData = SharedDataModel()
    
    var body: some Scene {
        WindowGroup {
            HomeView()
                .environmentObject(sharedData)
        }
    }
}

效果验证 #

• 首页和购物车修改数量时，两个视图会同步更新显示
• 购物车中同一商品只会显示一个条目，数量正确累加/递减
• 不会再出现数量重置为0或修改不同步的问题

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