SwiftUI中键盘弹出时给TextField加底部内边距并修复按钮点击失效

问题根源 #

修改安全区域后，SwiftUI默认不会响应安全区域外的视图交互，导致按钮无法被点击。以下是两种可行的解决思路及实现代码：

方案一：修复现有逻辑的交互问题 #

保留原键盘适配逻辑，通过调整安全区域忽略规则和扩大按钮可点击区域来恢复交互：

ScrollView {
    VStack {
        Spacer(minLength: 1000)
        TextField("Textfield 1", text: $text)
            .padding(30)
        Button {
            print("Button tapped")
        } label: {
            Text("Click this button")
        }
        .contentShape(Rectangle()) // 强制扩大按钮可点击范围
        Spacer(minLength: 1000)
    }
}
.keyboardAvoiding()
.ignoresSafeArea(.keyboard, edges: .bottom) // 允许键盘覆盖底部安全区域，保留交互

方案二：不修改安全区域，动态添加底部间距 #

通过监听键盘高度变化，给TextField下方添加动态额外间距，避免修改安全区域影响交互：

struct ContentView: View {
    @State private var text = ""
    @State private var keyboardExtraPadding: CGFloat = 0
    
    var body: some View {
        ScrollView {
            VStack {
                Spacer(minLength: 1000)
                TextField("Textfield 1", text: $text)
                    .padding(30)
                
                // 键盘弹出时显示额外底部间距
                Spacer()
                    .frame(height: keyboardExtraPadding)
                
                Button {
                    print("Button tapped")
                } label: {
                    Text("Click this button")
                }
                Spacer(minLength: 1000)
            }
        }
        .onAppear {
            // 监听键盘弹出/收起事件
            NotificationCenter.default.addObserver(
                forName: UIResponder.keyboardWillShowNotification,
                object: nil, queue: .main
            ) { notification in
                guard let keyboardFrame = notification.userInfo?[UIResponder.keyboardFrameEndUserInfoKey] as? CGRect else { return }
                // 设置额外间距（这里设为80，可按需调整）
                keyboardExtraPadding = 80
            }
            
            NotificationCenter.default.addObserver(
                forName: UIResponder.keyboardWillHideNotification,
                object: nil, queue: .main
            ) { _ in
                keyboardExtraPadding = 0
            }
        }
        .onDisappear {
            NotificationCenter.default.removeObserver(self)
        }
        .scrollDismissesKeyboard(.interactively)
    }
}

方案三：iOS 16+ 滚动目标适配 #

利用SwiftUI 3.0+的滚动目标API，精准控制滚动位置并添加额外间距：

struct ContentView: View {
    @State private var text = ""
    @State private var keyboardHeight: CGFloat = 0
    @Namespace private var scrollNamespace
    
    var body: some View {
        ScrollView {
            VStack {
                Spacer(minLength: 1000)
                TextField("Textfield 1", text: $text)
                    .padding(30)
                    .matchedGeometryEffect(id: "textFieldTarget", in: scrollNamespace)
                
                Button {
                    print("Button tapped")
                } label: {
                    Text("Click this button")
                }
                Spacer(minLength: 1000)
            }
        }
        .scrollTargetBehavior(.viewAligned)
        .onReceive(NotificationCenter.default.publisher(for: UIResponder.keyboardWillShowNotification)) { notification in
            guard let frame = notification.userInfo?[UIResponder.keyboardFrameEndUserInfoKey] as? CGRect else { return }
            keyboardHeight = frame.height + 80 // 额外添加80间距
            withAnimation {
                ScrollViewProxy.scrollTo("textFieldTarget", anchor: .bottom)
            }
        }
        .onReceive(NotificationCenter.default.publisher(for: UIResponder.keyboardWillHideNotification)) { _ in
            keyboardHeight = 0
        }
        .padding(.bottom, keyboardHeight)
    }
}

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