SwiftUI From/List Issue: All Buttons Trigger Simultaneously in List View

Question

Created 1w

Replies 3

Boosts 0

Participants 3

Hello everyone, I am a beginner in programming and recently encountered an interesting issue in SwiftUI. (I must admit that it might not be a bug and could simply be due to my lack of understanding.)

I have extracted the relevant code that causes this behavior. Here's the code:

struct BugView: View {
    var body: some View {
        List {
            VStack {
                Button("Bug") {
                    print("1")
                }
                Button("Bug") {
                    print("2")
                }
                Button("Bug") {
                    print("3")
                }
            }
        }
    }
}

In this view, clicking any of the buttons results in all of them being triggered simultaneously. As a result, the console outputs:

1
2
3

I would appreciate it if someone could help me understand why this happens and how to fix it. Thanks in advance!

Answered by Claude31 in 819568022

Confirm what darkpaw said.

Whenever you have multiple buttons in a list row, you need to manually set the button style to .borderless or .plain . This is because buttons “adapt” to their context. According to the documentation: So when your button is in a List, its tap target extends to fill the row and you get a highlight animation. SwiftUI isn’t smart enough to stop this side effect when you have more than 2 buttons, so you need to set buttonStyle manually.

    .buttonStyle(.borderless)

Get details here

https://stackoverflow.com/questions/70399810/buttons-in-swiftui-list-foreach-view-trigger-even-when-not-tapped

Boost

Answer 1

RuiqingHu OP

1w

The solution i use is

struct BugView: View {
    var body: some View {
        Form{
            ScrollView {
                VStack {
                    Button("Bug"){
                        print("1")
                    }
                    Button("Bug"){
                        print("2")
                    }
                    Button("Bug"){
                        print("3")
                    }
                }
            }
        }
    }
}

0

Answer 2

darkpaw OP

1w

I can't remember the name of it but you need to add a modifier to each button when it's in a List. I think it's a ButtonStyle and it's Plain, something like that. (I'm not near my Mac at the moment so can't confirm.)

0

Answer 3

Claude31 OP

1w

Accepted Answer

Confirm what darkpaw said.

Whenever you have multiple buttons in a list row, you need to manually set the button style to .borderless or .plain . This is because buttons “adapt” to their context. According to the documentation: So when your button is in a List, its tap target extends to fill the row and you get a highlight animation. SwiftUI isn’t smart enough to stop this side effect when you have more than 2 buttons, so you need to set buttonStyle manually.

    .buttonStyle(.borderless)

Get details here

https://stackoverflow.com/questions/70399810/buttons-in-swiftui-list-foreach-view-trigger-even-when-not-tapped

0