How can I make a row selectable in a SwiftUI List?

To make a row selectable in a SwiftUI List, you'll typically use a combination of state management and the .onTapGesture modifier. Here’s how you can achieve it:

1. Define a State Variable:

- First, declare a state variable to keep track of the currently selected row. This is usually an optional value if no row is selected initially, or a specific type matching the identifier for your rows.

2. Use .onTapGesture to Handle Selection:

- Apply .onTapGesture to each row within the List to detect taps. Inside this gesture, update the state variable with the tapped row's identifier.

3. Visually Indicate Selection:

- Optionally, you can visually represent which row is selected. This might involve changing the row’s background color, adding an icon, or any other UI modification based on the state variable.

4. Example Code:

struct ContentView: View {
 @State private var selectedItem: Int? = nil
 let items = [1, 2, 3, 4, 5]

 var body: some View {
  List(items, id: \.self) { item in
    Text("Item \(item)")
      .frame(maxWidth: .infinity, alignment: .leading)
      .padding()
      .background(selectedItem == item ? Color.blue.opacity(0.3) : Color.clear)
      .onTapGesture {
        selectedItem = item
      }
  }
 }
}

5. Explanation of the Code:

- @State private var selectedItem: Int? = nil: This line declares a state variable named selectedItem to keep track of the selected item's value. It is initialized to nil, meaning initially no item is selected.

- List(items, id: \.self) { item in ... }: This creates a list iterating over the items array. Each item is identifiable by itself (\.self).

- Text("Item \(item)"): This renders a text view for each item within the list.

- .background(selectedItem == item ? Color.blue.opacity(0.3) : Color.clear): This line sets the background of the row to a blue color with some opacity if the current item is the selectedItem, otherwise it's transparent.

- .onTapGesture { selectedItem = item }: This modifier detects a tap on the text view. When tapped, it sets the selectedItem to the value of the tapped item.

6. Handling Complex Data:

- If your list items are not simple integers or strings, replace Int with the correct data type of your items. The important part is that you can uniquely identify the selected element.

By combining state management and .onTapGesture, you can make rows in a SwiftUI List selectable with appropriate visual feedback. This approach allows you to track and respond to user selections within your SwiftUI application.

Learn more about this