The default colour of a list row when tapped is grey.
I know how to change background colour using .listRowBackground, but then it changes to the whole list.
How can I change to a custom colour when tapped, so ONLY the tapped row stays red?
import SwiftUI
struct ExampleView: View {
@State private var fruits = ["Apple", "Banana", "Grapes", "Peach"]
var body: some View {
NavigationView {
List {
ForEach(fruits, id: \.self) { fruit in
Text(fruit)
}
.listRowBackground(Color.red)
}
}
}
}
struct ExampleView_Previews: PreviewProvider {
static var previews: some View {
ExampleView()
}
}
First, you want the .listRowBackground
modifier on each row, not the whole list. You can then use it to conditionally set the background color on each row.
If you save the tapped row's ID in a @State
var, you can set the row to red or the default color based on selection state. Here's the code:
import SwiftUI
struct ContentView: View {
@State private var fruits = ["Apple", "Banana", "Grapes", "Peach"]
@State private var selectedFruit: String?
var body: some View {
NavigationView {
List(selection: $selectedFruit) {
ForEach(fruits, id: \.self) { fruit in
Text(fruit)
.tag(fruit)
.listRowBackground(fruit == selectedFruit ? Color.red : nil)
}
}
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}