by Lead by code Apr 20, 2024 iOS

SwiftUI – Multiple Buttons in a List row

Certainly! When you have multiple buttons in a SwiftUI List row and want to distinguish which button is tapped without the entire row highlighting, you can use the following approach:

List {
    // Both buttons in an HStack so that they appear in a single row
    HStack {
        Button(action: {
            print("Button 1 tapped")
        }) {
            Text("One")
        }
        .buttonStyle(.borderless) // Prevents highlighting

        Button(action: {
            print("Button 2 tapped")
        }) {
            Text("Two")
        }
        .buttonStyle(.plain) // Prevents highlighting
    }
}

In this example:

We use .buttonStyle(.borderless) for the first button and .buttonStyle(.plain) for the second button. This prevents the entire row from highlighting when either button is tapped.
The onTapGesture modifier is not used here because it doesn’t provide the same button behavior as the Button view.

Feel free to customize the button styles further based on your design preferences. 🚀📜

In SwiftUI, you can create a row with multiple buttons in a List by using an HStack inside a ForEach loop. Here’s a basic example:

import SwiftUI

struct ContentView: View {
    let buttons = ["Button 1", "Button 2", "Button 3"] // Example buttons
    
    var body: some View {
        List {
            ForEach(buttons, id: \.self) { buttonTitle in
                ButtonRow(buttonTitle: buttonTitle)
            }
        }
    }
}

struct ButtonRow: View {
    var buttonTitle: String

    var body: some View {
        HStack {
            Text(buttonTitle)
            Spacer()
            Button(action: {
                // Action for the first button
                print("First button tapped for \(buttonTitle)")
            }) {
                Text("Button 1")
                    .padding(.horizontal)
                    .padding(.vertical, 8)
                    .background(Color.blue)
                    .foregroundColor(.white)
                    .cornerRadius(8)
            }

            Button(action: {
                // Action for the second button
                print("Second button tapped for \(buttonTitle)")
            }) {
                Text("Button 2")
                    .padding(.horizontal)
                    .padding(.vertical, 8)
                    .background(Color.green)
                    .foregroundColor(.white)
                    .cornerRadius(8)
            }
        }
        .padding()
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

In this example:

ContentView contains a List with rows generated by a ForEach loop iterating over an array of button titles.
Each row is represented by the ButtonRow view, which contains an HStack with a Text followed by two Buttons.
Each Button has its own action, which can be customized according to your requirements.
You can customize the appearance and actions of the buttons as needed.

Adjust the appearance and actions of the buttons according to your specific use case and design requirements.