How to change SwiftUI List section separator color
Table of Contents
Some SwiftUI List styles got a section separator, e.g., .plain
, .grouped
.
In iOS 15, SwiftUI got a new modifier, listSectionSeparatorTint(_:edges:)
, to change the color for this section separator.
You can easily support sarunw.com by checking out this sponsor.
Debug 10x faster with Proxyman: Your ultimate tool to capture HTTPs requests/ responses, natively built for your iPhone and macOS. Special deal for Black Friday: Get 30% off for all Proxyman licenses with code “BLACKFRIDAY2024”.
How to change the SwiftUI List Section separator color
To change a list section separator color, we apply listSectionSeparatorTint(_:edges:)
to a Section
, passing the separator color as an argument.
NavigationView {
List {
Section("Section Header") {
ForEach(0..<6) { i in
Text("Row \(i.description)")
}
}
.listSectionSeparatorTint(.pink)
}
.listStyle(.plain)
.navigationTitle("List")
}
Make sure you apply listSectionSeparatorTint(_:edges:)
to a Section
.
The listSectionSeparatorTint(_:edges:)
has an optional second argument that you can specify which edges the color applies. By default, it's applied to all edges.
But from my test on Xcode 14, this edges
parameter doesn't work as expected. The .top
edge is not working at all. As you can see from the previous example, the top separator is still gray even though we allied the color to all edges.
Read more article about SwiftUI, List, iOS 15, or see all available topic
Enjoy the read?
If you enjoy this article, you can subscribe to the weekly newsletter.
Every Friday, you'll get a quick recap of all articles and tips posted on this site. No strings attached. Unsubscribe anytime.
Feel free to follow me on Twitter and ask your questions related to this post. Thanks for reading and see you next time.
If you enjoy my writing, please check out my Patreon https://www.patreon.com/sarunw and become my supporter. Sharing the article is also greatly appreciated.
Become a patron Buy me a coffee Tweet ShareHow to remove List Section separators in SwiftUI
Some list style has section separators. Let's learn how to remove them.
How to fix preferredStatusBarStyle not getting called
Two common reasons make the preferredStatusBarStyle not getting called.