Android 15及以上Ionic应用适配状态栏与导航栏间显示求助

一、配置系统级显示参数 #

Capacitor 项目 #

修改 capacitor.config.ts，添加适配相关配置：

export default defineConfig({
  android: {
    androidXEnabled: true, // 必须开启AndroidX支持
    // 其他原有配置保留，新增以下
    statusBar: {
      backgroundColor: "#00000000",
      overlaysWebView: true
    },
    navigationBar: {
      backgroundColor: "#00000000",
      overlaysWebView: true
    }
  },
});

Cordova 项目 #

打开 config.xml，在 <platform name="android"> 节点下添加：

<preference name="AndroidXEnabled" value="true" />
<preference name="StatusBarOverlaysWebView" value="true" />
<preference name="StatusBarStyle" value="lightcontent" />
<preference name="NavigationBarColor" value="@android:color/transparent" />
<preference name="StatusBarBackgroundColor" value="@android:color/transparent" />

二、用 Capacitor/Ionic Native 插件控制系统栏 #

安装插件（Capacitor） #

npm install @capacitor/status-bar @capacitor/navigation-bar
npx cap sync

在应用初始化时设置 #

打开 app.component.ts，在初始化方法里添加：

import { StatusBar, Style } from '@capacitor/status-bar';
import { NavigationBar } from '@capacitor/navigation-bar';

async initializeApp() {
  // 让状态栏覆盖WebView，内容延伸到状态栏下方
  await StatusBar.setOverlaysWebView({ overlay: true });
  // 根据背景色设置状态栏文字样式
  await StatusBar.setStyle({ style: Style.Dark });
  // 设置状态栏完全透明
  await StatusBar.setBackgroundColor({ color: "#00000000" });

  // 导航栏同理配置
  await NavigationBar.setOverlaysWebView({ overlay: true });
  await NavigationBar.setColor({ color: "#00000000" });

  // 给页面内容加上安全区域内边距，避免被系统栏遮挡
  document.body.style.paddingTop = 'var(--ion-safe-area-top)';
  document.body.style.paddingBottom = 'var(--ion-safe-area-bottom)';
}

三、适配 Android 15 专属的系统UI规则 #

Android 15 对系统栏布局逻辑有更新，需要修改 Android 原生主题：
打开 android/app/src/main/res/values/styles.xml，修改应用主题：

<style name="AppTheme.NoActionBar" parent="Theme.AppCompat.NoActionBar">
  <!-- 允许内容延伸到刘海区域 -->
  <item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item>
  <!-- 开启状态栏、导航栏透明 -->
  <item name="android:windowTranslucentStatus">true</item>
  <item name="android:windowTranslucentNavigation">true</item>
  <item name="android:statusBarColor">@android:color/transparent</item>
  <item name="android:navigationBarColor">@android:color/transparent</item>
</style>

四、页面层的安全区域适配 #

使用 Ionic 的 ion-content 时，开启全屏模式并利用内置安全区域变量：

<ion-content fullscreen="true">
  <!-- 内容会自动适配安全区域，不会被系统栏遮挡 -->
  <div class="ion-padding-start ion-padding-end">
    <!-- 你的页面内容 -->
  </div>
</ion-content>

也可以在全局 CSS 里统一设置：

ion-content {
  --padding-top: var(--ion-safe-area-top);
  --padding-bottom: var(--ion-safe-area-bottom);
}

五、测试验证 #

构建并运行到 Android 15 设备或模拟器：

npx cap run android

确认内容完全显示在状态栏和导航栏之间，且无遮挡情况。

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