Remove/change section header background color in SwiftUI List
The suggested solutions works until you decide to clear
your List
header background color.
Better solutions for List
header custom color:
1.This solution effects all of the List sections in your app: (or move it to your AppDelegate
class)
struct ContentView: View {
init() {
UITableViewHeaderFooterView.appearance().tintColor = UIColor.clear
}
var body: some View {
List {
ForEach(0 ..< 3) { section in
Section(header:
Text("Section")
) {
ForEach(0 ..< 3) { row in
Text("Row")
}
}
}
}
}
}
2.With this solution you can have custom List
header background color for each list in your app:
struct ContentView: View {
init() {
UITableViewHeaderFooterView.appearance().tintColor = UIColor.clear
}
var body: some View {
List {
ForEach(0 ..< 3) { section in
Section(header:
HStack {
Text("Section")
Spacer()
}
.listRowInsets(EdgeInsets(top: 0, leading: 0, bottom: 0, trailing: 0))
.background(Color.blue)
) {
ForEach(0 ..< 3) { row in
Text("Row")
}
}
}
}
}
}
No need to change appearance of all lists or do anything strange, just:
- (Optional) Put
.listStyle(GroupedListStyle())
on yourList
if you do not want sticky headers. - Set the
listRowInsets
on the section to 0. - Set the
Section.backgroundColor
toclear
to remove the default color, or whatever color you want to color it.
Example:
List {
Section(header: HStack {
Text("Header")
.font(.headline)
.foregroundColor(.white)
.padding()
Spacer()
}
.background(Color.blue)
.listRowInsets(EdgeInsets(
top: 0,
leading: 0,
bottom: 0,
trailing: 0))
) {
// your list items
}
}.listStyle(GroupedListStyle()) // Leave off for sticky headers