Ionic Vue中FAB按钮在Android 13键盘弹出时未上移的问题

在 Android 13 系统测试时发现，FAB 按钮在键盘弹出时不会自动上移。使用 Ionic 7 + Vue 技术栈，即使是极简示例也无法解决该问题，需要配置或修改哪些内容才能让 FAB 按钮正常上移？

提供的代码示例 #

页面组件代码 #

<script setup lang="ts">
import { IonContent, IonFab, IonFabButton, IonHeader, IonInput, IonPage } from '@ionic/vue'
</script>

<template>
  <IonPage>
    <IonHeader> Test </IonHeader>
    <IonContent>
      <IonInput label="Test" />
    </IonContent>
    <IonFab
      slot="fixed"
      vertical="bottom"
      horizontal="end"
    >
      <IonFabButton>Test</IonFabButton>
    </IonFab>
  </IonPage>
</template>

main.ts 代码 #

import { createApp } from 'vue'
import App from './App.vue'
import './plugins'
import router from './router'

import { IonicVue } from '@ionic/vue'

/* Core CSS required for Ionic components to work properly */
import '@ionic/vue/css/core.css'

/* Basic CSS for apps built with Ionic */
import '@ionic/vue/css/normalize.css'
import '@ionic/vue/css/structure.css'
import '@ionic/vue/css/typography.css'

/* Optional CSS utils that can be commented out */
import '@ionic/vue/css/display.css'
import '@ionic/vue/css/flex-utils.css'
import '@ionic/vue/css/float-elements.css'
import '@ionic/vue/css/padding.css'
import '@ionic/vue/css/text-alignment.css'
import '@ionic/vue/css/text-transformation.css'

/* Theme variables */
import './theme/variables.css'

const app = createApp(App).use(IonicVue).use(router)

router.isReady().then(() => {
  app.mount('#app')
})

plugins.ts 代码 #

import { StatusBar } from '@capacitor/status-bar'

StatusBar.setOverlaysWebView({ overlay: true })

Package.json 配置 #

{
  "name": "test",
  "private": true,
  "version": "0.0.1",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc && vite build",
    "preview": "vite preview",
    "test:e2e": "cypress run",
    "test:unit": "vitest",
    "lint": "eslint .",
    "lint:fix": "eslint . --fix"
  },
  "dependencies": {
    "@capacitor/android": "7.0.1",
    "@capacitor/app": "7.0.0",
    "@capacitor/core": "7.0.1",
    "@capacitor/haptics": "7.0.0",
    "@capacitor/keyboard": "7.0.0",
    "@capacitor/status-bar": "7.0.0",
    "@ionic/vue": "^8.0.0",
    "@ionic/vue-router": "^8.0.0",
    "ionicons": "^7.0.0",
    "vue": "^3.3.0",
    "vue-router": "^4.2.0"
  },
  "devDependencies": {
    "@capacitor/cli": "7.0.1",
    "@vitejs/plugin-legacy": "^5.0.0",
    "@vitejs/plugin-vue": "^4.0.0",
    "@vue/eslint-config-typescript": "^12.0.0",
    "@vue/test-utils": "^2.3.0",
    "cypress": "^13.5.0",
    "eslint": "^8.35.0",
    "eslint-config-prettier": "^10.0.1",
    "eslint-plugin-prettier": "^5.2.3",
    "eslint-plugin-vue": "^9.9.0",
    "jsdom": "^22.1.0",
    "prettier": "^3.5.1",
    "prettier-plugin-organize-imports": "^4.1.0",
    "terser": "^5.4.0",
    "typescript": "~5.6.2",
    "vite": "~5.2.0",
    "vitest": "^0.34.6",
    "vue-tsc": "^2.1.10"
  },
  "description": "An Ionic project"
}

解决方案 #

1. 配置 Capacitor Keyboard 插件 #

启用键盘的窗口调整模式，让应用响应键盘高度变化。修改 plugins.ts 添加以下代码：

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

// 设置键盘调整模式为native，让系统自动调整窗口
Keyboard.setResizeMode({ mode: 'native' });

2. 调整 FAB 组件的放置位置 #

将 FAB 组件移入 IonContent 内部，利用 Ionic 内容区域的自动调整机制来响应键盘变化：

<template>
  <IonPage>
    <IonHeader> Test </IonHeader>
    <IonContent class="ion-padding">
      <IonInput label="Test" />
      <!-- 将FAB放到IonContent内部，保留fixed属性 -->
      <IonFab
        slot="fixed"
        vertical="bottom"
        horizontal="end"
      >
        <IonFabButton>Test</IonFabButton>
      </IonFab>
    </IonContent>
  </IonPage>
</template>

3. 检查 Android 配置 #

确保 Android 项目的 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">

4. 统一 Ionic 版本 #

注意到你的 package.json 中 @ionic/vue 是 8.x 版本，但你提到使用的是 Ionic 7，版本不匹配可能导致兼容性问题。建议统一版本：

• 若继续使用 Ionic 7，将 @ionic/vue 和 @ionic/vue-router 版本改为 ^7.0.0
• 若升级到 Ionic 8，确保 Capacitor 版本与之兼容（当前 Capacitor 7.x 可兼容 Ionic 8）

内容的提问来源于stack exchange，提问作者João