HarmonyOS鸿蒙Next中arkui-x沉浸式开发有没有大佬懂的

HarmonyOS鸿蒙Next中arkui-x沉浸式开发有没有大佬懂的

已按照官方给的方法EntryAbility.ets文件设置，但ios项部和安卓端底部还是老样子，不是沉浸式，如何解决，HarmonyOs模拟器就没有问题，IDE框架sdk都是最新版本

官方文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-develop-apply-immersive-effects#section15671730447

arkui-x文档：https://gitcode.com/arkui-x/docs/blob/master/zh-cn/application-dev/reference/apis/js-apis-window.md#setwindowlayoutfullscreen9-1

let windowClass: window.Window = windowStage.getMainWindowSync(); // 获取应用主窗口
// 1. 设置窗口全屏
let isLayoutFullScreen = true;
console.log('123');
windowClass.setWindowLayoutFullScreen(isLayoutFullScreen).then(() => {
  console.info('Succeeded in setting the window layout to full-screen mode.');
}).catch((err: BusinessError) => {
  console.error('Failed to set the window layout to full-screen mode. Cause:' + JSON.stringify(err));
});

安卓端模拟器，系统版本15.0

az.jpg

ios

ios.jpg

HarmonyOs模拟器，没有问题

hm.jpg


更多关于HarmonyOS鸿蒙Next中arkui-x沉浸式开发有没有大佬懂的的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

去提Issues吧

更多关于HarmonyOS鸿蒙Next中arkui-x沉浸式开发有没有大佬懂的的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


跨平台开发的难处是你得懂所有平台的基本特性。

ArkUI-X在鸿蒙Next中实现沉浸式开发主要涉及以下技术点：

  1. 使用系统提供的沉浸式API：
  • SystemBarProperties类控制状态栏/导航栏
  • setSystemBarEnable()方法开启沉浸模式
  1. UI适配方案：
  • 应用safeArea组件处理异形屏
  • 配合mediaquery适配不同屏幕
  1. 关键实现代码示例：
import systemBar from '@ohos.systemBar'

// 设置沉浸式状态栏
systemBar.setSystemBarProperties({
  statusBarColor: '#00000000',
  statusBarContentColor: '#FFFFFF'
})

沉浸式效果需要同时处理好UI布局和系统栏控制。

根据您提供的代码和截图，问题可能出在跨平台适配方面。在HarmonyOS Next中，虽然setWindowLayoutFullScreen()方法在HarmonyOS模拟器上工作正常，但在iOS和Android平台上需要额外处理：

  1. 对于iOS顶部状态栏问题：

    • 需要检查是否在Info.plist中设置了"View controller-based status bar appearance"为NO，并确保调用了UIApplication.shared.setStatusBarHidden()方法

  2. 对于Android底部导航栏问题：

    • 除了setWindowLayoutFullScreen()外，还需要调用WindowInsetsController API来隐藏系统栏：

      import window from '@ohos.window';

let windowClass = window.getLastWindow(this.context);
windowClass.setWindowSystemBarEnable(['status', 'navigation']).then(() => {
    console.log('Successfully hide system bars');
});

  3. 建议在onWindowStageCreate()中同时添加以下代码：

    windowClass.setWindowLayoutFullScreen(true)
    .then(() => windowClass.setWindowSystemBarEnable([]))
    .catch(err => console.error(err));

  4. 检查各平台的主题设置是否包含透明状态栏/导航栏的样式配置

这些跨平台差异需要针对不同系统进行特殊处理，建议分别调试iOS和Android平台的实现。

回到顶部