Ionic 8+Angular19+Capacitor7安卓页面键盘弹出后无法滚动问题

针对你遇到的键盘弹出后页面无法滚动、输入框被遮挡的问题，主要需要检查以下几个关键配置：

1. 配置Capacitor Keyboard插件 #

确保在capacitor.config.ts中正确配置键盘行为，启用自动滚动和内容调整：

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

const config: CapacitorConfig = {
  appId: 'your.app.id',
  appName: 'your-app-name',
  webDir: 'www',
  bundledWebRuntime: false,
  plugins: {
    Keyboard: {
      resize: 'ionic', // 适配Ionic布局的首选值，也可选择'body'
      scrollAssist: true, // 启用滚动辅助
      autoScrollToInput: true, // 自动滚动到输入框位置
      disableScroll: false // 确保未禁用页面滚动
    }
  }
};

export default config;

修改后重新构建并同步到Android项目：

ionic build
npx cap sync android

2. 检查AndroidManifest.xml的窗口软输入模式 #

在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. 确保页面使用Ionic官方滚动容器 #

列表页面必须使用<ion-content>作为滚动容器，而非自定义的<div>或其他组件。Ionic的ion-content会自动监听键盘事件并调整滚动位置：

<ion-page>
  <ion-header>
    <ion-toolbar>
      <ion-title>列表页面</ion-title>
    </ion-toolbar>
  </ion-header>

  <ion-content class="ion-padding">
    <!-- 列表与输入框需放置在此容器内 -->
    <ion-list>
      <ion-item *ngFor="let item of items">
        <ion-input placeholder="输入框 {{item.id}}"></ion-input>
      </ion-item>
    </ion-list>
  </ion-content>
</ion-page>

4. 验证Capacitor Keyboard插件安装状态 #

确保已正确安装并同步插件：

npm install @capacitor/keyboard
npx cap sync

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