SwiftUI中List内TextField在ForEach新增行时失焦问题求助

问题根源 #

当textValue从空变为非空时，suggestions数组从空数组变为包含元素的数组，List的子视图结构发生变化（从仅TextField一行变为多行），SwiftUI的List在diff更新时会重新渲染TextField所在的行，导致焦点丢失。

解决方案一：使用@FocusState手动管理焦点 #

通过@FocusState显式控制TextField的焦点状态，在suggestions变化时自动恢复焦点，这是最可靠的解决方式：

struct ContentView: View {
    @State private var textValue = ""
    @FocusState private var isTextFieldFocused: Bool // 新增焦点管理状态

    var body: some View {
        List {
            TextField("Person:", text: $textValue)
                .focused($isTextFieldFocused) // 绑定焦点状态
                .onAppear {
                    isTextFieldFocused = true // 初始加载时自动聚焦（可选）
                }

            ForEach(suggestions, id: \.id) { onePerson in
                Text(onePerson.id)
            }
        }
        .onChange(of: suggestions) { _ in
            // 异步恢复焦点，等待视图更新完成后生效
            DispatchQueue.main.async {
                isTextFieldFocused = true
            }
        }
    }
    
    var suggestions: [PersonSuggestion] {
        guard !textValue.isEmpty else { return [] }
        
        let existingPeople = Person.allCases
            .filter { $0.rawValue.localizedCaseInsensitiveContains(textValue) }
            .sorted(using: KeyPathComparator(\.rawValue))
            .map { PersonSuggestion.existing(person: $0) }
        
        if textValue != existingPeople.first?.id {
            return [.new(name: textValue)] + existingPeople
        } else {
            return existingPeople
        }
    }
}

解决方案二：给TextField添加固定ID #

通过给TextField设置固定的ID，让SwiftUI识别它是同一个视图，避免结构变化时被重新创建：

TextField("Person:", text: $textValue)
    .id("person-input-field") // 固定唯一标识

可以和方案一结合使用，进一步提升稳定性。

解决方案三：替换为ScrollView+LazyVStack（若无需List样式） #

如果不需要List的默认样式（如分隔线、滑动删除等），可以用ScrollView搭配LazyVStack实现，这种布局的视图更新逻辑更简单，不会触发焦点丢失：

struct ContentView: View {
    @State private var textValue = ""

    var body: some View {
        ScrollView {
            LazyVStack(spacing: 0) { // spacing设为0模拟List的行间距
                TextField("Person:", text: $textValue)
                    .padding(.horizontal)
                    .frame(height: 44) // 模拟List行高

                ForEach(suggestions, id: \.id) { onePerson in
                    Text(onePerson.id)
                        .padding(.horizontal)
                        .frame(height: 44)
                        .border(.gray.opacity(0.2), edge: .bottom) // 手动添加分隔线
                }
            }
        }
    }
    
    // 省略suggestions和配套类型代码...
}

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