SwiftUI TextField绑定编辑时光标跳至末尾的解决方法

核心原因 #

当修改Ingredient的displayText时，由于Ingredient是值类型（struct），会生成新的实例。如果ForEach依赖的标识符不稳定，会导致对应的TextField视图被销毁并重新创建，光标自然会跳转到文本末尾。

解决方案 #

方案1：给Ingredient添加稳定的唯一标识符 #

让Ingredient遵循Identifiable协议，并在初始化时生成固定的UUID作为id，确保修改displayText时id不会变化，避免ForEach重建视图。

struct Ingredient: Identifiable {
    let id: UUID // 固定标识符，初始化后不再改变
    var displayText: String
    
    init(displayText: String) {
        self.id = UUID()
        self.displayText = displayText
    }
}

你的列表代码无需修改，保持ForEach($ingredients)即可——稳定的id会让SwiftUI只更新文本内容，而不是重建整个TextField视图。

方案2：使用索引+自定义Binding控制重渲染 #

如果无法修改Ingredient的结构，可以通过遍历数组索引，配合自定义Binding来减少不必要的视图重建：

List {
    ForEach(ingredients.indices, id: \.self) { index in
        // 自定义Binding，直接操作数组元素
        let textBinding = Binding(
            get: { ingredients[index].displayText },
            set: { ingredients[index].displayText = $0 }
        )
        
        if ingredientsEditMode == .active {
            TextField("Name", text: textBinding)
        } else {
            Text(ingredients[index].displayText)
        }
    }
    .onDelete { _ in
        print("delete")
    }
}

这种方式通过索引直接绑定到数组元素，避免了值类型实例替换导致的视图重建。

方案3：手动跟踪光标焦点（进阶） #

如果前两种方案仍有问题，可以结合FocusState和自定义文本框来手动控制光标位置：

1. 定义焦点状态变量：

@FocusState private var focusedIngredientId: UUID?

2. 创建自定义可控制光标位置的TextField：

struct CursorControlledTextField: UIViewRepresentable {
    @Binding var text: String
    @Binding var cursorPosition: Int?
    
    func makeUIView(context: Context) -> UITextField {
        let textField = UITextField()
        textField.delegate = context.coordinator
        return textField
    }
    
    func updateUIView(_ uiView: UITextField, context: Context) {
        uiView.text = text
        // 恢复光标位置
        if let position = cursorPosition, let start = uiView.position(from: uiView.beginningOfDocument, offset: position) {
            uiView.selectedTextRange = uiView.textRange(from: start, to: start)
        }
    }
    
    func makeCoordinator() -> Coordinator {
        Coordinator(parent: self)
    }
    
    class Coordinator: NSObject, UITextFieldDelegate {
        let parent: CursorControlledTextField
        
        init(parent: CursorControlledTextField) {
            self.parent = parent
        }
        
        func textFieldDidChangeSelection(_ textField: UITextField) {
            // 记录当前光标位置
            parent.cursorPosition = textField.offset(from: textField.beginningOfDocument, to: textField.selectedTextRange?.start ?? textField.beginningOfDocument)
        }
    }
}

3. 在列表中使用自定义文本框：

ForEach($ingredients) { $ingredient in
    if ingredientsEditMode == .active {
        CursorControlledTextField(
            text: $ingredient.displayText,
            cursorPosition: .constant(nil) // 可扩展Ingredient添加cursorPosition属性存储位置
        )
        .focused($focusedIngredientId, equals: ingredient.id)
    } else {
        Text(ingredient.displayText)
    }
}

这种方式适合复杂场景，但实现成本较高，优先推荐前两种方案。

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