SwiftUI实现点击Add按钮将商品添加至Row视图的方法问询

1. 在详情页调用添加商品方法 #

修改ProductDetailSheet，注入CartManager实例，并在Add按钮的点击事件中调用addToCart方法：

struct ProductDetailSheet: View {
    let product: Product
    @Binding var isSheetPresented: Product?
    @State private var amount = 1
    // 注入CartManager
    @EnvironmentObject var cartManager: CartManager
    
    var body: some View {
        VStack{
            VStack {
                Image(product.image)
                Spacer()
                Text(product.name)
                    .presentationDetents([.height(200)])
                    .presentationBackgroundInteraction(.enabled(upThrough: .medium))
            }
            HStack{
                Button("Close") {
                    isSheetPresented = nil
                }
                Spacer()
                Button("Add") {
                    // 添加商品到购物车
                    cartManager.addToCart(product: product)
                    isSheetPresented = nil
                }
                Spacer()
                Stepper("Enter an amount: \(amount)", value: $amount, in: 0...200)
            }
        }
        .padding()
    }
}

2. 确保Recommended视图能获取CartManager #

如果Recommended是通过导航跳转进入的，需要在跳转时传递environmentObject，比如在PackingList的导航栏添加跳转按钮：

struct PackingList: View {
    // 原有代码不变
    var body: some View {
        NavigationStack {
            // 原有商品列表代码
            .navigationTitle(Text("Hello"))
            .toolbar {
                NavigationLink("查看已选") {
                    Recommended()
                        .environmentObject(cartManager)
                }
            }
        }
    }
}

3. 可选：完善ProductRow的删除功能 #

如果需要点击垃圾桶图标删除商品，给ProductRow注入CartManager并添加点击事件：

struct ProductRow: View {
    var product: Product
    @EnvironmentObject var cartManager: CartManager
    
    var body: some View {
        HStack(spacing: 20) {
            // 原有视图代码
            Image(systemName: "trash")
                .foregroundColor(Color(hue: 1.0, saturation: 0.89, brightness: 0.835))
                .onTapGesture {
                    cartManager.removeFromCart(product: product)
                }
        }
    }
}

验证效果 #

完成以上修改后，点击详情页的Add按钮，商品会被添加到cartManager.products数组，Recommended视图会自动监听数组变化，实时刷新展示所有已添加的商品Row。

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