HarmonyOS 鸿蒙Next中为什么expandSafeArea只有上半部分有效

HarmonyOS 鸿蒙Next中为什么expandSafeArea只有上半部分有效

@Entry
@Component
struct IndexPage{
  private canvasContext = new CanvasRenderingContext2D(new RenderingContextSettings(true))

  build() {
    RelativeContainer() {
      Canvas(this.canvasContext)
        .onReady(() => {
          this.canvasContext.beginPath()
          this.canvasContext.moveTo(0, 0)
          this.canvasContext.lineTo(0, this.canvasContext.height)
          this.canvasContext.lineTo(this.canvasContext.width, this.canvasContext.height)
          this.canvasContext.lineTo(this.canvasContext.width, 0)
          this.canvasContext.fillStyle = '#AA000000'
          this.canvasContext.fill()
          this.canvasContext.closePath()
        })
      .expandSafeArea([SafeAreaType.SYSTEM])
    }
    .width('100%')
    .height('100%')
    .expandSafeArea([SafeAreaType.SYSTEM])
  }
}

更多关于HarmonyOS 鸿蒙Next中为什么expandSafeArea只有上半部分有效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

解决了,根布局 RelativeContainer 的高度改成屏幕高度就可以了

.height(display.getDefaultDisplaySync().height)

更多关于HarmonyOS 鸿蒙Next中为什么expandSafeArea只有上半部分有效的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


需要增加 .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])

在HarmonyOS Next中,expandSafeArea 默认只对状态栏区域(上半部分)生效,因为系统安全区域设计包含状态栏和导航栏。若需下半部分(导航栏)也扩展,需同时设置 expandSafeArea 的属性或显式指定 SafeAreaTypeSYSTEM 并配置 safeAreaInsets 控制下边距。

expandSafeArea 只对组件自身的布局边界生效,使组件边缘可以延伸进安全禁区,但不会改变组件在布局测量中的尺寸。你的 RelativeContainer 设置了 height(‘100%’),这个 100% 是相对于避开安全区域后的可用高度,即便 expandSafeArea 让容器视觉上延伸到顶部状态栏和底部导航栏,其内部测量的高度仍不包含那部分禁区。Canvas 作为子组件继承了这个高度,因此在 onReady 里使用的 this.canvasContext.height 也是那个不含底部安全区域的数值,绘制自然只覆盖到可用区域底部,看上去只有上半部分有效。要让 Canvas 彻底铺满全屏,需要让其测量高度等于整个屏幕高度,可以通过 .height(‘100%’).expandSafeArea 配合使用屏幕实际高度,或给父容器设置 .height(‘100%’) 的同时用 .width(‘100%’).expandSafeArea 但不依赖百分比,改用固定全屏尺寸。

回到顶部