SwiftUI

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:

enter image description here

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

How do I add multiple buttons in SwiftUI?

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 .

How do I add a button in SwiftUI?

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

How do I create a list in SwiftUI?

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

How do I use sheets in 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")             })     } }

SwiftUI - Two buttons in a List

Tags:

swift

Heestand XYZ

People also ask

2 Answers

Anton

Jake

Recent Activity

Donate For Us