SwiftUI background color of List Mac OS

Question

I am using a ListView in Mac OS. I am trying to change that background color of that ListView. However, it is not that easy as expected.

I tried using .background(Color(.red)) attribute on the ListView. That didn't change anything.

I could only find .listRowBackground(Color(.red))which had an influence on the table rows. However, the other background wasn't effected.

I prepared a little demo to demonstrate:

In my view body:

  VStack
    {
        List()
        {
            Text("Test")
                .listRowBackground(Color.green)

            Text("Test")
                .listRowBackground(Color.green)

            Text("Test")
                .listRowBackground(Color.green)

        }.background(Color(.red))

    }.background(Color(.red))

That is the result I get:

The main background does not change. I read about a solution changing the UITableView.appearance but that is not possible for me in SwiftUI for Mac OS.

Thanks in advance

Answer 1

Update 2: I haven't verified this, but user1046037 says there is a new API available for changing scrolling backgrounds: scrollContentBackground.

Update 1: 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.

Answer 2

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

Answer 3

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

Answer 4

In Xcode 14 (Swift 5) you can do:

 List {
 ...
 }
 .scrollContentBackground(.hidden)
 .background(.red)

This makes the ScrollView background invisible and the List background can now be customised.