跨平台全屏效果实现方案: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设备上的状态栏完全隐藏,使应用内容能够占据整个屏幕空间。

注意事项

  1. iOS: 在iOS 13及以上系统,状态栏隐藏方式有变化,需要特别注意。
  2. Android:
  • 不同Android版本API差异较大

  • 需处理刘海屏和挖孔屏特殊情况

  • 全屏模式可能与键盘弹出交互有冲突

  1. HarmonyOS:
  • API相对统一,但仍在快速发展中

  • 测试设备有限,需要更多真机验证


版权声明

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

作者保留所有权利,侵权必究。

© 2025 [享时科技工作室] 版权所有

相关推荐
HarmonyOS_SDK1 小时前
京东携手HarmonyOS SDK首发家电AR高精摆放功能
harmonyos
塞尔维亚大汉2 小时前
鸿蒙内核源码分析(根文件系统) | 先挂到/上的文件系统
源码·harmonyos
别说我什么都不会2 小时前
【OpenHarmony】鸿蒙开发之Checksum
harmonyos
周胡杰4 小时前
鸿蒙arkts使用关系型数据库,使用DB Browser for SQLite连接和查看数据库数据?使用TaskPool进行频繁数据库操作
前端·数据库·华为·harmonyos·鸿蒙·鸿蒙系统
simple丶5 小时前
【HarmonyOS】封装用户鉴权工具类
harmonyos·arkts·arkui
simple丶5 小时前
【HarmonyOS】基于Axios封装网络请求工具类
harmonyos·arkts·arkui
万少7 小时前
2-自然壁纸实战教程-AGC 新建项目
前端·harmonyos
你听得到117 小时前
从需求到封装:手把手带你打造一个高复用、可定制的Flutter日期选择器
前端·flutter
哲科软件17 小时前
跨平台开发的抉择:Flutter vs 原生安卓(Kotlin)的优劣对比与选型建议
android·flutter·kotlin
天涯海风17 小时前
Kuikly 与 Flutter 的全面对比分析,结合技术架构、性能、开发体验等核心维度
flutter·kuikly