解决Ionic中Android键盘布局突变遮挡输入框问题（inputShims）

在Ionic/Angular开发的Android应用中，键盘弹出时常会突然改变布局并遮挡输入框，用户体验极差。尝试修改Android清单的android:windowSoftInputMode="adjustPan"，以及Capacitor配置中keyboardResize的Ionic、Body、Native选项后，均未获得理想的流畅效果。以下是通过GitHub找到的、官方文档未充分说明的小众解决方案：

步骤1：配置Capacitor键盘插件 #

在capacitor.config.ts中添加以下配置，核心是开启resizeOnFullScreen并指定Native resize模式：

import { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  // 其他基础配置...
  plugins: {
    Keyboard: {
      resize: 'Native',
      resizeOnFullScreen: true,
      style: 'Default'
    }
  }
};

export default config;

步骤2：调整Android清单设置 #

修改android/app/src/main/AndroidManifest.xml中主Activity的配置，将windowSoftInputMode设为adjustResize：

<activity
    android:name=".MainActivity"
    android:exported="true"
    android:launchMode="singleTask"
    android:configChanges="orientation|keyboardHidden|keyboard|screenSize|smallestScreenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"
    android:hardwareAccelerated="true"
    android:windowSoftInputMode="adjustResize">
    <!-- 其他配置... -->
</activity>

步骤3：添加全局样式适配 #

在src/global.scss中添加以下样式，确保键盘弹出时页面布局稳定：

body.keyboard-open {
  height: 100vh;
  overflow: hidden;
}

ion-content {
  --keyboard-offset: 0px;
  &.keyboard-open {
    --offset-bottom: var(--keyboard-offset);
  }
}

步骤4：页面级滚动辅助（可选） #

对于包含多个输入框的长页面，可在组件中监听键盘事件，自动滚动到输入框位置：

import { Keyboard } from '@capacitor/keyboard';
import { ViewChild } from '@angular/core';
import { IonContent } from '@ionic/angular';

@Component({
  selector: 'app-form-page',
  templateUrl: './form-page.page.html',
  styleUrls: ['./form-page.page.scss'],
})
export class FormPagePage {
  @ViewChild(IonContent) content: IonContent;

  ngOnInit() {
    Keyboard.addListener('keyboardWillShow', async () => {
      // 延迟确保键盘已弹出，再滚动到当前聚焦的输入框
      setTimeout(() => {
        const activeElement = document.activeElement as HTMLElement;
        if (activeElement) {
          activeElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
        }
      }, 200);
    });
  }
}

通过上述配置，可解决键盘弹出时布局突变、输入框被遮挡的问题，实现流畅的键盘交互效果。

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