客户项目需求：如何实现虚拟键盘与对话框无间隙贴合？

核心思路是监听虚拟键盘的弹出/收起事件，根据键盘高度动态调整对话框位置，替代默认的居中布局，让对话框底部紧贴键盘顶部。

通用实现步骤 #

• 监听键盘弹出事件，获取键盘高度与弹出状态
• 计算对话框需移动的距离：用原本居中位置的底部到屏幕底部的距离，减去键盘高度，调整对话框的bottom定位或transform位移
• 键盘收起时恢复对话框的默认居中布局

不同技术栈的具体实现 #

Web端（H5/移动端网页） #

利用visualViewport变化或resize事件监听软键盘状态：

// 监听视口变化
window.visualViewport.addEventListener('resize', () => {
  const dialog = document.getElementById('target-dialog');
  const keyboardHeight = window.innerHeight - window.visualViewport.height;
  
  if (keyboardHeight > 0) {
    // 键盘弹出，调整对话框位置：底部距离视口底部等于键盘高度
    dialog.style.bottom = `${keyboardHeight}px`;
    dialog.style.top = 'auto'; // 取消默认居中的top设置
  } else {
    // 键盘收起，恢复居中
    dialog.style.top = '50%';
    dialog.style.transform = 'translateY(-50%)';
    dialog.style.bottom = 'auto';
  }
});

注：部分浏览器需结合输入框的focus/blur事件判断状态，避免误触发。

Android原生 #

1. 在AndroidManifest.xml中给目标Activity配置：

android:windowSoftInputMode="adjustResize"

2. 监听键盘高度变化并调整Dialog布局：

val rootView = dialog.findViewById<View>(android.R.id.content)
rootView.viewTreeObserver.addOnGlobalLayoutListener(object : ViewTreeObserver.OnGlobalLayoutListener {
    override fun onGlobalLayout() {
        val r = Rect()
        rootView.getWindowVisibleDisplayFrame(r)
        val screenHeight = rootView.rootView.height
        val keyboardHeight = screenHeight - r.bottom
        
        if (keyboardHeight > screenHeight * 0.15) { // 判定键盘弹出
            // 调整对话框位置，底部紧贴键盘顶部
            dialog.window?.setLayout(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT)
            dialog.window?.setGravity(Gravity.BOTTOM)
        } else {
            // 恢复居中布局
            dialog.window?.setGravity(Gravity.CENTER)
        }
    }
})

iOS原生 #

通过系统通知监听键盘状态，结合Auto Layout调整位置：

// 注册键盘通知
NotificationCenter.default.addObserver(self, selector: #selector(keyboardWillShow(_:)), name: UIResponder.keyboardWillShowNotification, object: nil)
NotificationCenter.default.addObserver(self, selector: #selector(keyboardWillHide(_:)), name: UIResponder.keyboardWillHideNotification, object: nil)

// 键盘弹出时调整对话框约束
@objc func keyboardWillShow(_ notification: Notification) {
    guard let keyboardFrame = notification.userInfo?[UIResponder.keyboardFrameEndUserInfoKey] as? CGRect else { return }
    let keyboardHeight = keyboardFrame.height
    
    dialogBottomConstraint.constant = keyboardHeight
    view.layoutIfNeeded()
}

// 键盘收起时恢复约束
@objc func keyboardWillHide(_ notification: Notification) {
    dialogBottomConstraint.constant = 0
    view.layoutIfNeeded()
}

注：需确保对话框使用Auto Layout布局，通过修改约束实现平滑位置调整。

关键注意事项 #

• 给对话框位置变化添加过渡动画，避免突兀
• 动态获取键盘高度，不要使用固定数值适配不同设备
• 结合输入框激活状态判断，避免其他resize事件误触发位置调整

当前效果：

期望效果：

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