SwiftUI在@State chage之后重新呈现for循环内的代码

基础概念

SwiftUI 是苹果公司推出的一个用于构建用户界面的框架，它使用声明式语法来描述用户界面。@State 是 SwiftUI 中的一个属性包装器，用于跟踪和管理可变状态。当 @State 绑定的值发生变化时，SwiftUI 会自动重新计算视图并更新界面。

类型与应用场景

类型：@State 主要用于跟踪单个值的状态，如 Int, String, Bool 等。
应用场景：适用于任何需要响应状态变化的界面元素，如表单输入、开关按钮、列表项等。

示例代码

假设我们有一个列表，每个列表项都有一个开关按钮，点击按钮会改变对应项的状态，并重新呈现列表。

import SwiftUI

struct ContentView: View {
    @State private var items = [Item(name: "Item 1", isActive: false),
                                Item(name: "Item 2", isActive: false),
                                Item(name: "Item 3", isActive: false)]

    var body: some View {
        List(items, id: \.name) { item in
            HStack {
                Text(item.name)
                Spacer()
                Toggle(isOn: $item.isActive) {
                    Text(item.isActive ? "Active" : "Inactive")
                }
            }
        }
    }
}

struct Item: Identifiable {
    let id = UUID()
    let name: String
    var isActive: Bool
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

可能遇到的问题及解决方法

问题：`@State` 变化后列表没有重新呈现

原因：可能是由于 Item 结构体没有被正确地标记为 Identifiable，或者 id 属性没有唯一标识每个项。

解决方法：确保 Item 结构体实现了 Identifiable 协议，并且每个项都有一个唯一的 id。

struct Item: Identifiable {
    let id = UUID()  // 确保每个项都有一个唯一的ID
    let name: String
    var isActive: Bool
}

问题：性能问题，列表更新缓慢

原因：如果列表项非常多，每次状态变化都可能导致整个列表重新渲染，影响性能。

解决方法：使用 @ObservedObject 或 @EnvironmentObject 来管理列表数据，并确保只有必要的部分被重新渲染。

class ItemViewModel: ObservableObject {
    @Published var items = [Item(name: "Item 1", isActive: false),
                            Item(name: "Item 2", isActive: false),
                            Item(name: "Item 3", isActive: false)]
}

struct ContentView: View {
    @ObservedObject private var viewModel = ItemViewModel()

    var body: some View {
        List(viewModel.items, id: \.name) { item in
            HStack {
                Text(item.name)
                Spacer()
                Toggle(isOn: $item.isActive) {
                    Text(item.isActive ? "Active" : "Inactive")
                }
            }
        }
    }
}

通过这种方式，可以更有效地管理状态和视图的更新，提高应用的性能。