SwiftUI：解决列表单元格选中时外观更新延迟问题

原问题 #

在macOS SwiftUI的List中，单元格包含SF Symbols图片，希望选中时通过设置isTemplate取消着色，但选中/取消选中后图片变更有延迟，鼠标释放后才更新，拖拽选择时延迟尤其明显。原因是selection绑定要等鼠标事件处理完成才更新，找不到能即时获取选中状态的@Environment键。

现有代码（简化版）：

// List代码
var body: some View {
    List(changes, id: \.path, selection: $selection) {
        ItemCell(fileChange: $0, selected: selection.contains($0.path))
    }
}

// 单元格代码
struct ItemCell: View {
    let item: MyItem
    let selected: Bool

    var body: some View {
        HStack {
            // 其他内容
            Image(nsImage: item.image.asTemplate(selected))
        }
    }
}

// NSImage扩展
extension NSImage {
    func asTemplate(_ template: Bool) -> NSImage {
        isTemplate = template
        return self
    }
}

问题1：图片更新延迟的解决方案 #

核心思路 #

绕过外部selection绑定，直接监听底层NSTableRowView的实时选中状态（包括拖拽时的临时高亮），因为NSTableView会在行选中/高亮时立即更新isSelected属性，能实现即时响应。

具体实现 #

1. 定义一个RowSelectionObserver，用来监听行的选中状态：

struct RowSelectionObserver: NSViewRepresentable {
    @Binding var isSelected: Bool
    
    func makeNSView(context: Context) -> NSView {
        let view = NSView()
        DispatchQueue.main.async {
            guard let rowView = view.enclosingRowView else { return }
            context.coordinator.rowView = rowView
            context.coordinator.updateSelection(rowView.isSelected)
            // 监听选中状态变化
            rowView.observe(\.isSelected, options: [.initial, .new]) { _, change in
                if let newValue = change.newValue {
                    context.coordinator.updateSelection(newValue)
                }
            }
        }
        return view
    }
    
    func updateNSView(_ nsView: NSView, context: Context) {}
    
    func makeCoordinator() -> Coordinator {
        Coordinator(isSelected: $isSelected)
    }
    
    class Coordinator {
        var rowView: NSTableRowView?
        @Binding var isSelected: Bool
        
        init(isSelected: Binding<Bool>) {
            _isSelected = isSelected
        }
        
        func updateSelection(_ value: Bool) {
            guard value != isSelected else { return }
            isSelected = value
        }
    }
}

2. 修复NSImage的asTemplate方法（NSImage是引用类型，必须创建副本避免影响其他实例）：

extension NSImage {
    func asTemplate(_ template: Bool) -> NSImage {
        let copy = self.copy() as! NSImage
        copy.isTemplate = template
        return copy
    }
}

3. 修改ItemCell，使用RowSelectionObserver获取实时选中状态：

struct ItemCell: View {
    let item: MyItem
    @State private var isRowSelected = false
    
    var body: some View {
        HStack {
            // 其他内容
            Image(nsImage: item.image.asTemplate(isRowSelected))
        }
        .background(RowSelectionObserver(isSelected: $isRowSelected))
    }
}

这样修改后，拖拽选择或点击时，图片会即时切换，不再有延迟。

问题2：Label自定义颜色且选中时自动变白的解决方案 #

之前尝试用Label时，tint无效，foregroundColor会失去选中自动变白的特性，可通过以下方式解决：

方案1：直接使用Image手动控制颜色 #

struct ItemCell: View {
    let item: MyItem
    @State private var isRowSelected = false
    
    var body: some View {
        HStack {
            Image(systemName: item.symbolName)
                .foregroundColor(isRowSelected ? .white : item.symbolColor)
            // 其他内容
        }
        .background(RowSelectionObserver(isSelected: $isRowSelected))
    }
}

方案2：自定义LabelStyle #

如果坚持用Label，可自定义样式实现颜色切换：

struct CustomLabelStyle: LabelStyle {
    let isSelected: Bool
    let customColor: Color
    
    func makeBody(configuration: Configuration) -> some View {
        Label(configuration)
            .foregroundColor(isSelected ? .white : customColor)
    }
}

// 在ItemCell中使用
struct ItemCell: View {
    let item: MyItem
    @State private var isRowSelected = false
    
    var body: some View {
        HStack {
            Label("", systemImage: item.symbolName)
                .labelStyle(CustomLabelStyle(isSelected: isRowSelected, customColor: item.symbolColor))
            // 其他内容
        }
        .background(RowSelectionObserver(isSelected: $isRowSelected))
    }
}

两种方案都能实现未选中时自定义颜色，选中时自动变白，且状态即时更新。

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