Mate60Pro 2.0.0.72版本page页面标题栏与状态栏重叠？

Question

Row() {
  Image(this.closeIcon).width(15).height(15).margin({ left: 20, top: 20 }).onClick(() => {
    //todo
  })
}.width('100%').justifyContent(FlexAlign.Start).backgroundColor(0xFFFFFF)

Answer 1

首先使用window.getLastWindow获取主窗口对象中的isLayoutFullScreen属性，然后在build组件中加入一个blank组件。

通过获取当前是否为全屏化布局状态将blank调整为0或者状态栏高度。

参考文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-window-0000001820880785

参考Demo：

@State flag: boolean = false;
@State SysBarHeight: number = 0;

onPageShow(): void {
  window.getLastWindow(getContext(this), (err, win) => {
  this.flag = win.getWindowProperties().isLayoutFullScreen
  this.SysBarHeight = win.getWindowAvoidArea(window.AvoidAreaType.TYPE_SYSTEM).topRect.height
})
}

build() {

  Column() {
    Blank()
      .height(this.flag ? px2vp(this.SysBarHeight) : 0)
    // TODO
  }
}