如何让包含TextField的整个View完整显示在键盘上方？

核心思路 #

通过监听键盘弹出/收起的系统通知，动态调整目标View（你的VStack）的底部间距，让整个View被顶起至键盘上方，确保所有内容（包括TextField下方的提示文本）全程可见。

方案一：自定义ViewModifier（复用性强） #

先创建一个通用的键盘适配Modifier：

import SwiftUI

struct KeyboardAdaptive: ViewModifier {
    @State private var keyboardHeight: CGFloat = 0
    
    func body(content: Content) -> some View {
        content
            .padding(.bottom, keyboardHeight)
            .onReceive(Publishers.keyboardHeight) { height in
                keyboardHeight = height
            }
    }
}

// 扩展Publisher监听键盘高度
extension Publishers {
    static var keyboardHeight: AnyPublisher<CGFloat, Never> {
        let willShow = NotificationCenter.default.publisher(for: UIApplication.keyboardWillShowNotification)
            .map { $0.userInfo?[UIResponder.keyboardFrameEndUserInfoKey] as? CGRect ?? .zero }
            .map { $0.height }
        
        let willHide = NotificationCenter.default.publisher(for: UIApplication.keyboardWillHideNotification)
            .map { _ in CGFloat(0) }
        
        return MergeMany(willShow, willHide)
            .eraseToAnyPublisher()
    }
}

// 给View添加便捷调用方法
extension View {
    func keyboardAdaptive() -> some View {
        self.modifier(KeyboardAdaptive())
    }
}

然后在你的目标VStack中直接应用这个Modifier：

struct ContentView: View {
    @State private var inputText = ""
    
    var body: some View {
        VStack {
            Spacer() // 让VStack靠底部，模拟原有布局
            
            VStack(spacing: 16) {
                TextField("输入内容", text: $inputText)
                    .textFieldStyle(RoundedBorderTextFieldStyle())
                    .padding(.horizontal)
                
                Text("这是TextField下方的提示文本，输入时需要保持可见")
                    .font(.caption)
                    .foregroundColor(.gray)
            }
            .keyboardAdaptive() // 启用键盘适配
        }
        .padding()
    }
}

方案二：直接在视图中监听通知（快速实现） #

如果不想写自定义Modifier，也可以直接在视图内处理键盘事件：

struct ContentView: View {
    @State private var inputText = ""
    @State private var keyboardHeight: CGFloat = 0
    
    var body: some View {
        VStack {
            Spacer()
            
            VStack(spacing: 16) {
                TextField("输入内容", text: $inputText)
                    .textFieldStyle(RoundedBorderTextFieldStyle())
                    .padding(.horizontal)
                
                Text("这是TextField下方的提示文本，输入时需要保持可见")
                    .font(.caption)
                    .foregroundColor(.gray)
            }
            .padding(.bottom, keyboardHeight)
        }
        .padding()
        .onReceive(NotificationCenter.default.publisher(for: UIApplication.keyboardWillShowNotification)) { notification in
            guard let frame = notification.userInfo?[UIResponder.keyboardFrameEndUserInfoKey] as? CGRect else { return }
            keyboardHeight = frame.height
        }
        .onReceive(NotificationCenter.default.publisher(for: UIApplication.keyboardWillHideNotification)) { _ in
            keyboardHeight = 0
        }
    }
}

原理说明 #

两种方案本质都是通过监听键盘高度变化，动态给目标VStack添加底部内边距，让整个View被向上顶起，刚好避开键盘区域，确保TextField和下方的提示文本都能完整显示。

内容的提问来源于stack exchange，提问作者Konstantin.Efimenko