Vue+Capacitor构建安卓APK 隐藏状态栏/操作栏问题求助

云原生阿岚

2026-8-26

问题背景

我是正在转型移动端应用开发的Web开发者，当前项目采用如下构建流水线：

开发Vue SPA应用，执行npm run build完成打包
参照Capacitor官方指引在项目中集成Capacitor，配置Capacitor的www目录指向Vue构建生成的dist文件夹
在Android Studio中打开Capacitor生成的/android目录完成后续打包

目前已可正常生成能安装到手机的可用APK，应用可正常实现Vue设计的所有功能，也可通过修改Android Studio中的AndroidManifest.xml锁定所需屏幕方向，但还需要实现全屏效果，隐藏手机系统状态栏与应用操作栏，尝试两类方案均未成功。

已尝试的无效方案

方案1：调用Capacitor Status Bar插件

参照Capacitor Status Bar插件官方文档尝试隐藏状态栏，在App.vue的script部分编写如下代码：

<script>
import { StatusBar, Style } from '../npm_modules/@capacitor/status-bar';

export default{ 
  ... 
  created(){  
    StatusBar.hide();
  }
}  
</script>

该代码未引发其他报错，但无法隐藏状态栏。目前可查到的相关教程均基于Ionic框架实现，不确定该插件是否适配Vue项目，也不确定该段代码是否需要写在其他位置。

方案2：修改安卓原生代码与配置

尝试通过Android Studio中的MainActivity.java隐藏操作栏，编写代码如下：

package com.example.app;
import android.os.Bundle;
import android.view.WindowManager;

import com.getcapacitor.BridgeActivity;

public class MainActivity extends BridgeActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        getSupportActionBar().hide();
        getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,WindowManager.LayoutParams.FLAG_FULLSCREEN);
        setContentView(R.layout.activity_main);
    }
}

期间尝试过移除getWindow()相关代码、仅保留getSupportActionBar().hide();语句，同时尝试修改styles.xml文件，将AppTheme设置为.NoActionBar结尾的主题，添加windowNoTitle、windowActionBar相关配置项，分别修改了app/res/values/styles.xml与capacitor-android/res/values/styles.xml两个路径下的配置文件，配置代码如下：

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
        <item name="windowNoTitle">true</item>
        <item name="windowActionBar">false</item>
    </style>

    <style name="AppTheme.NoActionBar" parent="Theme.AppCompat.NoActionBar">
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
        <item name="android:background">@null</item>
    </style>


    <style name="AppTheme.NoActionBarLaunch" parent="AppTheme.NoActionBar">
        <item name="android:background">@drawable/splash</item>
    </style>
</resources>

但这类原生修改方案会直接导致应用无法启动。可查到的相关原生实现教程均基于直接在Android Studio创建的项目，其MainActivity.java继承自AppCompatActivity，而非项目中Capacitor提供的BridgeActivity。

该问题与项目业务逻辑无关：通过npm init vue@latest创建全新空Vue项目，重复上述构建流水线，会完全复现状态栏、操作栏隐藏失败的问题。完整复现用的终端操作步骤如下：

npm init vue@latest
cd projectfolder
npm install
--(alternative for capacitor staus-bar plugin)
npm install @capacitor/status-bar
npx cap sync
--
npm run build (generates dist folder)
npm install @capacitor/core
npm install @capacitor/cli --save-dev
npx cap init (give dist folder for www)
npm install @capacitor/android
npx cap add android
npx cap open android
then the rest is on android studio UI to edit MainActivity.java and style.xml in app/res/values/ and capacitor-android/res/values/

问题原因与解决方案

核心错误点

构建流水线顺序错误：Capacitor初始化、添加平台、安装插件的步骤放在了build之后，容易出现资源同步异常
插件调用时机与导入路径错误：自定义了npm包导入路径，且在生命周期过早的created阶段调用插件，此时原生桥接尚未初始化完成
原生代码修改错误：手动在BridgeActivity的onCreate中调用setContentView会覆盖Capacitor内置的WebView容器，直接导致启动崩溃；修改capacitor-android目录下的依赖文件不仅无效，还会破坏依赖结构
全屏API使用过时：旧版的FLAG_FULLSCREEN标识在安卓11及以上版本已经失效，无法适配新系统的全屏逻辑

步骤1：修正构建流程

正确的项目初始化与构建顺序如下，所有Capacitor相关依赖安装、平台添加操作要在第一次build之前完成：

npm init vue@latest
cd projectfolder
npm install
# 一次性安装所有Capacitor相关依赖
npm install @capacitor/core @capacitor/status-bar
npm install @capacitor/cli @capacitor/android --save-dev
# 初始化Capacitor，按提示填写应用名、包名，webDir参数填dist
npx cap init
npx cap add android
# 后续每次修改前端代码后，按顺序执行构建、同步、打开工程
npm run build
npx cap sync
npx cap open android

注意：永远不要修改node_modules、capacitor-android这类依赖目录下的文件，执行sync或重装依赖时这类目录的内容会被完全覆盖，修改没有实际意义。

步骤2：前端侧正确调用状态栏隐藏逻辑（推荐方案，无需修改原生代码）

去掉自定义的npm包导入前缀，直接从包名导入插件；将插件调用逻辑移到mounted生命周期（此时DOM与原生桥接均已完成初始化），同时增加原生平台判断，避免浏览器环境下插件调用失效。

Vue3写法示例（App.vue）：

<script setup>
import { onMounted } from 'vue'
import { StatusBar } from '@capacitor/status-bar'
import { Capacitor } from '@capacitor/core'

onMounted(async () => {
  if (Capacitor.isNativePlatform()) {
    await StatusBar.hide()
  }
})
</script>

Vue2写法示例（App.vue）：

<script>
import { StatusBar } from '@capacitor/status-bar'
import { Capacitor } from '@capacitor/core'

export default {
  mounted() {
    if (Capacitor.isNativePlatform()) {
      StatusBar.hide()
    }
  }
}
</script>

改完后执行npm run build && npx cap sync重新打包，即可正常隐藏系统状态栏。

步骤3：隐藏应用操作栏+沉浸式全屏配置

如果需要实现完全无栏的沉浸式全屏，仅需修改安卓工程下app/src/main/res/values/styles.xml中的主题配置即可，不需要手动修改MainActivity代码：

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!-- 直接使用NoActionBar系列父主题，无需手动添加windowNoTitle、windowActionBar配置 -->
    <style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
        <!-- 适配挖孔屏、允许内容延伸到状态栏/导航栏区域 -->
        <item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item>
        <item name="android:windowTranslucentStatus">true</item>
        <item name="android:windowTranslucentNavigation">true</item>
    </style>

    <style name="AppTheme.NoActionBar">
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
        <item name="android:background">@null</item>
    </style>

    <style name="AppTheme.NoActionBarLaunch" parent="AppTheme.NoActionBar">
        <item name="android:background">@drawable/splash</item>
    </style>
</resources>

如果需要通过原生代码强制控制全屏，注意不要在MainActivity中调用setContentView，使用安卓X提供的新版WindowInsets API实现，兼容安卓11及以上版本：

package com.example.app;
import android.os.Bundle;
import android.view.WindowInsets;
import androidx.core.view.WindowCompat;
import androidx.core.view.WindowInsetsControllerCompat;
import com.getcapacitor.BridgeActivity;

public class MainActivity extends BridgeActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        // 配置沉浸式全屏
        WindowCompat.setDecorFitsSystemWindows(getWindow(), false);
        WindowInsetsControllerCompat controller = WindowCompat.getInsetsController(getWindow(), getWindow().getDecorView());
        if (controller != null) {
            // 隐藏状态栏+导航栏，滑动时临时显示
            controller.hide(WindowInsets.Type.statusBars() | WindowInsets.Type.navigationBars());
            controller.setSystemBarsBehavior(WindowInsetsControllerCompat.BEHAVIOR_SHOW_TRANSIENT_BARS_BY_SWIPE);
        }
    }
}

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

Vue+Capacitor构建安卓APK 隐藏状态栏/操作栏问题求助

方案1：调用Capacitor Status Bar插件 #

方案2：修改安卓原生代码与配置 #

核心错误点 #

步骤1：修正构建流程 #

步骤2：前端侧正确调用状态栏隐藏逻辑（推荐方案，无需修改原生代码） #