Remove/change section header background color in SwiftUI List

Question

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")
                    }
                }
            }
        }
    }
}

Answer 1

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

Answer 2

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")
                }
            }
        }
     }
  }
}

Answer 3

In beta 4, relativeWidth was deprecated. Code updated to reflect that.

Unfortunately, there's no quick parameter to set the background color. However, you can still do it:

import SwiftUI

struct ContentView : View {
    var body: some View {
        List {
            ForEach(0...3) { section in
                Section(header:
                            CustomHeader(
                                name: "Section Name",
                                color: Color.yellow
                            )
                        ) {
                    ForEach(0...3) { row in
                        Text("Row")
                    }
                }
            }
        }
    }
}

struct CustomHeader: View {
    let name: String
    let color: Color

    var body: some View {
        VStack {
            Spacer()
            HStack {
                Text(name)
                Spacer()
            }
            Spacer()
        }
        .padding(0).background(FillAll(color: color))
    }
}

struct FillAll: View {
    let color: Color
    
    var body: some View {
        GeometryReader { proxy in
            self.color.frame(width: proxy.size.width * 1.3).fixedSize()
        }
    }
}

Answer 4

I tried to use the custom header code above, and unfortunately could not get it to work in beta 6. That led me to the use of a ViewModifier:

public struct sectionHeader: ViewModifier{
var backgroundColor:Color
var foregroundColor:Color
public func body(content: Content) -> some View {
    content
    .padding(20)
    .frame(width: UIScreen.main.bounds.width, height: 28,alignment:
    .leading)
    .background(backgroundColor)
    .foregroundColor(foregroundColor)
}}

Which can be added to the sections in your list as follows:

struct ContentView: View {
@ObservedObject var service = someService()
var body: some View {
    NavigationView {
        List{
            ForEach(someService.sections) {section in
                Section(header: Text(section.title).modifier(sectionHeader(backgroundColor: Color(.systemBlue), foregroundColor: Color(.white)))){

Hope that helps somebody!

Answer 5

I was able to get the header to be clear (become white in my case) by using the custom modifiers. I needed to use listStyle() modifiers and all of the above didn't work for me.

Hope it helps someone else!

List {
    Section(header: HStack {
        Text("Header Text")
            .font(.headline)
            .padding()

            Spacer()
    }
    ) {
ForEach(0...3) { row in
                        Text("Row")
                    }
    }
}.listStyle(GroupedListStyle()).listSeparatorStyle()

public struct ListSeparatorStyleModifier: ViewModifier {
    public func body(content: Content) -> some View {
        content.onAppear {
            UITableView.appearance().separatorStyle = .singleLine
            UITableView.appearance().separatorInset = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 0)
            UITableViewHeaderFooterView.appearance().tintColor = .clear
            UITableView.appearance().backgroundColor = .clear // tableview background
            UITableViewCell.appearance().backgroundColor = .clear

        }
    }
}

extension View {
    public func listSeparatorStyle() -> some View {
        modifier(ListSeparatorStyleModifier())
    }
}

Answer 6

You have to use a rectangle combined with .listRowInsets on the view for your header section

Section(header: headerSectionView) {
    Text("MySection")
}


private var headerSectionView: some View {
    Rectangle()
        .fill(Color.blue) // will make a blue header background
        .listRowInsets(EdgeInsets(top: 0, leading: 0, bottom: 0, trailing: 0))
        .overlay(
            Text("My Section Title")
                .padding(.horizontal), // You need this to add back the padding
            alignment: .leading
        )
}

Answer 7

I found a better solution

UITableViewHeaderFooterView.appearance().backgroundView = .init()

Answer 8

Since iOS 16 you could use the scrollContentBackground(_:) modifier.

Reference here

In your example:

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

Answer 9

Another way you can do it by setting the frame of the header:

        VStack {
            List {
                ForEach(0...3) { section in
                    Section(header:
                        Text("Section")
                            .frame(minWidth: 0, maxWidth: .infinity,alignment:.leading)
                            .background(Color.blue.relativeWidth(2))
                    ) {
                        ForEach(0...3) { row in
                            Text("Row")
                        }
                    }
                }
            }
        }

Answer 10

iOS 16.4

Removing/Changing section header BG color

Use .listStyle(.plain) modifier to replace sections' header default BG color with a .clear color. To change sections' header color, use the same modifier and add a desired BG color in ZStack.

struct ContentView : View {
    var body: some View {
        ZStack {
            // Color.yellow.opacity(0.1).ignoresSafeArea()
            List {
                ForEach(0..<4) { section in
                    Section(header: Text("Section").font(.title)) {
                        ForEach(0..<4) { row in
                            Text("Row")
                        }
                    }
                }
            }.listStyle(.plain)            // clear color
        }
    }
}