SwiftUI中LazyVStack内TextField获焦后键盘立即隐藏问题求助

问题现象 #

使用LazyVStack加载大量带TextField的卡片，底部固定Submit按钮时，点击屏幕底部（键盘弹出区域）的TextField，卡片会被回收消失，键盘随之收起，无法正常获焦并滚动到可见区域。移除Submit按钮或改用VStack可恢复正常，但需要保留LazyVStack的懒加载特性。

解决方案 #

方案1：阻止ScrollView响应键盘底部安全区域变化 #

给ScrollView添加ignoresSafeArea(.keyboard, edges: .bottom)，避免键盘弹出时ScrollView的布局范围被压缩，防止LazyVStack回收当前交互的卡片。

修改后的代码：

struct ContentView: View {
    @State private var text: String = ""

    var body: some View {
        VStack {
            ScrollView {
                LazyVStack {
                    ForEach(0..<200, id: \.self) { _ in
                        CardView()
                    }
                }
            }
            .ignoresSafeArea(.keyboard, edges: .bottom) // 新增该行
            
            Button("Submit") { }
                .frame(maxWidth: .infinity)
                .background(Color.white)
        }.background(Color.secondary)
    }
}

struct CardView: View {
    @State private var text: String = ""

    var body: some View {
        TextField("text", text: $text)
            .frame(height: 50, alignment: .leading)
            .background(Color.white)
    }
}

方案2：用ScrollViewReader手动控制滚动 #

结合ScrollViewReader在TextField获焦时主动滚动到对应位置，确保卡片始终处于可见区域，避免被回收。

修改后的代码：

struct ContentView: View {
    @State private var text: String = ""
    @State private var focusedCardId: Int?

    var body: some View {
        VStack {
            ScrollViewReader { scrollProxy in
                ScrollView {
                    LazyVStack {
                        ForEach(0..<200, id: \.self) { index in
                            CardView()
                                .id(index)
                                .onTapGesture {
                                    focusedCardId = index
                                }
                        }
                    }
                }
                .onChange(of: focusedCardId) { id in
                    guard let targetId = id else { return }
                    withAnimation {
                        scrollProxy.scrollTo(targetId, anchor: .center)
                    }
                }
            }
            
            Button("Submit") { }
                .frame(maxWidth: .infinity)
                .background(Color.white)
        }.background(Color.secondary)
    }
}

struct CardView: View {
    @State private var text: String = ""
    @FocusState private var isTextFieldFocused: Bool

    var body: some View {
        TextField("text", text: $text)
            .frame(height: 50, alignment: .leading)
            .background(Color.white)
            .focused($isTextFieldFocused)
            .onTapGesture {
                isTextFieldFocused = true
            }
    }
}

原因分析 #

LazyVStack的核心特性是按需创建和回收视图，仅保留可见区域内的视图实例。当底部存在固定Submit按钮时，键盘弹出会大幅压缩ScrollView的可用高度，原本位于底部的TextField所在卡片会被判定为超出可见范围，从而被LazyVStack回收。卡片被回收后，TextField失去宿主视图，焦点丢失导致键盘收起，形成恶性循环。

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