SwiftUI中嵌入List的购物车商品视图按钮无法点击问题

问题根源：你给整个ProductTileForCartView绑定了.onTapGesture，这个手势会拦截所有子视图的点击事件，导致+/-按钮无法响应。

解决方案：把跳转商品详情的手势限制在非按钮区域（图片、商品名称/价格区域），让按钮保留自身的点击响应，同时保留List的.onDelete功能。

修改List代码 #

移除外部的.onTapGesture：

List {
    ForEach(Array(cartViewModel.cart.products.keys).sorted { $0.id > $1.id}, id: \.self) { product in
        ProductTileForCartView(product: product)
            .environmentObject(cartViewModel)
    }
    .onDelete(perform: cartViewModel.removeProducts)
}

修改商品视图代码 #

给需要跳转的区域单独添加onTapGesture：

HStack(alignment: .center) {
    // 图片区域添加跳转手势
    KFImage(URL(string: product.imagesURLs.first!)!)
        .placeholder {
            Image("product_placeholder_image")
                .resizable()
                .aspectRatio(contentMode: .fit)
                .clipShape(RoundedRectangle(cornerRadius: 15))
        }
        .retry(maxCount: 3, interval: .seconds(3))
        .cancelOnDisappear(true)
        .resizable()
        .aspectRatio(contentMode: .fit)
        .clipShape(RoundedRectangle(cornerRadius: 15))
        .padding([.vertical, .trailing])
        .onTapGesture {
            withAnimation(.interactiveSpring(response: 0.6, dampingFraction: 0.7, blendDuration: 0.7)) {
                cartViewModel.changeFocusedProductFor(product: product)
            }
        }

    VStack(alignment: .leading) {
        // 商品信息区域添加跳转手势
        VStack(alignment: .leading, spacing: 10) {
            Text(product.company)
                .font(.system(size: 14, weight: .regular, design: .rounded))
                .foregroundColor(.gray)
                .fixedSize(horizontal: false, vertical: true)
            
            Text(product.name)
                .font(.system(size: 22, weight: .heavy, design: .rounded))
                .fixedSize(horizontal: false, vertical: true)
                .foregroundColor(colorScheme == .light ? .black : .white)
            
            Text("$\(product.price, specifier: "%.2f")")
                .font(.system(size: 20, weight: .bold, design: .rounded))
                .foregroundColor(.accentColor)
        }
        .onTapGesture {
            withAnimation(.interactiveSpring(response: 0.6, dampingFraction: 0.7, blendDuration: 0.7)) {
                cartViewModel.changeFocusedProductFor(product: product)
            }
        }
        
        Spacer()
        
        if includeButtonsForAmountChange {
            HStack(spacing: 20) {
                Button {
                    withAnimation {
                        cartViewModel.removeProductFromCart(product: product, quantity: 1)
                    }
                } label: {
                    Image(systemName: "minus.square.fill")
                        .resizable()
                        .frame(width: 30, height: 30)
                }
                
                Text("\(cartViewModel.getCartProductCount(product: product))")
                    .font(.system(size: 22, weight: .heavy, design: .rounded))
                
                Button {
                    withAnimation {
                        cartViewModel.addProductToCart(product: product, quantity: 1)
                    }
                } label: {
                    Image(systemName: "plus.square.fill")
                        .resizable()
                        .frame(width: 30, height: 30)
                }
            }
        }
    }
    .padding()
}

修改后效果：点击图片或商品信息区域会跳转到详情页，点击+/-按钮能正常调整购物数量，List的删除功能也能正常使用。

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