如何阻止SwiftUI打开键盘时TextField上移出屏幕？

我的屏幕顶部有一个TextField，下方依次是Spacer和大量内容。打开键盘时，TextField会被挤到屏幕外。尝试过添加.ignoresSafeArea(.keyboard)、将TextField与其余内容拆分到ZStack嵌套的两个VStack中，以及其他网上找到的方法，都没有效果。

问题根源 #

你使用的.ignoresSafeArea(.keyboard)是导致问题的关键——这个修饰符会让视图忽略键盘弹出时的安全区域调整逻辑，使得顶部TextField被键盘推到可视区域外。

可行解决方案 #

方案1：移除.ignoresSafeArea(.keyboard)

SwiftUI默认会自动调整视图布局以适配键盘，直接移除该修饰符即可恢复正常行为：

struct ContentView: View {
    @State private var text = ""
    
    var body: some View {
        VStack {
            TextField("Text", text: $text)
                .font(.largeTitle.weight(.medium))
                .padding()
            
            Spacer()
            
            VStack {
                Text("Content")
                Text("Content")
                Text("Content")
                Text("Content")
                Text("Content")
                Text("Content")
                Text("Content")
                Text("Content")
                Text("Content")
                Text("Content")
            }
            .padding()
            
            VStack {
                Text("Content")
                Text("Content")
                Text("Content")
                Text("Content")
                Text("Content")
                Text("Content")
                Text("Content")
                Text("Content")
                Text("Content")
                Text("Content")
            }
            .padding()
        }
        // 移除.ignoresSafeArea(.keyboard)
    }
}

方案2：用ScrollView包裹全部内容

如果下方内容过多，默认布局仍可能出现适配问题，用ScrollView包裹整个内容后，键盘弹出时ScrollView会自动滚动，确保TextField始终处于可视区域：

struct ContentView: View {
    @State private var text = ""
    
    var body: some View {
        ScrollView {
            VStack(spacing: 20) {
                TextField("Text", text: $text)
                    .font(.largeTitle.weight(.medium))
                    .padding()
                
                VStack {
                    Text("Content")
                    Text("Content")
                    Text("Content")
                    Text("Content")
                    Text("Content")
                    Text("Content")
                    Text("Content")
                    Text("Content")
                    Text("Content")
                    Text("Content")
                }
                .padding()
                
                VStack {
                    Text("Content")
                    Text("Content")
                    Text("Content")
                    Text("Content")
                    Text("Content")
                    Text("Content")
                    Text("Content")
                    Text("Content")
                    Text("Content")
                    Text("Content")
                }
                .padding()
            }
        }
    }
}

方案3：手动监听键盘高度（进阶）

如果需要更自定义的布局调整，可以通过监听键盘通知来动态调整视图偏移：

struct ContentView: View {
    @State private var text = ""
    @State private var keyboardHeight: CGFloat = 0
    
    var body: some View {
        VStack {
            TextField("Text", text: $text)
                .font(.largeTitle.weight(.medium))
                .padding()
            
            Spacer()
            
            VStack {
                Text("Content")
                Text("Content")
                Text("Content")
                Text("Content")
                Text("Content")
                Text("Content")
                Text("Content")
                Text("Content")
                Text("Content")
                Text("Content")
            }
            .padding()
            
            VStack {
                Text("Content")
                Text("Content")
                Text("Content")
                Text("Content")
                Text("Content")
                Text("Content")
                Text("Content")
                Text("Content")
                Text("Content")
                Text("Content")
            }
            .padding()
        }
        .padding(.bottom, keyboardHeight)
        .onAppear {
            NotificationCenter.default.addObserver(
                forName: UIResponder.keyboardWillShowNotification,
                object: nil,
                queue: .main
            ) { notification in
                guard let frame = notification.userInfo?[UIResponder.keyboardFrameEndUserInfoKey] as? CGRect else { return }
                keyboardHeight = frame.height
            }
            
            NotificationCenter.default.addObserver(
                forName: UIResponder.keyboardWillHideNotification,
                object: nil,
                queue: .main
            ) { _ in
                keyboardHeight = 0
            }
        }
    }
}

内容的提问来源于stack exchange，提问作者Cécile Lebleu