HarmonyOS鸿蒙Next上通过promptAction‌.openCustomDialog打开的弹框，弹窗中有个输入框，当点击输入框时，整个弹窗被压缩，要怎么处理？

HarmonyOS鸿蒙Next上通过promptAction‌.openCustomDialog打开的弹框，弹窗中有个输入框，当点击输入框时，整个弹窗被压缩，要怎么处理？ 在使用promptAction‌.openCustomDialog实现编辑弹窗功能时，发现在横屏场景下，点击弹窗的输入框，整个弹窗会被压缩，进而导致输入框无法在用户可视区域内。

3 回复

你好

promptAction.openCustomDialog的第二个入参options可以配置KeyboardAvoidMode属性设置软键盘弹出时的避让模式。

请参考：https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-arkui-uicontext#opencustomdialog12

默认为KeyboardAvoidMode.DEFAULT，会避让软键盘。

鉴于此，可以将其设置为KeyboardAvoidMode.NONE，不避让软键盘，覆盖弹窗。

更多关于HarmonyOS鸿蒙Next上通过promptAction‌.openCustomDialog打开的弹框，弹窗中有个输入框，当点击输入框时，整个弹窗被压缩，要怎么处理？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS Next中，使用promptAction.openCustomDialog时出现弹窗压缩问题，可通过以下方式解决：

  1. 确保自定义弹窗布局中设置了固定高度或最小高度
  2. 在布局XML中使用固定尺寸属性：
<TextField
    ohos:height="match_content"
    ohos:min_height="50vp"
    ohos:width="match_parent"/>
  1. 避免在弹窗中使用wrap_content作为高度值

此问题通常是由于输入框聚焦时软键盘弹出导致的布局重计算引起。

在HarmonyOS Next中遇到弹窗被压缩的问题，可以通过以下方式解决：

  1. 设置弹窗的固定高度： 在openCustomDialog的参数中明确指定height属性，避免系统自动调整尺寸。例如：
promptAction.openCustomDialog({
  height: '50%', // 固定高度为屏幕50%
  // 其他参数...
})
  1. 启用键盘自适应模式： 添加keyboardAvoid属性来优化键盘弹出时的布局：
promptAction.openCustomDialog({
  keyboardAvoid: true,
  // 其他参数...
})
  1. 对于横屏场景的特殊处理： 建议在横屏时调整弹窗宽度和位置：
const isLandscape = window.orientation === 90 || window.orientation === -90;
promptAction.openCustomDialog({
  width: isLandscape ? '70%' : '90%',
  // 其他参数...
})
  1. 检查输入框布局： 确保输入框使用了flex布局并设置minHeight属性，防止过度压缩：
TextInput()
  .minHeight(50)
  .flexGrow(1)

这些调整应该能解决弹窗在横屏下被压缩的问题，同时保持良好的用户体验。

回到顶部