Menu
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) } } } } 
484
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 .
SwiftUI's button is similar to UIButton , except it's more flexible in terms of what content it shows and it uses a closure for its action rather than the old target/action system. To create a button with a string title you would start with code like this: Button("Button title") { print("Button tapped!") }
Probably the simplest way to build a list is to create a new SwiftUI view and wrap the Hello World text in a List: struct StaticListView: View { var body: some View { List { Text("Hello, world!") } } } To add more items to the list, we can just add another line: List { Text("Hello, world!") Text("Hello, SwiftUI!") }
To use a sheet, give it something to show (some text, an image, a custom view, etc), add a Boolean that defines whether the detail view should be showing, then attach it to your main view as a modal sheet. Important: If you're targeting iOS 14 or below, you should use @Environment(\.
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) } } 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") }) } } If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
