HarmonyOS鸿蒙Next中如何解决半模态弹窗遮挡系统导航键的问题?换了api13就有这种情况,之前api9没有
HarmonyOS鸿蒙Next中如何解决半模态弹窗遮挡系统导航键的问题?换了api13就有这种情况,之前api9没有 如何解决半模态弹窗遮挡系统导航键的问题?换了api13就有这种情况,之前api9没有#HarmonyOS最强问答官#
3 回复
写了一个demo,监听软件盘是否弹出,如果弹出把半模态加上软件盘的高度
// xxx.ets
import { window } from '@kit.ArkUI';
@Entry
@Component
struct SheetTransitionExample {
@State isShow: boolean = false
@State isShow2: boolean = false
@State sheetHeight: number = 300;
@State keyHeight: number = 0
aboutToAppear() {
window.getLastWindow(getContext(this)).then(currentWindow => {
// 监听软键盘的隐藏和显示
currentWindow.on('avoidAreaChange', data => {
if (data.type == window.AvoidAreaType.TYPE_KEYBOARD) {
if (px2vp(data.area.bottomRect.height) == 0) {
this.keyHeight = 0
} else {
this.keyHeight = px2vp(data.area.bottomRect.height);
}
return;
}
})
})
}
@Builder
myBuilder() {
Column() {
TextInput()
}
.width('100%')
.height('100%')
}
build() {
Column() {
Button("transition modal 1")
.onClick(() => {
this.isShow = true
})
.fontSize(20)
.margin(10)
.bindSheet($$this.isShow, this.myBuilder(), {
height: this.sheetHeight + this.keyHeight,
backgroundColor: Color.Green,
onHeightDidChange: (data: number) => {
console.info('xxx:' + data)
}
})
}
.justifyContent(FlexAlign.Center)
.width('100%')
.height('100%')
}
}
更多关于HarmonyOS鸿蒙Next中如何解决半模态弹窗遮挡系统导航键的问题?换了api13就有这种情况,之前api9没有的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
在HarmonyOS鸿蒙Next中,半模态弹窗遮挡系统导航键的问题可能与API 13的更新有关。API 13可能引入了新的布局或行为变化,导致弹窗遮挡导航键。可以通过调整弹窗的布局参数或使用新的API来控制弹窗的位置和大小,以避免遮挡系统导航键。具体来说,可以尝试使用setLayoutInDisplayCutoutMode或setSystemUiVisibility等方法来确保弹窗不会覆盖系统导航键。此外,检查弹窗的WindowManager.LayoutParams,确保其flags和type设置正确,避免与系统UI冲突。
在HarmonyOS鸿蒙Next中,解决半模态弹窗遮挡系统导航键的问题,可以通过调整弹窗的显示位置和大小来实现。具体步骤如下:
- 使用
setWindowLayout方法:通过WindowManager的setWindowLayout方法,调整弹窗的布局参数,确保弹窗不遮挡系统导航键。 - 设置
WindowManager.LayoutParams:在创建弹窗时,设置WindowManager.LayoutParams的flags属性,例如FLAG_LAYOUT_NO_LIMITS,以避免弹窗超出屏幕范围。 - 监听屏幕尺寸变化:通过监听屏幕尺寸变化,动态调整弹窗的位置和大小,确保在不同屏幕尺寸下都能正确显示。
通过以上方法,可以有效避免半模态弹窗遮挡系统导航键的问题。

