HarmonyOS 如何设置状态栏颜色?

如题,目前在用expandSafeArea适配,如果我不希望扩展至状态栏,只设置颜色该如何设置呢?之前记得文档上有,现在没找到了

HarmonyOS
1天前
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
put_get

请参考以下代码:

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

  aboutToAppear() {
    // this.setSystemStatusBar()
    this.setSystemBar()
  }

  async setSystemBar() {
    // 获取当前应用窗口
    let windowClass: window.Window = await window.getLastWindow(getContext(this))
    // 获取状态栏高度
    this.barHeight = windowClass.getWindowAvoidArea(window.AvoidAreaType.TYPE_SYSTEM).topRect.height
    // 前提:设置窗口为全屏窗口
    // 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)
  }
}

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

分享
微博
QQ
微信
回复
1天前
相关问题
HarmonyOS 状态栏怎么设置颜色
77浏览 • 1回复 待解决
HarmonyOS 状态栏图标颜色设置
27浏览 • 1回复 待解决
HarmonyOS 动态设置状态栏颜色
35浏览 • 1回复 待解决
如何设置状态栏和导航颜色
2990浏览 • 1回复 待解决
HarmonyOS 状态栏颜色如何修改
64浏览 • 1回复 待解决
设置状态栏颜色不起作用怎么回事?
2437浏览 • 1回复 待解决
状态栏设置颜色失效该怎么办啊?
1991浏览 • 1回复 待解决
HarmonyOS 修改状态栏颜色不生效
325浏览 • 1回复 待解决
如何设置沉浸式状态栏
2626浏览 • 1回复 待解决
鸿蒙怎么 修改状态栏字体颜色
12495浏览 • 1回复 待解决