SwiftUI - Two buttons in a List

问题:

I've got two buttons in a list, tho when tapping, the full area of the list item is highlighted. Is there a way to separate the two buttons?

In this case I've got an Action button and an Info button:

I found this question, tho no direct solution.

Here's the code:

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)
            }
        }
    }
}

回答1:

Set the button style to something different from the default, e.g., 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)
  }
}

回答2:

I struggled with this issue for a while. Apple has made Button kind of special in SwiftUI. It can change depending on the context it's used. That is why we see this weird functionality when a Button is inside a List.

Fortunately, there are other ways using .tapAction or a TapGesture. Try out the code below.

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

or

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

回答3:

For anyone having a similar problem with the latest SwiftUI (Xcode 11.2) and multiple Buttons in a HStack, I got my problem solved only after converting all buttons in the HStack to Images and adding the .onTapGesture handler.

The problem in my case was that tapping on one button triggered all other buttons in the HStack. Only after I converted all buttons to images did they stop interfering with each other.

Of course, if your buttons don't have an image, you can use Text instead.

回答4:

You can add padding or try adding Spacer

Add Padding

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)
        }
    }

Add 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)
        Spacer()
        Group {
            Button(action: {
                print("action")
            }) {
                Image(systemName: "info.circle")
                    .foregroundColor(.accentColor)
            }
        }
    }