【HarmonyOS实战开发】鸿蒙实现沉浸式状态栏

实现前的效果:

实现后的效果:

关键部分

1.要设置状态栏全面屏的效果
2.给状态栏设置对应的颜色

具体实现代码:

  setLayoutFullScreen(windowStage: window.WindowStage) {
    let windowClass = null
    windowStage.getMainWindow((error, data) => {
      if (error.code) {
        console.error('failed to obtain main window,cause:' + JSON.stringify(error))
        return
      }
      windowClass = data
      console.error('Succeeded to obtain main window,data:' + JSON.stringify(data))
      let names = ["status"]
      windowClass.setWindowSystemBarEnable(names, (error) => {
        if (error.code) {
          console.error('Failed to set the system bar to be visible. Cause:' + JSON.stringify(error));
          return;
        }
        console.info('Succeeded in setting the system bar to be visible.');
      })

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

这个方法必须放在EntryAbility的
onWindowStageCreate(windowStage: window.WindowStage)方法中调用；
设置对应的颜色:
创建一个 自定义组件，作为页面头部的显示，在这个组件中设置状态栏的颜色:

  aboutToAppear() {
    this.setSystemStatusBar()
  }

  setSystemStatusBar() {
    let context = getContext(this)
    window.getLastWindow(context, (error, data) => {
      // 1.设置系统状态栏
      let avoidArea = data.getWindowAvoidArea(window.AvoidAreaType.TYPE_SYSTEM) // 获取窗口内容规避的区域；如系统栏区域、刘海屏区域、手势区域、软键盘区域等与窗口内容重叠时，需要窗口内容避让的区域。
      // 设置System顶部的高度
      avoidArea.topRect.height = 90
      this.statusBarHeight = avoidArea.topRect.height
      LogUtils.info("顶部状态栏的高度", `${this.statusBarHeight}`)
      let bottomHeight = avoidArea.bottomRect.height
      LogUtils.info("底部系统导航栏的高度", `${bottomHeight}`)

      const systemBarProperties: window.SystemBarProperties = {
        statusBarColor: '#ffffff', // string类型，这里直接设置对应的颜色会被后续设置的颜色覆盖
        statusBarContentColor: '#ffffff',
        isStatusBarLightIcon: true
      }
      // 设置状态栏的属性
      data.setWindowSystemBarProperties(systemBarProperties, (error, result) => {
        LogUtils.warn("设置状态栏结果码", `${error.code}`)
        if (error.code == 0) {
          LogUtils.info("状态栏设置成功")
        } else {
          LogUtils.info("状态栏设置失败:" + error.message)
        }
      })
    })
  }

  build() {
    Column() {
      Blank()
        .backgroundColor($r('app.color.color_red'))
        .opacity(this.alpha)
      Stack({
        alignContent: Alignment.Start
      }) {
        Flex({ direction: FlexDirection.Row,
          alignItems: ItemAlign.Center }) {
          Text(this.title)
            .flexGrow(1)
            .textAlign(this.titleAlignment)
            .fontColor($r('app.color.color_fff'))
            .fontSize($r('app.float.size_text_16'))
            .align(Alignment.Center)
            .maxLines(1)
            .textOverflow({ overflow: TextOverflow.Ellipsis })
        }
        .height($r('app.float.size_50'))
        // .margin({ left: $r('app.float.size_16'), right: $r('app.float.size_50') })
        .alignSelf(ItemAlign.Center)
        .width(CommonConstants.FULL_WIDTH_PERCENT)
        .opacity(this.alpha)
        .backgroundColor($r('app.color.color_red'))

        if (this.backButton) {
          Stack() {
            Image($r('app.media.ic_action_back'))
              .height($r('app.float.size_16'))
              .aspectRatio(1)
              .align(Alignment.Center)
              .onClick(() => {
                this.onBackClick?.()
                router.back()
              })
          }
          .height($r('app.float.size_50'))
          .width($r('app.float.size_50'))
        }

      }
      .height($r('app.float.size_50'))
      .width(CommonConstants.FULL_WIDTH_PERCENT)
    }.height(this.statusBarHeight)
  }

注意用到api有这些:

写在最后

●如果你觉得这篇内容对你还蛮有帮助，我想邀请你帮我两个小忙：
●点赞，转发，有你们的 『点赞和评论』，才是我创造的动力。
●关注小编，同时可以期待后续文章ing ，不定期分享原创知识。