MacOS SwiftUI如何修改ListView选中项的高亮背景色？

要替换List选中项的默认霓虹高亮为红色，直接使用.tint或.listRowBackground无法生效——因为macOS的List底层基于NSTableView，选中状态的样式由AppKit的行视图控制，而非SwiftUI的基础修饰符。以下是无需修改全局Accent Color或系统设置的解决方案：

解决方案1：使用Introspect库（推荐） #

Introspect可以直接获取SwiftUI视图对应的AppKit底层控件，快速修改选中样式：

1. 添加Introspect依赖：通过Swift Package Manager添加依赖，地址为https://github.com/siteline/SwiftUI-Introspect

2. 自定义行视图：创建继承自NSTableRowView的子类，重写选中区域的绘制逻辑：

import AppKit

class CustomHighlightRowView: NSTableRowView {
    override func drawSelection(in dirtyRect: NSRect) {
        guard selectionHighlightStyle != .none else { return }
        // 绘制自定义红色选中背景，可调整内边距适配视觉需求
        let highlightRect = bounds.insetBy(dx: 3, dy: 3)
        NSColor.red.setFill()
        highlightRect.fill(using: .sourceOver)
    }
}

3. 修改List代码：在List上添加Introspect修饰符，替换默认行视图：

import SwiftUI
import Introspect

struct YourSidebarView: View {
    @State private var selection: Int? = 0
    // 保留原有的viewModel、绑定属性等
    // ...

    var body: some View {
        NavigationView {
            VStack {
                List {
                    Group {
                        NavigationLink(destination: TimelineView(viewModel: viewModel, isTutorialActive: $isTutorialActive, isTracking: $isTracking), tag: 0, selection: $selection) {
                            Label {
                                Text("Timeline")
                            } icon: {
                                Image(systemName: "calendar.day.timeline.left")
                            }
                        }
                      
                        NavigationLink(destination: SettingsView(viewModel: viewModel), tag: 1, selection: $selection) {
                            Label {
                                Text("Settings")
                            } icon: {
                                Image(systemName: "gear")
                            }
                        }
                        
                        NavigationLink(destination: AboutView(), tag: 2, selection: $selection) {
                            Label {
                                Text("About")
                            } icon: {
                                Image(systemName: "info.circle")
                            }
                        }
                        
                        NavigationLink(destination: FAQView(), tag: 3, selection: $selection) {
                            Label {
                                Text("FAQ")
                            } icon: {
                                Image(systemName: "questionmark.circle")
                            }
                        }
                    }
                }
                .introspectTableView { tableView in
                    // 绑定自定义行视图
                    tableView.rowViewProvider = { _, _ in
                        CustomHighlightRowView()
                    }
                }
           }
       }
    }
}

解决方案2：不使用第三方库（手动包装NSTableView） #

如果不想引入第三方依赖，可以手动创建NSViewRepresentable包装NSTableView，完全自定义选中样式（代码量较大，适合需要深度定制的场景）：

import SwiftUI
import AppKit

struct CustomList<T: Identifiable, Content: View>: NSViewRepresentable {
    let items: [T]
    let selection: Binding<Int?>
    let content: (T) -> Content
    
    func makeNSView(context: Context) -> NSTableView {
        let tableView = NSTableView()
        tableView.delegate = context.coordinator
        tableView.dataSource = context.coordinator
        tableView.selectionHighlightStyle = .regular
        tableView.allowsMultipleSelection = false
        
        // 添加列映射SwiftUI内容
        let column = NSTableColumn(identifier: NSUserInterfaceItemIdentifier("content"))
        column.width = tableView.frame.width
        tableView.addTableColumn(column)
        
        return tableView
    }
    
    func updateNSView(_ nsView: NSTableView, context: Context) {
        nsView.reloadData()
        if let selectedIndex = selection.wrappedValue {
            nsView.selectRowIndexes(IndexSet(integer: selectedIndex), byExtendingSelection: false)
        } else {
            nsView.deselectAll(nil)
        }
    }
    
    func makeCoordinator() -> Coordinator {
        Coordinator(parent: self)
    }
    
    class Coordinator: NSObject, NSTableViewDelegate, NSTableViewDataSource {
        let parent: CustomList
        
        init(parent: CustomList) {
            self.parent = parent
        }
        
        func numberOfRows(in tableView: NSTableView) -> Int {
            parent.items.count
        }
        
        func tableView(_ tableView: NSTableView, viewFor tableColumn: NSTableColumn?, row: Int) -> NSView? {
            let item = parent.items[row]
            let hostingView = NSHostingView(rootView: parent.content(item))
            hostingView.frame = tableView.rect(ofRow: row)
            return hostingView
        }
        
        func tableView(_ tableView: NSTableView, rowViewForRow row: Int) -> NSTableRowView? {
            CustomHighlightRowView()
        }
        
        func tableViewSelectionDidChange(_ notification: Notification) {
            guard let tableView = notification.object as? NSTableView else { return }
            parent.selection.wrappedValue = tableView.selectedRow >= 0 ? tableView.selectedRow : nil
        }
    }
}

// 使用示例
// CustomList(items: yourSidebarItems, selection: $selection) { item in
//     // 你的行内容，如NavigationLink
// }

原方法无效的原因 #

• .tint：仅影响控件的 tint 颜色（如NavigationLink的文字、图标颜色），不控制选中背景。
• .listRowBackground：设置的是行的默认背景色，而非选中状态下的高亮背景。

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