macOS下SwiftUI List选中行自定义视图颜色适配方案问询

在macOS的SwiftUI List组件里，行被选中时会显示蓝色高亮，系统默认primary颜色的Text会自动转为白色，但自定义颜色的视图（比如示例里的蓝色圆点）没法自动跟着变，想要让它们也在选中时变成白色，匹配系统应用的表现。

示例代码：

List(selection: $selection) {
    ForEach(0..<4) { index in
        HStack {
            Image(systemName: "circle.fill")
                .foregroundColor(.blue)
            Text("Test")
        }
        .tag(index)
    }
}

试过的无效方法：

• 在NSTableCellView里有backgroundStyle属性，但SwiftUI里找不到对应功能；
• 查找所有可用环境变量，没找到合适选项；
• 手动给每个视图绑定isSelected，但List的selection绑定要到鼠标抬起才更新，而高亮在鼠标按下和拖拽时就会变化，导致画面闪烁，效果不符合预期。

解决方案 #

方法一：利用macOS 13+的backgroundStyle环境变量 #

从macOS Ventura（13.0）开始，SwiftUI提供了BackgroundStyle环境变量，可直接判断当前行是否处于选中状态（选中时背景样式对应深色高亮）。修改代码如下：

struct ContentView: View {
    @State private var selection: Int?
    
    var body: some View {
        List(selection: $selection) {
            ForEach(0..<4) { index in
                CustomRow()
                    .tag(index)
            }
        }
    }
}

struct CustomRow: View {
    @Environment(\.backgroundStyle) private var backgroundStyle
    
    private var isSelected: Bool {
        // 选中时backgroundStyle为系统强调色的深色变体
        guard let styleColor = backgroundStyle as? NSColor else { return false }
        return styleColor == NSColor.controlAccentColor
    }
    
    var body: some View {
        HStack {
            Image(systemName: "circle.fill")
                .foregroundColor(isSelected ? .white : .blue)
            Text("Test")
        }
    }
}

方法二：兼容旧版本（macOS 12及以下） #

对于更早的系统，需要通过NSViewRepresentable包装NSTableCellView，监听其backgroundStyle的变化，实时传递给SwiftUI视图：

// 自定义TableCell，监听backgroundStyle变化
class ListCellView: NSTableCellView {
    var onBackgroundStyleChange: ((NSBackgroundStyle) -> Void)?
    
    override var backgroundStyle: NSBackgroundStyle {
        didSet {
            onBackgroundStyleChange?(backgroundStyle)
        }
    }
}

// 包装成SwiftUI可使用的视图
struct CellBackgroundStyleReader: NSViewRepresentable {
    var content: (NSBackgroundStyle) -> AnyView
    
    func makeNSView(context: Context) -> ListCellView {
        let cell = ListCellView()
        cell.onBackgroundStyleChange = { style in
            context.coordinator.currentStyle = style
            // 触发视图更新
            context.coordinator.parent.triggerUpdate()
        }
        return cell
    }
    
    func updateNSView(_ nsView: ListCellView, context: Context) {}
    
    func makeCoordinator() -> Coordinator {
        Coordinator(parent: self)
    }
    
    class Coordinator {
        let parent: CellBackgroundStyleReader
        var currentStyle: NSBackgroundStyle = .light
        
        init(parent: CellBackgroundStyleReader) {
            self.parent = parent
        }
    }
    
    private func triggerUpdate() {
        // 强制刷新内容视图
        _ = content(coordinator.currentStyle)
    }
}

// 使用示例
struct ContentView: View {
    @State private var selection: Int?
    
    var body: some View {
        List(selection: $selection) {
            ForEach(0..<4) { index in
                CellBackgroundStyleReader { style in
                    AnyView(
                        HStack {
                            Image(systemName: "circle.fill")
                                .foregroundColor(style == .dark ? .white : .blue)
                            Text("Test")
                        }
                    )
                }
                .tag(index)
            }
        }
    }
}

两种方法都能实现：当行被选中（包括鼠标按下、拖拽选中的状态），自定义颜色的视图会自动切换为白色，和系统Text的表现一致，不会出现闪烁问题。

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