macOS下SwiftUI List背景色修改失败问题求助

我太懂这种 frustration 了——在macOS上用SwiftUI调List背景色的时候，直接加.background()完全没反应，只能改每行的背景，而且iOS上那套UITableView.appearance()的方案在macOS根本不管用。别着急，我给你两个针对性的解决方案，分版本适配：

方案一：macOS 13+（Ventura及以上）推荐用法 #

从Ventura开始，SwiftUI新增了.scrollContentBackground(.hidden)修饰符，专门用来隐藏滚动视图（包括List）的默认背景。用这个之后，你原来加的.background()就能正常生效了：

VStack {
    List() {
        Text("Test")
            .listRowBackground(Color.green)
        Text("Test")
            .listRowBackground(Color.green)
        Text("Test")
            .listRowBackground(Color.green)
    }
    .scrollContentBackground(.hidden) // 关键：移除List默认的滚动背景
    .background(Color.red) // 现在这个背景色会正常显示
}
.background(Color.red)

原理很简单：List的默认背景其实是它内部滚动视图的背景，之前你的.background()被这个默认背景挡住了，隐藏之后就能看到外层的背景色了，同时每行的listRowBackground依然会保留绿色。

方案二：macOS 12及以下（Monterey及更早）兼容方案 #

如果你的App需要兼容旧版macOS，那得用AppKit的NSTableView外观设置，或者用ZStack的小技巧：

方法A：全局修改NSTableView外观 #

在你的App初始化或者View的onAppear里设置NSTableView的全局外观：

struct ContentView: View {
    var body: some View {
        VStack {
            List() {
                Text("Test")
                    .listRowBackground(Color.green)
                // 更多行
            }
        }
        .onAppear {
            // 设置List整体背景色
            NSTableView.appearance().backgroundColor = NSColor.red
            // 如果想去掉默认的行分隔线，可以再加这句
            NSTableView.appearance().gridColor = NSColor.clear
        }
    }
}

⚠️ 注意：这个方法是全局生效的，会影响App里所有的List组件。如果只想单独修改某一个List，可以创建自定义的NSAppearance作用域：

List() {
    // 内容
}
.appearance(customTableAppearance())

// 自定义外观函数
func customTableAppearance() -> NSAppearance {
    let appearance = NSAppearance(named: .aqua)!
    let customAppearance = appearance.copy() as! NSAppearance
    customAppearance.setCustomColor(.red, for: .tableBackgroundColor)
    return customAppearance
}

方法B：ZStack包裹实现局部背景 #

不想改全局外观的话，用ZStack把List放在一个颜色层上面，同时让List背景透明：

ZStack {
    Color.red // 底层背景色
    List() {
        Text("Test")
            .listRowBackground(Color.green)
        // 更多行
    }
    .opacity(0.99) // 让List稍微透明，显示底层颜色
}

这个方法的缺点是可能会轻微影响List的交互手感，所以优先推荐方法A。

这样改完之后，你就能看到List的整体背景变成红色，同时每行保持绿色的效果了。

内容的提问来源于stack exchange，提问作者davidev