如何在SwiftUI列表单元格内添加独立可点击按钮？

我明白你遇到的麻烦了——在SwiftUI List的单元格里放多个Button时，点击单元格居然会触发所有按钮，这其实是因为List的行默认自带可交互的选择手势，再加上默认Button样式会和行的手势产生冲突，导致点击事件被错误地传递给了所有按钮。

下面给你两种简单有效的解决思路：

方法1：给Button设置独立样式 #

默认情况下，SwiftUI的Button在List行内会自动适配成系统列表的按钮样式，这会让行的交互区域和按钮区域重叠。我们可以用PlainButtonStyle()让按钮恢复成独立的可点击元素，彻底避免和行手势的冲突：

struct NameCell: View {
    let name: String
    var body: some View {
        VStack(alignment: .leading, spacing: 10) {
            Text(name)
                .font(.headline)
            HStack {
                Button("Action1") { print("action 1 tapped") }
                    .buttonStyle(PlainButtonStyle())
                Button("Action2") { print("action 2 tapped") }
                    .buttonStyle(PlainButtonStyle())
                Button("Action3") { print("action 3 tapped") }
                    .buttonStyle(PlainButtonStyle())
            }
        }
    }
}

方法2：禁用List行的选择交互 #

如果你希望整个List行都不能被选中（只保留按钮的点击能力），可以在单元格视图上添加.listRowSelectionDisabled(true)（iOS 15及以上可用），直接禁用行本身的选择手势，按钮就能独立响应点击了：

struct ContentView: View {
    @State var names = ["Mohamed", "Ahmed", "Ali"]
    var body: some View {
        NavigationView {
            List {
                ForEach(names, id: \.self) { name in
                    NameCell(name: name)
                        .listRowSelectionDisabled(true)
                }
            }
            .navigationBarTitle("Names")
        }
    }
}

// NameCell可以保留原代码，也可以结合方法1的按钮样式一起使用，效果更好

额外优化（可选）：精准控制按钮点击区域 #

要是想更精准地限定只有按钮的可视区域能响应点击，可以给每个Button加上.contentShape(Rectangle())，确保点击按钮外的单元格区域不会触发任何操作：

Button("Action1") { print("action 1 tapped") }
    .buttonStyle(PlainButtonStyle())
    .contentShape(Rectangle())

这样修改后，你就能单独点击每个按钮，点击单元格其他区域也不会触发任何按钮，完美解决你的问题啦！

内容的提问来源于stack exchange，提问作者M.Serag