HarmonyOS鸿蒙Next企业面试题之如何实现应用的沉浸式模式?

沉浸式模式是指应用界面呈现出沉浸式的全屏模式,不留任何系统UI,用户只能看到应用内容。在沉浸式模式下,应用的UI元素会被覆盖,但系统状态栏、导航栏、键盘等系统UI依然可见。

HarmonyOS鸿蒙Nex中这样实现应用的沉浸式模式

1、在入口文件entryability里面通过 setWindowLayoutFullScreen 来配置
 onWindowStageCreate(windowStage: window.WindowStage): void {
    // Main window is created, set main page for this ability
    hilog.info(DOMAIN, 'testTag', '%{public}s', 'Ability onWindowStageCreate');
    // 沉浸式状态栏 开始
    let windowClass: window.Window | undefined = undefined;
    windowStage.getMainWindow((err: BusinessError, data) => {
      windowClass=data
      let promise = windowClass.setWindowLayoutFullScreen(true);
      promise.then(() => {
        //设置状态栏透明背景
        windowStage.getMainWindowSync().setWindowSystemBarEnable(['status']).then(() => {
          const systemBarProperties: window.SystemBarProperties = {
            statusBarColor: '#00000000'
          };
          //设置窗口内导航栏、状态栏的属性
          windowStage.getMainWindowSync().setWindowSystemBarProperties(systemBarProperties)
            .then(() => {
              console.info('Succeeded in setting the system bar properties.');
            }).catch((err:object) => {
            console.error('Failed to set the system bar properties. Cause: ' + JSON.stringify(err));
          });
        })
      }).catch((err: BusinessError) => {
        console.error(`Failed to set the window layout to full-screen mode. Cause code: ${err.code}, message: ${err.message}`);
      });
    })
    // 沉浸式状态栏 结束
    windowStage.loadContent('pages/Index', (err) => {
      if (err.code) {
        hilog.error(DOMAIN, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err));
        return;
      }
      hilog.info(DOMAIN, 'testTag', 'Succeeded in loading the content.');
    });
  }
2、通过Navigation路由组件配置路由的话会自带沉浸式

3、通过expandSafeArea可以配置

@Entry
@Component
struct Index {
  build() {
    Swiper() {
      Column() {
        Image($r('app.media.background'))
          .height('50%').width('100%')
          // 设置图片延伸到状态栏
          .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP])
        Column() {
          Text('HarmonyOS 第一课')
            .fontSize(32)
            .margin(30)
          Text('通过循序渐进的学习路径,无经验和有经验的开发者都可以掌握ArkTS语言声明式开发范式,体验更简洁、更友好的HarmonyOS应用开发旅程。')
            .fontSize(20).margin(20)
        }.height('50%').width('100%')
        .backgroundColor(Color.Blue)
        // 设置文本内容区背景延伸到导航栏
        .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.BOTTOM])
      }
    }
    .width('100%')
    .height('100%')
    // 关闭Swiper组件默认的裁切效果以便子节点可以绘制在Swiper外。
    .clip(false)
  }
}

更多关于HarmonyOS鸿蒙Next企业面试题之如何实现应用的沉浸式模式?的实战教程也可以访问 https://www.itying.com/category-93-b0.html

回到顶部