鸿蒙APP如何页面全屏显示?

Viewed 60
harmonynext harmony

如题所示: 鸿蒙APP如何页面全屏显示?

DevWiki1
1 Answers

如果是延伸到状态栏和导航条则使用 expandSafeArea

// xxx.ets
@Entry
@Component
struct SafeAreaExample1 {
  @State text: string = ''
  controller: TextInputController = new TextInputController()

  build() {
    Row() {
        Column()
          .height('100%').width('100%')
          .backgroundImage($r('app.media.bg')).backgroundImageSize(ImageSize.Cover)
          .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])
    }.height('100%')
  }
}

image.png

如果状态栏和导航条也不要显示, 则需要设置 window的 full screen: setWindowLayoutFullScreen


import { BusinessError } from '@ohos.base';

let isLayoutFullScreen = true;
try {
  windowClass.setWindowLayoutFullScreen(isLayoutFullScreen, (err: BusinessError) => {
    const errCode: number = err.code;
    if (errCode) {
      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));
}
DevWiki1