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

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

---

（如果

列表

或

HStack

被注释掉，则每个按钮只打印自己的语句。）

您可以使用

.buttonStyle（BorderlessButtonStyle（））

来获得所需的结果。如果您想在

列表

中设置按钮，则可以单独点击这两个按钮，也可以点击

列表

行

这是一个带有

ForEach（..）

循环的实现：

struct ContentView: View {

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

为了方便起见，

列表

初始化器还允许您像上面的

ForEach

视图一样使用它，以防您想要一个只包含单个单元格类型的列表

或者像这样没有：

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

---

注意：我只在iPhoneX模拟器上运行了这段代码，直到明天才能访问我的实际iPhoneX。这个问题可能只存在于模拟器上。仅供参考：我现在在iPhone X上重现了这个问题。我可以轻松解决这个问题。真正的问题是：为什么会存在这个问题？是什么原因造成的？一年后，iOS 14.3设备和模拟器上的Xcode 12.3仍然存在漏洞。对于我来说，即使没有一个列表，但有一个包含按钮的简单ForEach，也会发生这种情况。看起来SwiftUI以错误的方式重用了按钮视图。在我的案例中，我可以看到两个按钮上的触摸突出显示。有很多方法可以解决这个问题。在这个问题上，我自己提出了两个。真正的问题是为什么问题会首先发生。在上面的第二个答案中，通过明确说明默认边框样式，问题得到了解决。这样的动作不应该改变按钮的行为，但确实如此。

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(["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())
        }
    }
}