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

