SwiftUI - Two buttons in a List

Question

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

I don't think there's a way to do that yet - as a temporary workaround, you could replace the list with a `ForEach` of `HStack`, where `HStack` will be your row content. Be aware that the styling won't be the same - `List` is more refined in that sense. — Matteo Pacini, Jun 13 '19 at 08:41
Possible duplicate of [SwiftUI - Multiple Buttons in a List row](https://stackoverflow.com/questions/56561064/swiftui-multiple-buttons-in-a-list-row) — Fogmeister, Jun 13 '19 at 08:47
@Fogmeister That solution uses .tapAction, a working solution, tho the highlight states are lost.. — Heestand XYZ, Jun 17 '19 at 11:27
@Fogmeister I combined it with one button and one tapAction of the info image, it's a working solution for now. — Heestand XYZ, Jun 17 '19 at 11:29

Anton · Accepted Answer · 2019-11-16T23:27:18.393

93

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

edited Nov 16 '19 at 23:27

answered Nov 16 '19 at 22:16

Anton

1,655
15
16

20

`.buttonStyle(BorderlessButtonStyle())` did it! thanks! – Heestand XYZ Nov 27 '19 at 09:19
2

Also worked for me. Who would've thought a 'styling' modifier would solve an interaction issue! Love SwiftUI but this certainly feels unintuitive. – Neil Smith Jan 27 '21 at 04:41
You are a savior really hard to figure out, I think SwiftUI need to evolve a lot – anoop4real Dec 28 '21 at 17:48
You are the man for this, could not figure it out. thank you! – Swink Apr 27 '22 at 16:39

Jake · Answer 2 · 2023-04-14T14:35:07.570

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 .onTapGesture. 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)
            .onTapGesture {
                print("action1")
            }
    
        Image(systemName: "info.circle")
            .foregroundColor(.accentColor)
            .onTapGesture {
                print("action2")
            }
    }
}

thanks, it works! Tho not sure how to highlight the button, on down and up events, any idea on how to achieve this? — Heestand XYZ, Jul 03 '19 at 14:34
In the latest version of SwiftUI `tapAction` became `onTapGesture` — YoanGJ, Nov 23 '19 at 14:06

score 4 · Answer 3 · answered Jun 18 '21 at 08:45

4

On Xcode 12.5 I've had the same issue in SwiftUI, the full area of the list item being highlighted when tapped.

.buttonStyle(BorderlessButtonStyle()) does the job, and now the two custom button can be tapped separately on the list item.

answered Jun 18 '21 at 08:45

kewika

47
1
5

score 2 · Answer 4 · answered Nov 07 '19 at 10:22

2

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.

answered Nov 07 '19 at 10:22

Apostolos Apostolidis

179
4
16

1

Had an issue with buttons in a list row as well where tapping anywhere in the list would trigger one of the button actions, but adding a `.buttonStyle(PlainButtonStyle())` to each button helped restrict the tap zone to the actual buttons themselves. – UberJason Jan 07 '20 at 18:46
Had the same problem in an HStack. Text works but of course you don't get the default styling. Weird bug... assume this will be fixed in next version of Xcode. thx – Jason Jun 13 '20 at 13:57

score -7 · Answer 5 · edited Jun 13 '19 at 09:31

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

Did you tried your code?, Will this solve the real problem? – Johnykutty Jun 13 '19 at 12:05 — Johnykutty, Jun 13 '19 at 12:05

SwiftUI - Two buttons in a List

5 Answers5

Linked