SwiftUI复杂Binding更新后个别视图未正确重绘问题

问题核心 #

动态通过List+ForEach生成的BinaryCheckBoxes组件，在长列表中部分（尤其是底部）的Checkbox点击后，ViewModel的formBinding/formResponse值已正确更新，但UI的CheckboxToggleStyle中的勾选图标未同步变化。调试确认Binding读写正常，但视图未重绘，且问题仅在视图数量较多时出现。

原因分析 #

1. ForEach身份标识错误：使用id: \.self作为ForEach的标识，若Template类型的Equatable实现不精准，或存在重复实例，会导致SwiftUI无法准确识别视图身份，List单元格复用时状态不同步。
2. 嵌套字典的@Published更新失效：formBinding是三层嵌套的字典结构，修改深层键值时，顶层字典作为值类型并未被重新赋值，@Published无法自动检测到变化，因此不会通知视图更新。
3. 自定义ToggleStyle的交互冲突：原ToggleStyle在Rectangle上添加onTapGesture，与Toggle本身的交互逻辑冲突，可能导致状态更新未正确传递到UI。

解决方案 #

1. 修正ForEach的身份标识 #

改用Template的唯一id属性作为ForEach的标识，确保每个视图实例被正确识别：

// 首先确保Template实现Identifiable（或至少有非空的id字段）
struct Template: Codable, Identifiable {
    let id: String
    let type: ViewKey
    let data: String?
    // 其他属性...
}

// 修改ForEach的id参数
ForEach(components, id: \.id) { item in
    chapterContents(template: item, type: item.type, sectionId: component.id, subsectionId: nil, subsection: component)
        .listRowSeparator(.hidden)
}

若id为可选值，可使用id: \.id ?? UUID().uuidString保证唯一性。

2. 手动触发ViewModel状态更新 #

将字典修改逻辑封装为ViewModel方法，并手动发送objectWillChange通知，强制SwiftUI更新视图：

class ContentViewModel: ObservableObject {
    @Published var formResponse: [String: [String: [String:Any]]] = [:]
    @Published var formBinding: [String: [String: [String:Any]]] = [:]
    // 其他属性...

    func updateCheckboxValue(sectionKey: String, sectionId: String, templateId: String, value: Bool) {
        // 手动触发状态更新通知
        objectWillChange.send()
        formBinding[sectionKey, default: [:]][sectionId, default: [:]][templateId] = value
        formResponse[sectionKey, default: [:]][sectionId, default: [:]][templateId] = value
    }
}

然后在视图层的Binding中调用该方法：

BinaryCheckBoxes(value: Binding<Bool>(get: {
    viewModel.formBinding[viewModel.sectionKey]?[sectionId ?? "MISSING"]?[template.id ?? "MISSING"] as? Bool ?? false
}, set: { newValue in
    viewModel.updateCheckboxValue(
        sectionKey: viewModel.sectionKey,
        sectionId: sectionId ?? "MISSING",
        templateId: template.id ?? "MISSING",
        value: newValue
    )
}), isEditing: $viewModel.isEditing)

3. 修复ToggleStyle的交互逻辑 #

用Button替代原HStack+onTapGesture的实现，避免与Toggle原生交互冲突：

struct CheckboxToggleStyle: ToggleStyle {
    func makeBody(configuration: Configuration) -> some View {
        Button {
            withAnimation(.spring()) {
                configuration.isOn.toggle()
            }
        } label: {
            HStack {
                Rectangle()
                    .stroke(lineWidth: 1)
                    .foregroundColor(.gray)
                    .frame(width: 25, height: 25)
                    .overlay {
                        Image(systemName: configuration.isOn ? "checkmark" : "")
                    }
                
                configuration.label
            }
        }
    }
}

4. 强制List行的唯一性 #

给每个List行添加唯一id修饰符，防止单元格复用导致的状态异常：

chapterContents(...)
    .listRowSeparator(.hidden)
    .id(item.id ?? UUID())

验证步骤 #

1. 修改后运行应用，滚动到长列表底部，点击Checkbox，确认勾选图标同步更新。
2. 检查ViewModel的formBinding/formResponse值，确保与UI状态一致。

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