SwiftUI: List row background
Dear future me. Have you remembered how to handle backgrounds in a list yet? Perhaps Apple changed things up, and it doesn’t suck anymore? But, if not - let me help you.
The Problem
The modifier .listRowBackground
sounds like it should do the job, and looking at the documentation it clearly should:
listRowBackground(_:)
Places a custom background view behind a list row item.
Moreover, from the documentation we are also clearly given some code:
struct ListRowBackground: View {
enum Flavor: String, CaseIterable, Identifiable {
var id: String { self.rawValue }
case vanilla, chocolate, strawberry
}
var body: some View {
List(Flavor.allCases, id: \.self) {
Text($0.rawValue)
}
.listRowBackground(Image(systemName: "sparkles"))
}
}
However. this. does. not. work.
Also, it does not work when applying the modifier on the list item it self.
The solution
It turns out that the modifier only works when applied in a ForEach
, so the following will work:
List {
ForEach(Flavor.allCases, id: \.self) {
Text("Row \($0.rawValue)")
}
.listRowBackground(Color.red)
}
Which will apply the same background to all items of a list, but we can also do in for a single item:
var body: some View {
List {
ForEach(Flavor.allCases, id: \.self) {
if $0 == .strawberry {
Text("Row \($0.rawValue)")
.listRowBackground(Color.red)
} else {
Text("Row \($0.rawValue)")
}
}
}
}