Ionic5+TypeScript开发聊天应用 弹起软键盘时底部footer被遮挡

1. 基础配置调整 #

• 若使用Capacitor开发，修改capacitor.config.json的keyboard配置：

"keyboard": {
  "resize": "body",
  "resizeOnFullScreen": true
}

• 若使用Cordova开发，修改config.xml添加偏好设置：

<preference name="KeyboardResize" value="body" />
<preference name="KeyboardResizesWebView" value="true" />

注意：resize参数必须设为body，禁止使用native，否则容器无法自动适配键盘高度

2. 模板语法纠错 #

原模板中ion-content重复定义了class属性，属于HTML语法错误，会导致样式失效，修正为合并类名的写法：

<!-- 错误写法 -->
<ion-content class="messages-container" #content class="ion-padding">
<!-- 修正后写法 -->
<ion-content class="messages-container ion-padding" #content>

3. 样式覆盖优化 #

删除原有messages-container样式中不适配布局的规则，补充以下样式：

/* 修正后的消息容器样式 */
.messages-container {
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

/* 新增footer适配规则 */
ion-footer {
  bottom: env(keyboard-inset-height, 0);
  transition: bottom 0.2s ease;
}

/* 可选：优化输入框弹出时的滚动体验 */
.message-input {
  --padding-end: 9px;
}

4. 低版本兼容处理 #

若Ionic版本低于5.6，不支持keyboard-inset-height环境变量，可在页面TS文件中监听键盘事件手动调整：

import { Keyboard } from '@capacitor/keyboard';

ionViewDidEnter() {
  // 键盘弹出时调整footer位置
  Keyboard.addListener('keyboardWillShow', (res) => {
    const footer = document.querySelector('ion-footer') as HTMLElement;
    footer.style.bottom = `${res.keyboardHeight}px`;
    // 自动滚动消息列表到底部
    this.content.scrollToBottom(300);
  });

  // 键盘收起时重置位置
  Keyboard.addListener('keyboardWillHide', () => {
    const footer = document.querySelector('ion-footer') as HTMLElement;
    footer.style.bottom = '0';
  });
}

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