SwiftUI：点击Form中Section的NavigationLink进入子视图时如何自动收起键盘？

问题核心 #

使用@FocusState实现TextField自动获焦后，点击Form中的NavigationLink进入子视图时键盘无法自动收起，返回主视图时键盘会再次弹出，同时控制台出现约束冲突警告。

可行解决方案 #

方案1：给NavigationLink的Label添加点击手势取消焦点 #

直接在NavigationLink的内容视图上添加onTapGesture，点击时主动取消TextField焦点，键盘会立即收起。同时通过状态变量控制仅首次进入时自动弹出键盘，避免返回时重复触发。

修改后的代码：

import SwiftUI

struct SwiftUIView: View {
    @State private var text = ""
    @FocusState private var isTextFieldFocused: Bool
    @State private var isFirstAppear = true // 控制首次加载才自动获焦

    var body: some View {
        NavigationStack {
            Form {
                Section {
                    TextField("Enter something", text: $text)
                        .focused($isTextFieldFocused)
                }
                
                Section {
                    NavigationLink(destination: Text("11")) {
                        HStack {
                            Label {
                                Text("subview")
                            } icon : {
                                ZStack {
                                    RoundedRectangle(cornerRadius: 6)
                                        .foregroundColor(.orange)
                                        .frame(width: 30, height: 30)

                                    Image(systemName: "face.smiling")
                                        .foregroundColor(.white)
                                }
                            }
                        }
                        .onTapGesture {
                            isTextFieldFocused = false // 点击时取消焦点
                        }
                    }
                }
            }
            .onAppear {
                if isFirstAppear {
                    isTextFieldFocused = true
                    isFirstAppear = false
                }
            }
        }
    }
}

方案2：利用视图消失回调取消焦点 #

在主视图的onDisappear回调中取消TextField焦点，进入子视图时主视图消失，键盘会自动收起。同样通过isFirstAppear控制仅首次加载时自动获焦。

代码示例：

import SwiftUI

struct SwiftUIView: View {
    @State private var text = ""
    @FocusState private var isTextFieldFocused: Bool
    @State private var isFirstAppear = true

    var body: some View {
        NavigationStack {
            Form {
                Section {
                    TextField("Enter something", text: $text)
                        .focused($isTextFieldFocused)
                }
                
                Section {
                    NavigationLink(destination: Text("11")) {
                        HStack {
                            Label {
                                Text("subview")
                            } icon : {
                                ZStack {
                                    RoundedRectangle(cornerRadius: 6)
                                        .foregroundColor(.orange)
                                        .frame(width: 30, height: 30)

                                    Image(systemName: "face.smiling")
                                        .foregroundColor(.white)
                                }
                            }
                        }
                    }
                }
            }
            .onAppear {
                if isFirstAppear {
                    isTextFieldFocused = true
                    isFirstAppear = false
                }
            }
            .onDisappear {
                isTextFieldFocused = false // 视图消失时取消焦点
            }
        }
    }
}

方案3：使用navigationDestination结合状态变量控制跳转 #

通过navigationDestination和绑定的布尔值控制跳转，触发跳转前主动取消焦点，符合SwiftUI状态驱动的逻辑。

代码示例：

import SwiftUI

struct SwiftUIView: View {
    @State private var text = ""
    @FocusState private var isTextFieldFocused: Bool
    @State private var isFirstAppear = true
    @State private var showSubview = false // 控制子视图显示

    var body: some View {
        NavigationStack {
            Form {
                Section {
                    TextField("Enter something", text: $text)
                        .focused($isTextFieldFocused)
                }
                
                Section {
                    Button(action: {
                        isTextFieldFocused = false // 跳转前取消焦点
                        showSubview = true
                    }) {
                        HStack {
                            Label {
                                Text("subview")
                            } icon : {
                                ZStack {
                                    RoundedRectangle(cornerRadius: 6)
                                        .foregroundColor(.orange)
                                        .frame(width: 30, height: 30)

                                    Image(systemName: "face.smiling")
                                        .foregroundColor(.white)
                                }
                            }
                        }
                    }
                }
            }
            .navigationDestination(isPresented: $showSubview) {
                Text("11")
            }
            .onAppear {
                if isFirstAppear {
                    isTextFieldFocused = true
                    isFirstAppear = false
                }
            }
        }
    }
}

关键注意点 #

• 必须通过isFirstAppear这类变量控制仅首次进入主视图时自动获焦，否则返回主视图时onAppear会再次触发，导致键盘重新弹出。
• 取消焦点的操作要在跳转前执行，确保键盘在进入子视图前就已经收起，避免约束冲突。

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