Ionic 3安卓全屏模式下键盘唤起后状态栏异常显示问题

我之前在Ionic 3的安卓项目里也碰到过一模一样的问题！安卓系统在键盘弹出时的窗口行为会和Ionic的全屏配置冲突，导致状态栏意外出现，给你几个亲测有效的解决方案：

方案一：调整config.xml的安卓窗口配置 #

打开你的config.xml，找到<platform name="android">节点，完善全屏配置并添加键盘模式的修改：

<platform name="android">
  <!-- 确保全局全屏开关开启 -->
  <preference name="Fullscreen" value="true" />
  <!-- 设置启动模式为singleTask，避免应用状态混乱 -->
  <preference name="AndroidLaunchMode" value="singleTask" />
  <!-- 修改AndroidManifest里的键盘行为，避免触发状态栏 -->
  <edit-config file="AndroidManifest.xml" mode="merge" target="/manifest/application/activity">
      <activity android:windowSoftInputMode="adjustPan|stateHidden" />
  </edit-config>
</platform>

adjustPan会让页面整体上移而非调整窗口大小，从根源上减少系统触发状态栏的可能；stateHidden则让键盘默认隐藏，降低冲突场景。

方案二：通过键盘事件手动强制隐藏状态栏 #

借助Ionic Native的Keyboard插件，监听键盘弹出/收起事件，手动重新隐藏状态栏。

1. 先安装依赖：

ionic cordova plugin add cordova-plugin-keyboard
npm install @ionic-native/keyboard@4

2. 在app.component.ts中实现监听逻辑：

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { Keyboard } from '@ionic-native/keyboard';
import { StatusBar } from '@ionic-native/status-bar';

@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  constructor(
    private platform: Platform,
    private statusBar: StatusBar,
    private keyboard: Keyboard
  ) {
    this.initializeApp();
  }

  initializeApp() {
    this.platform.ready().then(() => {
      // 初始化全屏状态
      this.statusBar.hide();
      this.statusBar.overlaysWebView(true);

      // 键盘弹出时延迟隐藏状态栏（等待系统状态稳定）
      this.keyboard.onKeyboardShow().subscribe(() => {
        setTimeout(() => {
          this.statusBar.hide();
        }, 100);
      });

      // 键盘收起时再次确认全屏
      this.keyboard.onKeyboardHide().subscribe(() => {
        this.statusBar.hide();
      });
    });
  }
}

这里的setTimeout很关键，因为键盘弹出时系统会有短暂的状态切换，延迟执行能确保状态栏隐藏的指令生效。

方案三：修改安卓原生主题锁定全屏 #

如果前两个方案都没解决，直接从安卓原生层面强制全屏：
找到platforms/android/app/src/main/res/values/styles.xml，修改应用主题的属性：

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <!-- 强制窗口全屏 -->
    <item name="android:windowFullscreen">true</item>
    <!-- 移除状态栏的阴影覆盖 -->
    <item name="android:windowContentOverlay">@null</item>
</style>

这个方法直接在原生主题里锁定全屏，能彻底避免系统行为覆盖Ionic的配置。

我当时是组合方案一和方案二解决的问题，你可以先从方案一开始尝试，不行再叠加其他方案。

内容的提问来源于stack exchange，提问作者Máté Nagy