SwiftUI Toggle进入后台后状态显示异常问题求助

问题描述 #

SwiftUI列表中的Toggle与ViewModel内flags数组元素的isActive布尔值双向绑定，开启Toggle后切App到后台，重新打开时Toggle显示为关闭状态，但ViewModel里的isActive实际仍为true；返回上一页面再回到该页面，Toggle又恢复为开启显示状态。

原代码 #

List {
        Section(header: Text("Flags")) {
            ForEach(viewModel.flags.indices, id: \.self) { index in
                Toggle(isOn: $viewModel.flags[index].isActive) {
                    Text(viewModel.flags[index].name.rawValue.camelCaseToCapitalized())
                }
            }
        }

问题原因 #

使用ForEach(viewModel.flags.indices, id: \.self)基于索引遍历的方式，App从后台恢复时，SwiftUI视图刷新机制无法正确识别数组元素的状态变化——因为索引本身没有改变，导致视图没有重新计算Toggle的绑定状态，出现显示与数据不一致的情况。

解决方案 #

方案1：让数组元素遵循Identifiable协议（推荐）

给Flag模型添加Identifiable协议，让ForEach直接遍历元素，SwiftUI会通过元素的唯一ID追踪状态变化：

// 修改Flag模型（假设你的模型名为Flag）
struct Flag: Identifiable {
    let id = UUID()
    let name: YourEnumType // 替换成你实际的枚举类型
    var isActive: Bool
}

// 更新列表代码
List {
    Section(header: Text("Flags")) {
        ForEach($viewModel.flags) { $flag in
            Toggle(isOn: $flag.isActive) {
                Text(flag.name.rawValue.camelCaseToCapitalized())
            }
        }
    }
}

方案2：手动指定ForEach的元素唯一ID

如果不想修改模型协议，可以给Toggle绑定元素的唯一标识（比如枚举name，确保name唯一），强制视图识别状态变化：

List {
    Section(header: Text("Flags")) {
        ForEach(viewModel.flags.indices, id: \.self) { index in
            let flag = viewModel.flags[index]
            Toggle(isOn: $viewModel.flags[index].isActive) {
                Text(flag.name.rawValue.camelCaseToCapitalized())
            }
            .id(flag.name) // 用name作为视图唯一ID，触发正确刷新
        }
    }
}

补充说明 #

方案1是SwiftUI的最佳实践，通过Identifiable协议让视图系统更高效地管理元素状态，从根源避免这类视图刷新不一致的问题。

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