HarmonyOS 弹窗布局被软键盘压缩

占满屏幕高度的dialog软键盘弹出时布局被压缩。

操作步骤：

1、已在EntryAbility windowStage.loadContent后设置windowStage.getMainWindowSync().getUIContext().setKeyboardAvoidMode(KeyboardAvoidMode.OFFSET)，已确认@Component组件生效，布局不会被软键盘压缩。

2、SelectCategorySidebarDialog中的控件设置expandSafeArea([SafeAreaType.KEYBOARD],[SafeAreaEdge.BOTTOM])。

3、SelectCategorySidebarDialog.open。

4、点击SelectCategorySidebarDialog中的TextInput打开软键盘，SelectCategorySidebarDialog布局被压缩。

源码：

// dialog的定义
@CustomDialog
export struct SelectCategorySidebarDialog {
  controller?: CustomDialogController

  build() {
    Column() {
      Blank()
      TextInput()
        .expandSafeArea([SafeAreaType.KEYBOARD], [SafeAreaEdge.BOTTOM])
    }
    .expandSafeArea([SafeAreaType.KEYBOARD], [SafeAreaEdge.BOTTOM])
    .backgroundColor(Color.White)
    .width("72.8%")
    .height("100%")
  }
}

// dialog初始化方式
selectCategoryDialogController: CustomDialogController | null = new CustomDialogController({
  builder: SelectCategorySidebarDialog(),
  autoCancel: true,
  customStyle: true,
  alignment: DialogAlignment.TopStart,
})

期待结果：软键盘直接遮挡dialog的布局。

HarmonyOS

superinsect

2025-01-09 16:04:43

浏览

回答 1

待解决

回答 1

按赞同

按时间

shlp

自定义弹窗默认避让输入法，不允许配置不避让。自定义弹窗仅适用于简单提示场景，当弹窗高度过大时建议用页面级的组件代替，或者使用半模态实现相关功能。

参考示例：

@Entry
@Component
struct Main4 {
  @State isShow: boolean = false
  @Builder
  myBuilder() {
    Column() {
      Button("关闭半模态").onClick(() => {
        this.isShow = false
      })
      TextInput()
    }
    .expandSafeArea([SafeAreaType.SYSTEM, SafeAreaType.KEYBOARD], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])
    .borderRadius(10)
    .width("100%")
  }

  build() {
    Column() {
      Button('click me 打开半模态')
        .onClick(() => {
          this.isShow = !this.isShow
        })
    }
    .expandSafeArea([SafeAreaType.SYSTEM, SafeAreaType.KEYBOARD], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])
    .bindSheet($$this.isShow, this.myBuilder(), { height: 400 })
    .justifyContent(FlexAlign.End)
    .width('100%')
    .height('100%')
  }
}

2025-01-09 19:17:50

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

发布

51CTO

51CTO博客

51CTO学堂

HarmonyOS 弹窗布局被软键盘压缩

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