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来控制弹窗的位置和大小,以避免遮挡系统导航键。具体来说,可以尝试使用setLayoutInDisplayCutoutModesetSystemUiVisibility等方法来确保弹窗不会覆盖系统导航键。此外,检查弹窗的WindowManager.LayoutParams,确保其flagstype设置正确,避免与系统UI冲突。

在HarmonyOS鸿蒙Next中,解决半模态弹窗遮挡系统导航键的问题,可以通过调整弹窗的显示位置和大小来实现。具体步骤如下:

  1. 使用setWindowLayout方法:通过WindowManagersetWindowLayout方法,调整弹窗的布局参数,确保弹窗不遮挡系统导航键。
  2. 设置WindowManager.LayoutParams:在创建弹窗时,设置WindowManager.LayoutParamsflags属性,例如FLAG_LAYOUT_NO_LIMITS,以避免弹窗超出屏幕范围。
  3. 监听屏幕尺寸变化:通过监听屏幕尺寸变化,动态调整弹窗的位置和大小,确保在不同屏幕尺寸下都能正确显示。

通过以上方法,可以有效避免半模态弹窗遮挡系统导航键的问题。

回到顶部