HarmonyOS 沉浸式状态栏实现

比如说我们代码是这样的

@Entry
@Component
struct Index {

  build() {
    Column() {
      Column() {
        Column() {
          Text('定标标题')
            .fontSize(20)
            .fontColor(Color.White)
        }
        .height(50)
        .justifyContent(FlexAlign.Center)
      }
      .width('100%')
      .backgroundColor('#FF0000')
    }
    .height('100%')
  }
}

你预览器上看着确实是没什么问题
在这里插入图片描述
但是我们真机运行一下会发现我们顶部还是空出了一条黑的

那么如果设计要求将这个地方填满请问阁下又该如何应对？

我们如下图所示找到这个 EntryAbility.ts
它的生命周期都是应用全局的
在这里插入图片描述
我们要操作的是 onWindowStageCreate 当应用窗口创建完成时触发的生命周期
改写代码如下

onWindowStageCreate(windowStage: window.WindowStage) {
  // 1.获取应用主窗口。
  let windowClass = null;
  windowStage.getMainWindow((err, data) => {

    if (err.code) {
      console.error('Failed to obtain the main window. Cause: ' + JSON.stringify(err));
      return;
    }

    windowClass = data;
    console.info('Succeeded in obtaining the main window. Data: ' + JSON.stringify(data));


    // 2.实现沉浸式效果：设置导航栏、状态栏不显示。
    let names = [];
    windowClass.setWindowSystemBarEnable(names, (err) => {
      if (err.code) {
        console.error('Failed to set the system bar to be visible. Cause:' + JSON.stringify(err));
        return;
      }
      console.info('Succeeded in setting the system bar to be visible.');
    });

    windowClass.setWindowLayoutFullScreen(true)
  })


  // 3.为沉浸式窗口加载对应的目标页面。
  windowStage.loadContent("pages/Index", (err) => {
    if (err.code) {
      console.error('Failed to load the content. Cause:' + JSON.stringify(err));
      return;
    }
    console.info('Succeeded in loading the content.');
  });
}