SwiftUI background color of List Mac OS
First picture shows the origin of the issue - used scroll view is opaque by default, so added color background is there but not visible
So the solution is to find that scroll view and disable drawing background
Here is possible approach to solve this, or workaround (but valid as all modifications are made via AppKit API, no hardcoding). Actually it is the same as it would turned off checkbox in XIB for scrollview holding our tableview. Tested with Xcode 11.2 / macOS 10.15.
struct ScrollViewCleaner: NSViewRepresentable {
func makeNSView(context: NSViewRepresentableContext<ScrollViewCleaner>) -> NSView {
let nsView = NSView()
DispatchQueue.main.async { // on next event nsView will be in view hierarchy
if let scrollView = nsView.enclosingScrollView {
scrollView.drawsBackground = false
}
}
return nsView
}
func updateNSView(_ nsView: NSView, context: NSViewRepresentableContext<ScrollViewCleaner>) {
}
}
extension View {
func removingScrollViewBackground() -> some View {
self.background(ScrollViewCleaner())
}
}
struct TestListBackground: View {
var body: some View {
List()
{
ForEach(0..<3) { _ in
Text("Test")
.listRowBackground(Color.green)
}
.removingScrollViewBackground() // must be called _inside_ List
.background(Color.blue)
}.background(Color.red)
}
}
Unfortunately, ListStyle
protocol is not documented and .listStyle
modifier has very limited usage, you can choose from CarouselListStyle, DefaultListStyle, GroupedListStyle ,PlainListStyle, SidebarListStyle
Try to mimic List with ScrollView combined with ForEach, which gives you a lot of flexibility, the missing parts are easy to write. Once the ListStyle will be available for developers, it will be easy to change the code ...
Example with source code
struct ContentView: View {
var body: some View {
HStack(spacing: 0) {
ScrollView {
ForEach(0 ..< 4) { idx in
VStack(alignment: .leading) {
Divider().background(Color.blue)
Text("Test \(idx)")
.padding(.horizontal, 10)
.background(Color.pink)
//Divider()
}.padding(.bottom, -6)
}
}
.frame(maxWidth: 100)
.background(Color.gray)
Color.green
}
.frame(maxWidth: .infinity, maxHeight: .infinity)
}
}
Update: I found a much better way to remove a list's background without affecting the whole app: by using Introspect.
import Introspect
import SwiftUI
extension List {
/// List on macOS uses an opaque background with no option for
/// removing/changing it. listRowBackground() doesn't work either.
/// This workaround works because List is backed by NSTableView.
func removeBackground() -> some View {
return introspectTableView { tableView in
tableView.backgroundColor = .clear
tableView.enclosingScrollView!.drawsBackground = false
}
}
}
Usage:
List {
ForEach(items) { item in
...
}
}.removeBackground()
Old answer:
@Asperi's answer works, but only until the window is resized. Here's another workaround for overriding List
's color:
extension NSTableView {
open override func viewDidMoveToWindow() {
super.viewDidMoveToWindow()
backgroundColor = NSColor.clear
enclosingScrollView!.drawsBackground = false
}
}
A potential downside is that this will affect all lists in the app.