HarmonyOS 如何获取顶部安全区域的高度？

目前在写布局时，遇到了一个问题，我们的上面是一个长方形图片，要顶到手机顶端，也就是覆盖到安全区域部分，代码如下：

Stack({ alignContent: Alignment.Top }) {

  Image($r('app.media.banner'))
    .width(this.deviceWidth)
    .height(this.bannerImageViewHeight)
    .margin({ top: 0, left: 0, right: 0 })// 设置顶部绘制延伸到状态栏
    .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP])

  Column() {
    Image($r('app.media.logo'))
      .width(144)
      .height(27)
      .margin({ top: 100, left: 40 })

    Text('标题xxxxxxxx')
      .fontSize(14)
      .fontWeight(FontWeight.Bold)
      .fontColor('#333333')
      .margin({ top: 15, left: 40 })

  }.width('100%').margin({ top: 0 })
  // 主轴上的对齐方式
  .justifyContent(FlexAlign.Start)
  // 交叉轴上的对齐方式
  .alignItems(HorizontalAlign.Start)

  Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
    Button('按钮1')
      .width('100%')
      .height(48)
      .margin({ top: 0, left: 0 })
      .type(ButtonType.Normal)
      .borderRadius(10)
      .fontSize(18)
      .fontWeight(FontWeight.Bold)
      .fontColor(Color.Black)
      .backgroundColor(Color.White)
      .opacity(0.7)

    Button('按钮2')
      .width('100%')
      .height(48)
      .margin({ top: 0, left: 0})
      .type(ButtonType.Normal)
      .borderRadius(10)
      .fontSize(18)
      .fontWeight(FontWeight.Bold)
      .fontColor(Color.Black)
      .backgroundColor(Color.White)
      .opacity(0.7)

  }.padding({ top: this.bannerImageViewHeight - 48})
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.

我们本来是要把这俩按钮盖到图片上面的，但是发现减去按钮高度48以后，按钮并没有全上去，有一半在底部的外面。所以肯定是顶部的安全区域的高度导致的，但我没有找到获取安全区域高度的API，没办法减去这个高度。所以这种情况应该怎么办？

HarmonyOS

aquaa

2024-12-24 17:07:47

1293浏览

回答 1

按赞同

按时间

superinsect

当前window提供API获取系统区域包括导航栏和状态栏。

API：getWindowAvoidArea

window.getLastWindow(getContext(this), (error, topWindow) => {
  if (topWindow) {
    let area = topWindow.getWindowAvoidArea(window.AvoidAreaType.TYPE_SYSTEM);
    //注意：返回的是px值，如果要用vp值需要转换
    this.statusBarHeight = px2vp(area.topRect.height);
    this.naviBarHeight = px2vp(area.bottomRect.height);
  }
});
1.
2.
3.
4.
5.
6.
7.
8.

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

2024-12-24 20:37:56

如何写精华回答，获更多曝光？

发布

51CTO

51CTO博客

51CTO学堂

HarmonyOS 如何获取顶部安全区域的高度？

订阅鸿蒙技术特刊，精选内容抢先看