跨平台全屏效果实现方案：HarmonyOS、Android与iOS实践总结

技术栈说明

HarmonyOS: 使用 ArkTS/ArkUI 的窗口管理接口实现全屏
Android: 结合原生 Android 配置文件和 Flutter API 实现全屏
iOS: 通过 Flutter 的 SystemChrome API 实现全屏
Flutter: 采用 3.22.1-0.0.pre.32 版本，结合 Dart 3.4.0 进行跨平台开发

HarmonyOS 全屏实现

HarmonyOS 通过 ArkTS/ArkUI 的窗口管理接口实现全屏效果：

typescript 复制代码

onWindowStageCreate(windowStage: window.WindowStage) {

super.onWindowStageCreate(windowStage);

windowStage.getMainWindow((err: BusinessError, data) => {

if (err.code) {
    console.error('Failed to obtain the main window. Cause: ' + JSON.stringify(err));
    return;
}

let windowClass = data;
// 设置导航栏、状态栏不显示
let names: Array<'status' | 'navigation'> = [];
windowClass.setWindowSystemBarEnable(names)
    .then(() => {
        console.info('Succeeded in setting the system bar to be invisible.');
    })
    .catch((err: BusinessError) => {
        console.error('Failed to set the system bar to be invisible. Cause:' + JSON.stringify(err));
        });
    });
}

HarmonyOS的方法相对简单，通过设置空数组到setWindowSystemBarEnable方法，可以同时隐藏状态栏和导航栏，实现全屏效果。

Android 全屏实现

Android的全屏实现较为复杂，需要同时修改多个配置文件：

1. 主题样式配置 (styles.xml)

xml 复制代码

<style name="LaunchTheme" parent="@android:style/Theme.Light.NoTitleBar">
    <item name="android:windowBackground">@drawable/launch_background</item>
    <item name="android:windowFullscreen">true</item>
    <item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item>
</style>
<style name="NormalTheme" parent="@android:style/Theme.Light.NoTitleBar">
    <item name="android:windowBackground">?android:colorBackground</item>
    <item name="android:windowFullscreen">true</item>
    <item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item>
</style>

2. AndroidManifest.xml 配置

xml 复制代码

<activity

android:name=".MainActivity"

...

android:theme="@style/LaunchTheme"

android:resizeableActivity="true">

...

</activity>

3. MainActivity.kt 实现

kotlin 复制代码

override fun onCreate(savedInstanceState: Bundle?) {

    super.onCreate(savedInstanceState)

    // 设置状态栏透明

    window.statusBarColor = Color.TRANSPARENT

    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.R) {

        // Android 11 及以上使用新 API

        window.setDecorFitsSystemWindows(false)

        window.insetsController?.let {

        it.hide(WindowInsets.Type.statusBars() or WindowInsets.Type.navigationBars())

        it.systemBarsBehavior = WindowInsetsController.BEHAVIOR_SHOW_TRANSIENT_BARS_BY_SWIPE

        }

    } else {

        // 处理 Android 10 及以下版本

        @Suppress("DEPRECATION")

        window.decorView.systemUiVisibility = (

        View.SYSTEM_UI_FLAG_LAYOUT_STABLE

        or View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN

        or View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION

        or View.SYSTEM_UI_FLAG_FULLSCREEN

        or View.SYSTEM_UI_FLAG_HIDE_NAVIGATION

        or View.SYSTEM_UI_FLAG_IMMERSIVE_STICKY
        )
        // 状态栏透明

        window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS)

        window.clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS)

        window.statusBarColor = Color.TRANSPARENT

        // 确保内容显示在状态栏后面

        window.addFlags(WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS)
    }

    // 设置允许内容延伸到刘海区域

    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.P) {

        val layoutParams = window.attributes

        layoutParams.layoutInDisplayCutoutMode =

        WindowManager.LayoutParams.LAYOUT_IN_DISPLAY_CUTOUT_MODE_SHORT_EDGES

        window.attributes = layoutParams

    }

}

4. Flutter 代码配置

dart 复制代码

if (Platform.isAndroid) {

    SystemChrome.setEnabledSystemUIMode(

        SystemUiMode.edgeToEdge,

        overlays: [],

    );

    SystemChrome.setSystemUIOverlayStyle(const SystemUiOverlayStyle(

        statusBarColor: Colors.transparent,

        systemNavigationBarColor: Colors.transparent,

        systemNavigationBarDividerColor: Colors.transparent,

    ));

}

iOS 全屏实现

在iOS平台上，全屏实现相对简单，主要通过Flutter的SystemChrome API实现：

dart 复制代码

// 在Flutter代码中设置

if (Platform.isIOS) {

SystemChrome.setEnabledSystemUIMode(SystemUiMode.manual, overlays: []);

}

这种方式会将iOS设备上的状态栏完全隐藏，使应用内容能够占据整个屏幕空间。

注意事项

iOS: 在iOS 13及以上系统，状态栏隐藏方式有变化，需要特别注意。
Android:

不同Android版本API差异较大
需处理刘海屏和挖孔屏特殊情况
全屏模式可能与键盘弹出交互有冲突

HarmonyOS:

API相对统一，但仍在快速发展中
测试设备有限，需要更多真机验证

本文为作者原创技术总结，所有内容均为作者独立研究与实践所得。未经作者书面授权，任何单位或个人不得以任何形式复制、转载、摘编或用于商业用途。如需引用，请注明出处并保留原文完整性。