113

Say I have a List and two buttons in one row, how can I distinguish which button is tapped without the entire row highlighting?

For this sample code, when any one of the buttons in the row is tapped, both button's action callbacks are invoked.

// a simple list with just one row
List {

    // both buttons in a HStack so that they appear in a single row
    HStack {
        Button {
            print("button 1 tapped")
        } label: {
            Text("One")
        }
            
        Button {
            print("button 2 tapped")
        } label: {
            Text("Two")
        }
    }
}

When only one of buttons is tapped once, I see the callbacks for both buttons being called, which is not what I want:

button 1 tapped
button 2 tapped
1

4 Answers 4

226

You can apply any button style (for example, .bordered, .borderless, .borderedProminent, etc.) EXCEPT for .automatic.

    List([1, 2, 3], id: \.self) { row in
        HStack {
            Button(action: { print("Button at \(row)") }) {
                Text("Row: \(row) Name: A")
            }
            .buttonStyle(.borderless)
            
            Button(action: { print("Button at \(row)") }) {
                Text("Row: \(row) Name: B")
            }
            .buttonStyle(.plain)
        }
    }
10
  • 2
    This is the best solution if you need to maintain button animations (highlights, etc.)
    – sabiland
    Feb 5, 2020 at 12:37
  • 27
    Worked a charm, but why?
    – Toby
    Jul 2, 2020 at 10:07
  • 21
    Yes. This is a real WTAF for me. How did you discover this?
    – Jessy
    Sep 10, 2020 at 17:06
  • 4
    @Jessy Spending a lot of time in the documentation.
    – Ramis
    Oct 7, 2020 at 20:54
  • 2
    Excellent. It's work perfectly, even with a NavigationLink on all the row. Dec 25, 2020 at 0:47
29

Seems to be a specific issue concerning Button when contained in a List row.

Workaround:

List {
  HStack {
    Text("One").onTapGesture { print("One") }
    Text("Two").onTapGesture { print("Two") }
  }
}

This yields the desired output.

You can also use a Group instead of Text to have a sophisticated design for the "buttons".

3
  • 2
    Unfortunately this bug isn't limited to Buttons within a List. I am able to reproduce the same issue with multiple NavigationLinks inside a HStack, inside of a List.
    – BlueSolrac
    Feb 18, 2020 at 20:28
  • 1
    This is just a workaround. Using BorderlessButtonStyle() is the best way. Mar 3, 2020 at 0:44
  • While this works, please keep in mind that this change has more implications. The accessibility API (for example for VoiceOver users) will no longer recognize "One" and "Two" as button. You would have to give it a button trait. I would say that adding a buttonStyle is the better way.
    – n-develop
    Nov 15, 2022 at 7:36
10

One of the differences with SwiftUI is that you are not creating specific instances of, for example UIButton, because you might be in a Mac app. With SwiftUI, you are requesting a button type thing.

In this case since you are in a list row, the system gives you a full size, tap anywhere to trigger the action, button. And since you've added two of them, both are triggered when you tap anywhere.

You can add two separate Views and give them a .onTapGesture to have them act essentially as buttons, but you would lose the tap flash of the cell row and any other automatic button like features SwiftUI would give.

List {
    HStack {
        Text("One").onTapGesture {
            print("Button 1 tapped")
        }

        Spacer()

        Text("Two").onTapGesture {
            print("Button 2 tapped")
        }
    }
}
1
  • 5
    tapAction is no longer available (Xcode 11.2 beta). Use .onTapGesture() Oct 8, 2019 at 16:02
6

You need to create your own ButtonStyle:

  struct MyButtonStyle: ButtonStyle {
    func makeBody(configuration: Configuration) -> some View {
      configuration.label
        .foregroundColor(.accentColor)
        .opacity(configuration.isPressed ? 0.5 : 1.0)
    }
  }

  struct IdentifiableString: Identifiable {
    let text: String
    var id: String { text }
  }

  struct Test: View {
    var body: some View {
      List([
        IdentifiableString(text: "Line 1"),
        IdentifiableString(text: "Line 2"),
      ]) {
        item in
        HStack {
          Text("\(item.text)")
          Spacer()
          Button(action: { print("\(item.text) 1")}) {
            Text("Button 1")
          }
          Button(action: { print("\(item.text) 2")}) {
            Text("Button 2")
          }
        }
      }.buttonStyle(MyButtonStyle())
    }
  }
2
  • 2
    Actually, you do not need a custom style. Just use BorderlessButtonStyle()
    – Anton
    Nov 16, 2019 at 23:28
  • This is a more general solution that just using one of the few built in styles. Just what I was looking for. Thanks. Jan 29 at 19:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.