HarmonyOS 鸿蒙Next如何显示和隐藏顶部状态栏?

发布于 1周前 作者 songsunli 来自 鸿蒙OS

HarmonyOS 鸿蒙Next如何显示和隐藏顶部状态栏?

如何显示和隐藏顶部状态栏? 
如何设置成沉浸式状态栏
如何设置状态栏的主题色

2 回复

可以在UIAbility的onWindowStageCreate的生命周期中设置setWindowSystemBarEnable接口即可。 如onWindowStageCreate(windowStage){ windowStage.getMainWindowSync().setWindowSystemBarEnable([]) … } 显示和隐藏以及沉浸式参考链接如下:https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/windowmanager/application-window-stage.md#/openharmony/docs/blob/master/zh-cn/application-dev/reference/apis/js-apis-window.md 修改状态栏颜色请参考以下代码:

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)
  }
}

更多关于HarmonyOS 鸿蒙Next如何显示和隐藏顶部状态栏?的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS 鸿蒙Next系统中,显示和隐藏顶部状态栏的操作通常通过修改应用窗口的属性来实现。具体步骤如下:

  1. 显示状态栏

    • 默认情况下,应用窗口会显示状态栏。如果状态栏被意外隐藏,可以通过设置窗口的Flags属性来恢复显示。
    • 使用系统API,如WindowManager.LayoutParams中的FLAG_FULLSCREEN(如需隐藏则不使用此标志)来确保状态栏显示。
  2. 隐藏状态栏

    • 若需隐藏状态栏,可以在应用启动时或在特定页面通过设置窗口的Flags属性来实现。
    • 使用WindowManager.LayoutParams.FLAG_FULLSCREENWindowManager.LayoutParams.FLAG_HIDE_NAVIGATION联合使用,可以将状态栏和导航栏一并隐藏。
    • 注意,隐藏状态栏可能会影响用户交互体验,需谨慎使用。

实现上述功能通常需要在Activity或Fragment中进行窗口属性的设置,具体操作需根据应用的实际开发框架和需求进行适配。

如果问题依旧没法解决请联系官网客服,官网地址是:https://www.itying.com/category-93-b0.html

回到顶部