SwiftUI：如何在List中实现带可变数据的NavigationLink并避免重绘？

方案一：使用ObservableObject隔离数据更新（推荐） #

通过将单个列表项封装为ObservableObject，让数据更新仅影响依赖该属性的视图，避免父视图（列表）在后台不必要的重绘，同时保证返回后列表自动同步最新数据。

1. 定义可观察的数据模型 #

class NameItem: ObservableObject, Identifiable {
    let id = UUID()
    @Published var name: String
    
    init(name: String) {
        self.name = name
    }
}

2. 列表父视图 #

用@StateObject管理数据数组，确保数组仅在初始化时创建，且修改单个项的属性不会触发整个父视图重绘：

struct NameList: View {
    @StateObject private var items = [
        NameItem(name: "张三"),
        NameItem(name: "李四"),
        NameItem(name: "王五")
    ]
    
    var body: some View {
        NavigationStack {
            List {
                ForEach(items) { item in
                    NavigationLink {
                        NameDetailView(item: item)
                    } label: {
                        Text(item.name)
                    }
                }
            }
            .navigationTitle("名称列表")
        }
    }
}

3. 详情编辑视图 #

通过@ObservedObject接收数据项，直接绑定到TextField，修改时仅当前视图重绘，光标不会无故跳位：

struct NameDetailView: View {
    @ObservedObject var item: NameItem
    @FocusState private var isTextFieldFocused: Bool
    
    var body: some View {
        TextField("修改名称", text: $item.name)
            .focused($isTextFieldFocused)
            .padding()
            .navigationTitle("编辑名称")
            .onAppear {
                // 自动聚焦输入框
                isTextFieldFocused = true
            }
    }
}

方案优势 #

• 父视图（列表）仅在数组元素增删时重绘，单个项的属性修改不会触发父视图刷新，彻底解决后台重绘问题。
• 返回列表后，@Published属性会自动触发对应列表行的文本更新，无需额外同步逻辑。
• 光标跳位问题完全消除，因为详情视图的重绘仅针对输入框本身，没有无关的视图刷新干扰。

方案二：值类型+子视图封装优化 #

如果偏好使用值类型（结构体），可以通过将列表行封装为独立子视图，限制重绘范围，缓解光标跳位问题：

1. 定义值类型数据模型 #

struct NameItem: Identifiable {
    let id = UUID()
    var name: String
}

2. 列表父视图与独立行视图 #

struct NameList: View {
    @State private var items = [
        NameItem(name: "张三"),
        NameItem(name: "李四"),
        NameItem(name: "王五")
    ]
    
    var body: some View {
        NavigationStack {
            List {
                ForEach($items) { $item in
                    NavigationLink {
                        NameDetailView(item: $item)
                    } label: {
                        // 独立行视图仅依赖name值，缩小重绘范围
                        NameRowView(name: item.name)
                    }
                }
            }
            .navigationTitle("名称列表")
        }
    }
}

// 单独的列表行视图
struct NameRowView: View {
    let name: String
    var body: some View {
        Text(name)
    }
}

3. 详情编辑视图 #

struct NameDetailView: View {
    @Binding var item: NameItem
    @FocusState private var isTextFieldFocused: Bool
    
    var body: some View {
        TextField("修改名称", text: $item.name)
            .focused($isTextFieldFocused)
            .padding()
            .navigationTitle("编辑名称")
            .onAppear {
                isTextFieldFocused = true
            }
    }
}

方案说明 #

• 通过独立行视图，将重绘范围限制在单个列表行，而非整个列表视图，减少父视图的不必要刷新。
• 光标跳位问题会得到明显缓解，但由于值类型数组修改时会触发父视图的轻微更新，相比方案一效果稍弱。

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