SwiftUI

Question

我在列表中有两个按钮，点击时，列表项的整个区域都突出显示。有没有办法把两个按钮分开？

在这种情况下，我有一个操作按钮和一个信息按钮：

我发现，但没有直接的解决方案。

代码如下：

var body: some View {
    HStack {
        Text(control.name)
        Spacer()
        Button(action: {
            print("action")
        }) {
            Text("Action")
            }
            .frame(width: 250 - 10)
            .padding(5)
            .background(Color(white: 0.9))
            .cornerRadius(10)
            .frame(width: 250)
        Group {
            Button(action: {
                print("action")
            }) {
                Image(systemName: "info.circle")
                    .foregroundColor(.accentColor)
            }
        }
    }
}

Answer 1

您可以添加 padding 或尝试添加 Spacer

添加填充

HStack {
        Text("Button")
        Spacer()
        Button(action: {
            print("action")
        }) {
            Text("Action")
            }
            .frame(width: 250 - 10)
            .padding(5)
            .background(Color(white: 0.9))
            .cornerRadius(10)
            .frame(width: 250)
        Group {
            Button(action: {
                print("action")
            }) {
                Image(systemName: "info.circle")
                    .foregroundColor(.accentColor)
            }
            .padding(15)
        }
    }

添加垫片

HStack {
        Text("Button")
        Spacer()
        Button(action: {
            print("action")
        }) {
            Text("Action")
            }
            .frame(width: 250 - 10)
            .padding(5)
            .background(Color(white: 0.9))
            .cornerRadius(10)
            .frame(width: 250)
        Spacer()
        Group {
            Button(action: {
                print("action")
            }) {
                Image(systemName: "info.circle")
                    .foregroundColor(.accentColor)
            }
        }
    }

Answer 2

我为这个问题苦恼了一段时间。 Apple 在 SwiftUI 中使 Button 有点特别。它可以根据使用的上下文而改变。这就是为什么当 Button 在 List.

中时我们会看到这个奇怪的功能

幸运的是，还有其他使用 .tapAction 或 TapGesture 的方法。试试下面的代码。

var body: some View {
    HStack {
        Text(control.name)
        Spacer()
        Text("Action")
            .frame(width: 250 - 10)
            .padding(5)
            .background(Color(white: 0.9))
            .cornerRadius(10)
            .frame(width: 250)
            .tapAction {
                print("action1")
            }

        Image(systemName: "info.circle")
            .foregroundColor(.accentColor)
            .tapAction {
                print("action2")
            }
    }
}

或

var body: some View {
    HStack {
        Text(control.name)
        Spacer()
        Text("Action")
            .frame(width: 250 - 10)
            .padding(5)
            .background(Color(white: 0.9))
            .cornerRadius(10)
            .frame(width: 250)
            .gesture(TapGesture().onEnded() {
                print("action1")
                })

        Image(systemName: "info.circle")
            .foregroundColor(.accentColor)
            .gesture(TapGesture().onEnded() {
                print("action2")
            })
    }
}

Answer 3

对于最新的 SwiftUI (Xcode 11.2) 和 HStack 中的多个 Button 有类似问题的人，我的问题只有在转换 HStack 到 Image 中的所有 个按钮并添加 .onTapGesture 处理程序。

我的问题是点击一个按钮会触发 HStack 中的所有其他按钮。只有我把所有的按钮都转换成图像后，它们才不再相互干扰。

当然，如果您的按钮没有图像，您可以使用 Text 代替。

Answer 4

将按钮样式设置为与默认样式不同的样式，例如 BorderlessButtonStyle()

struct Test: View {
  var body: some View {
    NavigationView {
      List {
        ForEach([
          "Line 1",
          "Line 2",
        ], id: \.self) {
          item in
          HStack {
            Text("\(item)")
            Spacer()
            Button(action: { print("\(item) 1")}) {
              Text("Button 1")
            }
            Button(action: { print("\(item) 2")}) {
              Text("Button 2")
            }
          }
        }
        .onDelete { _ in }
        .buttonStyle(BorderlessButtonStyle())
      }
      .navigationBarItems(trailing: EditButton())
    }
    .accentColor(.red)
  }
}

Answer 5

在 Xcode 12.5 上，我在 SwiftUI 中遇到了同样的问题，点击时列表项的整个区域被突出显示。

.buttonStyle(BorderlessButtonStyle()) 完成工作，现在可以在列表项上分别点击两个自定义按钮。

SwiftUI - 列表中的两个按钮

SwiftUI - Two buttons in a List

swift