SwiftUI文档应用中Table/List内TextField输入卡顿问题排查

卡顿的核心原因是**Vocab作为值类型，修改单个实例的属性会触发整个[Vocab]数组的@Binding更新**。值类型的特性决定了修改属性会生成新的Vocab实例，SwiftUI会认为整个数组发生了变化，进而重绘所有行的TextField，最终导致输入卡顿。

方案1：将Vocab改为ObservableObject（推荐） #

把Vocab从结构体改为遵循ObservableObject的类，利用@Published属性仅通知自身绑定的视图更新，彻底避免数组层面的全局重绘。

修改后的Vocab代码：

class Vocab: Identifiable, Codable, Equatable, Hashable, ObservableObject {
    let id: UUID
    @Published var word: String
    @Published var def: String
    @Published var trans: String
    @Published var visNote: String
    @Published var hidNote: String
    @Published var date: Date
    
    init(id: UUID = UUID(), word: String? = "", def: String? = "", trans: String? = "", visNote: String? = "", hidNote: String? = "", date: Date? = Date()){
        self.id = id
        self.word = word ?? ""
        self.def = def ?? ""
        self.trans = trans ?? ""
        self.visNote = visNote ?? ""
        self.hidNote = hidNote ?? ""
        self.date = date ?? Date()
    }
    
    static func == (lhs: Vocab, rhs: Vocab) -> Bool {
        return lhs.id == rhs.id && lhs.word == rhs.word && lhs.def == rhs.def && lhs.trans == rhs.trans && lhs.visNote == rhs.visNote && lhs.date == rhs.date
    }
    
    func hash(into hasher: inout Hasher) {
        hasher.combine(id)
    }
    
    // 手动实现Codable（类无法自动合成）
    enum CodingKeys: String, CodingKey {
        case id, word, def, trans, visNote, hidNote, date
    }
    
    required init(from decoder: Decoder) throws {
        let container = try decoder.container(keyedBy: CodingKeys.self)
        id = try container.decode(UUID.self, forKey: .id)
        word = try container.decode(String.self, forKey: .word)
        def = try container.decode(String.self, forKey: .def)
        trans = try container.decode(String.self, forKey: .trans)
        visNote = try container.decode(String.self, forKey: .visNote)
        hidNote = try container.decode(String.self, forKey: .hidNote)
        date = try container.decode(Date.self, forKey: .date)
    }
    
    func encode(to encoder: Encoder) throws {
        var container = encoder.container(keyedBy: CodingKeys.self)
        try container.encode(id, forKey: .id)
        try container.encode(word, forKey: .word)
        try container.encode(def, forKey: .def)
        try container.encode(trans, forKey: .trans)
        try container.encode(visNote, forKey: .visNote)
        try container.encode(hidNote, forKey: .hidNote)
        try container.encode(date, forKey: .date)
    }
}

调整VocabTable的绑定逻辑：

struct VocabTable: View{
    @Binding var vocabs: [Vocab] 
    @Binding var selection: Vocab.ID?
            
    var body: some View{
        Table(vocabs, selection: $selection) {
            TableColumn("Word") { vocab in
                TextField("Word", text: $vocab.word)
            }
            TableColumn("Definition") { vocab in
                TextField("Definition", text: $vocab.def)
            }
            TableColumn("Translation") { vocab in
                TextField("Translation", text: $vocab.trans)
            }
            TableColumn("Visible note") { vocab in
                TextField("Visible note", text: $vocab.visNote)
            }
            TableColumn("Hidden note") { vocab in
                TextField("Hidden note", text: $vocab.hidNote)
            }
            TableColumn("Created") { vocab in
                HStack{
                    Text(vocab.date, style: .date)
                    Text(vocab.date, style: .time)
                }
            }
        }
        .onDeleteCommand{
            if selection != nil{
                let oldSelectionIndex = vocabs.firstIndex(where: {$0.id == selection!})
                if oldSelectionIndex != nil{
                    if oldSelectionIndex! > 0{
                        selection = vocabs[oldSelectionIndex! - 1].id
                    } else {
                        selection = nil
                    }
                    vocabs.remove(at: oldSelectionIndex!)
                }
            }
        }
    }
}

方案2：保持值类型，优化重绘判定 #

若不想修改Vocab的类型，可通过封装子视图并实现Equatable来阻止不必要的重绘：

1. 创建封装TextField的子视图：

struct VocabTextField: View, Equatable {
    let label: String
    @Binding var text: String
    
    static func == (lhs: Self, rhs: Self) -> Bool {
        lhs.label == rhs.label && lhs.text == rhs.text
    }
    
    var body: some View {
        TextField(label, text: $text)
    }
}

2. 在VocabTable中使用该子视图：

Table($vocabs, selection: $selection) {
    TableColumn("Word") { vocab in
        VocabTextField(label: "Word", text: vocab.word)
            .equatable()
    }
    // 其他列同理替换
}

此方案依赖Vocab的Equatable实现，仅当实例真正变化时才更新对应行，但效果不如方案1彻底。

• 检查MainContentView中的HostingWindowFinder逻辑，避免其触发不必要的全局视图更新，可考虑将窗口绑定逻辑移至onAppear回调。
• 确保文档绑定传递无冗余，当前$data.claraDoc.vocabs的传递方式是合理的，但改为类类型的Vocab后，元素属性变化不会再触发ClaraDocument的整体更新。

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