HarmonyOS 如何显示和隐藏顶部状态栏？

Question

如何显示和隐藏顶部状态栏？

如何设置成沉浸式状态栏

如何设置状态栏的主题色

Answer 1

可以在UIAbility的onWindowStageCreate的生命周期中设置setWindowSystemBarEnable接口即可。

显示和隐藏以及沉浸式参考链接如下：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/application-window-stage-V5

修改状态栏颜色请参考以下代码：

import window from '@ohos.window';
import router from '@ohos.router';

@Entry
@Component
export struct CommonTopBar {
  @Prop title: string
  @Prop alpha: number = 1
  @State statusBarHeight: number = 0
  private titleAlignment: TextAlign = TextAlign.Center
  private backButton: boolean = true
  private onBackClick?: () => void
  @State barHeight: number = 0

  onPageShow(): void {
  }

  aboutToAppear() {
    this.setSystemBar()
  }

  async setSystemBar() {
    // 获取当前应用窗口
    let windowClass: window.Window = await window.getLastWindow(getContext(this))
    // 获取状态栏高度
    this.barHeight = windowClass.getWindowAvoidArea(window.AvoidAreaType.TYPE_SYSTEM).topRect.height
    console.log(`获取状态栏高度 ： ${this.barHeight}`);

    // 前提：设置窗口为全屏窗口
    // windowClass.setWindowLayoutFullScreen(true);
    // 沉浸式方案一：设置系统栏不显示[],需要显示则设置[‘status’,‘navigation’]
    // windowClass.setWindowSystemBarEnable([]);
    // 沉浸式方案二：将状态栏和导航栏的背景色设置为跟应用窗口相同的颜色
    await windowClass.setWindowSystemBarProperties({
      // 颜色属性为ARGB，将蒙尘设置为0%使其透明
      // 导航栏颜色
      navigationBarColor:
      '#fd121de5',
      // 状态栏颜色
      statusBarColor: '#ff0ad9c2',
      // 导航栏文字颜色
      navigationBarContentColor: '#fde20606',
      // 状态栏文字颜色
      statusBarContentColor: '#fff1e50a',
    })
  }

  build() {
    Column() {
      Blank()
        .backgroundColor(Color.Red)
        .opacity(this.alpha)
      Stack({ alignContent: Alignment.Start }) {
        Stack()
          .height(50)
          .width("100%")
          .opacity(this.alpha)
          .backgroundColor(Color.Red)
        Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center }) {
          Text(this.title)
            .flexGrow(1)
            .textAlign(this.titleAlignment)
            .fontColor('#ffffff')
            .fontSize(16)
            .align(Alignment.Center)
            .maxLines(1)
            .textOverflow({ overflow: TextOverflow.Ellipsis })
        }
        .height(50)
        .margin({ left: 50, right: 50 })
        .alignSelf(ItemAlign.Center)

        if (this.backButton) {
          Stack() {
            Image($r('app.media.startIcon'))
              .height(16)
              .width(16)
              .align(Alignment.Center)
              .onClick(() => {
                this.onBackClick?.()
                router.back();
              })
          }
          .height(50)
          .width(50)
        }
      }
      .height(50)
      .width("100%")
    }.height(this.statusBarHeight)
  }
}