SwiftUI中如何区分列表单元格的普通点击与内部Button点击事件

根本原因 #

SwiftUI 的 List 组件默认会将单元格内的所有 Button 识别为全局单元格交互触发器，点击单元格任意位置都会触发 cell 内所有 Button 的动作，这是系统默认的交互规则。

解决方案 #

方案1：修改Button的样式（最简便） #

给你的勾选按钮添加 .buttonStyle(BorderlessButtonStyle()) 修饰符，即可限制按钮仅响应自身区域内的点击事件，不会被全局单元格点击触发。
修改后的按钮代码如下：

Button{
    if model.isSelected(food: food) {
        model.deselect(food)
    } else {
        model.select(food)
    }
} label: {
    Image(systemName: "checkmark.circle")
        .frame(width: 44, height: 44)
        .imageScale(.large)
        .foregroundColor(model.isSelected(food: food) ? Color("primary") : Color(.systemGray))
}
// 新增这行修饰符
.buttonStyle(BorderlessButtonStyle())

方案2：用点击手势替代Button组件 #

如果不想调整Button样式，也可以直接去掉Button，给勾选图标添加 onTapGesture 手势实现选中逻辑，同样不会触发全局单元格点击响应：

Image(systemName: "checkmark.circle")
    .frame(width: 44, height: 44)
    .imageScale(.large)
    .foregroundColor(model.isSelected(food: food) ? Color("primary") : Color(.systemGray))
    // 直接添加点击手势
    .onTapGesture {
        if model.isSelected(food: food) {
            model.deselect(food)
        } else {
            model.select(food)
        }
    }

可选优化（针对NavigationLink透传问题） #

你当前用 ZStack 嵌套 NavigationLink(EmptyView()) 的写法，若后续出现跳转逻辑异常，可以给 NavigationLink 补充 .opacity(0) 修饰符，避免层级透传导致的误触发：

List(inventory.items) { food in
    ZStack {
        NavigationLink(
            destination: InventoryEditionView(food: food, index:inventory.items.firstIndex(of: food)!))
        {
            EmptyView()
        }
        .disabled(!model.seletedFoodItems.isEmpty)
        // 新增不透明度修饰符
        .opacity(0)

        InventoryListCell(food: food, model: model)
    }
 }

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