NavigationStack绑定数组元素时TextField光标重置问题求助

问题现象 #

在NavigationStack内的List中，当TextField绑定到@State数组的元素时，编辑文本中间内容时，每输入一个字符光标就会自动跳到文本末尾。但如果将TextField绑定到单个@State变量的元素，这个问题就会消失。

复现代码：

import SwiftUI

private struct CursorResetting: View {
    struct Record: Identifiable {
        var string = ""
        var id = UUID()
    }

    @State private var records = [
        Record(string: "Hlo World"),
    ]
    @State private var singleRecord = Record(string: "Hlo World")

    var body: some View {
        NavigationStack {
            List($records) { $record in
                NavigationLink(record.string) {
                    TextField("Value", text: $record.string)
//                    TextField("Value", text: $singleRecord.string)
                }
            }
        }
    }
}

原因分析 #

这个问题是SwiftUI视图刷新机制导致的：当你修改数组中的某个元素时，SwiftUI会认为整个List的行需要重新渲染，连带着NavigationLink的目标视图（也就是包含TextField的视图）也会被重新创建。每次重建TextField时，系统会默认把光标定位到文本末尾，从而出现这个异常。而绑定单个元素时，只有TextField所在的视图会局部刷新，不会触发整个行的重建，光标位置就能保持正常。

解决方案 #

方案1：抽离目标视图为独立子视图 #

把包含TextField的视图单独抽成一个子视图，让它只依赖绑定的元素。这样父视图刷新时，子视图不会被不必要地重建，光标就能稳定在输入位置。

修改后的代码：

import SwiftUI

private struct CursorResetting: View {
    struct Record: Identifiable {
        var string = ""
        var id = UUID()
    }

    @State private var records = [
        Record(string: "Hlo World"),
    ]

    var body: some View {
        NavigationStack {
            List($records) { $record in
                NavigationLink(record.string) {
                    RecordEditView(record: $record)
                }
            }
        }
    }
}

// 独立的编辑子视图
private struct RecordEditView: View {
    @Binding var record: CursorResetting.Record
    
    var body: some View {
        TextField("Value", text: $record.string)
    }
}

方案2：使用.id()稳定视图标识 #

给TextField添加.id(record.id)，告诉SwiftUI这个视图的标识是固定的，避免每次状态更新都重建视图。这种方法兼容性也不错，但稳定性略逊于抽离子视图。

修改后的代码片段：

NavigationLink(record.string) {
    TextField("Value", text: $record.string)
        .id(record.id)
}

方案3：使用Observation框架（iOS 17+/macOS 14+） #

如果你的项目已经适配iOS 17及以上版本，可以使用@Observable宏来优化状态管理。Observation框架会更精准地追踪状态变化，只有真正依赖变化的视图才会刷新，从根源避免不必要的视图重建。

修改后的代码：

import SwiftUI

private struct CursorResetting: View {
    @Observable
    struct Record: Identifiable {
        var string = ""
        var id = UUID()
    }

    @State private var records = [
        Record(string: "Hlo World"),
    ]

    var body: some View {
        NavigationStack {
            List(records) { record in
                NavigationLink(record.string) {
                    TextField("Value", text: $record.string)
                }
            }
        }
    }
}

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