swiftswiftui

Remove/change section header background color in SwiftUI List


With a simple List in SwiftUI, how do I change/remove the standard background color for the section header

struct ContentView : View {
    var body: some View {
        List {
            ForEach(0..<4) { section in
                Section(header: Text("Section")) {
                    ForEach(0..<4) { row in
                        Text("Row")
                    }
                }
            }
        }
    }
}

Screenshot with grey section header background


Solution

  • No need to change appearance of all lists or do anything strange, just:

    1. (Optional) Put .listStyle(GroupedListStyle()) on your List if you do not want sticky headers.
    2. Set the listRowInsets on the section to 0.
    3. Set the Section.backgroundColor to clear 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
    

    Example List with Section Header Colored