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")
}
}
}
}
}
}
No need to change appearance of all lists or do anything strange, just:
.listStyle(GroupedListStyle()) on your List if you do not want sticky headers.listRowInsets on the section to 0.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
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")
}
}
}
}
}
}
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()
}
}
}
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!
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
)
}
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())
}
}
Since iOS 16 you could use the scrollContentBackground(_:) modifier.
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)
}
}
For future readers, the correct way is to use listRowBackground in the same manner as it is used for rows, but applied to sections.
Doing this way is also possible to use clear color.
Here is the code:
struct ContentView: View {
var body: some View {
List {
ForEach(0..<4) { section in
Section {
Text("Section #\(section)")
}
.listRowBackground(Color.yellow)
ForEach(0..<4) { row in
Text("Item #\(row)")
}
}
.listRowBackground(Color.red)
}
.listStyle(.plain)
}
}
Output:
I found a better solution
UITableViewHeaderFooterView.appearance().backgroundView = .init()
iOS 16.4
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
}
}
}
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")
}
}
}
}
}
iOS 16.0 or later
Removing/Changing section header Background
Works properly with safe area and orientation changes.
Use .scrollContentBackground(.hidden) and then set whatever background you want using .background(_:alignment:).
Example:
struct ContentView : View {
var body: some View {
List {
ForEach(0..<4) { section in
Section(header: Text("Section")) {
ForEach(0..<4) { row in
Text("Row")
}
}
}
}
.listStyle(.plain)
.scrollContentBackground(.hidden)
.background(Color.yellow.ignoresSafeArea())
}
}
