SwiftUI - 两个单独的按钮作为一个按钮答案

【问题标题】：SwiftUI - Two Separate Buttons Acting As OneSwiftUI - 两个单独的按钮作为一个按钮
【发布时间】：2020-04-08 11:28:12
【问题描述】：

Xcode 11.3 (11C29).  
macOS 10.15.2.

在下面的 SwiftUI 视图中有两个按钮。一个打印“OK”，另一个打印“Cancel”。但是，无论按下哪个按钮，都会执行两个打印语句。 为什么会这样？（我认为它一定是一个 SwiftUI 错误。）

struct ContentView: View {

    var body: some View {
        List {
            HStack {
                Button("OK") {
                    print("OK.")
                }
                Button("Cancel") {
                    print("Cancel")
                }
            }
        }
    }    
}

（如果 List 或 HStack 被注释掉，那么每个按钮只打印自己的语句。）

【问题讨论】：

注意：我只在 iPhone X 模拟器上运行了这段代码，直到明天才能访问我的实际 iPhone X。问题可能只存在于模拟器上。
关于信息：我现在已经在我的 iPhone X 上重现了这个问题。我可以轻松地解决这个问题。真正的问题是：为什么会存在这个问题？是什么原因造成的？
一年后，iOS 14.3 设备和模拟器上的 Xcode 12.3 仍然是一个 Bug。即使没有列表但有一个包含按钮的简单 ForEach 也会发生在我身上。看起来 SwiftUI 以错误的方式重用了按钮视图。在我的案例中，我可以看到两个按钮上的触摸突出显示。

标签： list button swiftui hstack

【解决方案1】：

您可以使用.buttonStyle(BorderlessButtonStyle()) 来达到预期的效果。如果您想在 List 中添加按钮，它允许您单独点击以及 List 行。

这是一个带有ForEach(..) 循环的实现：

struct ContentView: View {
    var body: some View {
        List {
            ForEach(["My List Item Buttons"], id: \.self) {
                item in
                HStack {
                    Text("\(item)")
                    Spacer()
                    Button(action: { print("\(item) 1")}) {
                        Text("OK")
                    }
                    Button(action: { print("\(item) 2")}) {
                        Text("Cancel")
                    }
                }
            }
            .buttonStyle(BorderlessButtonStyle())
        }
    }
}

为了方便，List 初始化程序还允许您像上面的 ForEach 视图一样使用它，以防您想要一个仅包含单个单元格类型的列表。

List(["My List Item Buttons"], id: \.self) { item in
    Text("Row \(row)")
}

或类似的东西没有：

struct ContentView: View {
    var body: some View {
        List {
            HStack {
                Button(action: { print("OK")}) {
                    Text("OK")
                }
                Button(action: { print("Cancel")}) {
                    Text("Cancel")
                }
            }
            .buttonStyle(BorderlessButtonStyle())
        }
    }
}

【讨论】：

有很多方法可以解决这个问题。我在问题中提出了两个，我自己。真正的问题是为什么首先会出现问题。在上面的第二个答案中，通过明确说明默认边框样式来解决问题。这样的操作不应该改变按钮的行为，但它会。