HarmonyOS Next鸿蒙开发:页面全屏模式

322 阅读1分钟

在实际开发中,通常会用到全屏模式,比如广告页或者闪屏加载页、或者是开发游戏时需要用到全屏,需要把顶部状态栏、刘海屏、底部工具栏等区域全部覆盖。那么如果是页面全屏幕比较简单,可以通过以下方式解决 这种是单页面设置全屏,当然也有全局设置全屏幕,具体还是需要看实际项目场景,如果需要做到全局全屏可以

1、设置全局全屏方式,在 EntryAbility类的onWindowStageCreate添加下代码


onWindowStageCreate(windowStage: window.WindowStage): void {
  let targetPage:string="pages/d3/fullscreen/FullScreenPage";

  let isLayoutFullScreen= true;
  let windowClass = windowStage.getMainWindowSync()
  try {
    windowClass.setWindowLayoutFullScreen(isLayoutFullScreen, (err) => {
      if (err.code) {
        console.error('Failed to set the window layout to full-screen mode. Cause:' + JSON.stringify(err));
        return;
      }
      console.info('Succeeded in setting the window layout to full-screen mode.');
    });
  } catch (exception) {
    console.error('Failed to set the window layout to full-screen mode. Cause:' + JSON.stringify(exception));
  }
  

2、设置单页面全屏模式

@Entry
@Component
struct FullScreenPage {
  build() {
    Swiper() {
      Column() {
        Image($r('app.media.bg_evening'))
          .height('100%').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.White)*/
        // 设置文本内容区背景延伸到导航栏
        .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP,SafeAreaEdge.BOTTOM])
      }
    }
    .width('100%')
    .height('100%')
    // 关闭Swiper组件默认的裁切效果以便子节点可以绘制在Swiper外。
    .clip(false)
  }
}

预览效果 image.png

模拟器效果

image.png