HarmonyOS 鸿蒙Next CustomDialogController 弹出键盘以后自动避让导致弹框高度变小,但是输入框依然被遮挡的问题

发布于 1周前 作者 nodeper 来自 鸿蒙OS

HarmonyOS 鸿蒙Next CustomDialogController 弹出键盘以后自动避让导致弹框高度变小,但是输入框依然被遮挡的问题 CustomDialogController 高度挺高的,弹出键盘以后自动避让导致弹框高度变小,但是输入框依然被遮挡,此时用户看不见输入框了。怎么解决呢?如果把 keyboardAvoidMode 自动避让关了,还是看不到输入框,真是无解了。

尝试将弹框内容嵌套进入 scroll 中,但是不起作用啊,页面无法滚动。

已在下方上传 Demo,求解!

13 回复

给你弹窗的这个页面,最外层加一个scroll布局

cke_176.png

更多关于HarmonyOS 鸿蒙Next CustomDialogController 弹出键盘以后自动避让导致弹框高度变小,但是输入框依然被遮挡的问题的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


真的成了!大神!
原来我尝试加的scroll布局没用在最外层,这次好使了!

参考下使用如下demo: 主要使用stack布局处理TextInput位置

import { KeyboardAvoidMode } from '@kit.ArkUI';

@CustomDialog
export struct MyDialog {
  controller: CustomDialogController
  @State dialogTitle: string = '自定义弹框'
  listData: string[] = ['Comment1', 'Comment2', 'Comment3', 'Comment4'];

  build() {
    Stack({ alignContent: Alignment.Bottom }) {
      Column() {
        Column() {
          Text(this.dialogTitle)
            .fontSize(17)
            .margin({ top: 20 })
        }
        List() {
          ForEach(this.listData, (item: string) => {
            ListItem() {
              Column() {
                Text(item)
              }
            }
          }, (item: string) => item)
        }
      }.height("50%")

      Column() {
        TextInput({ placeholder: '这个输入框就会被键盘遮挡' })
          .fontSize(14)
          .backgroundColor('#F6F6F6')
          .width("100%")
          .padding({
            bottom: 24,
            left: 8,
            right: 8
          })
          .backgroundColor(Color.Gray)
      }
    }
  }
}

求解决办法!

[https://edu-apps.oss-cn-beijing.aliyuncs.com/test/MyApplicationDemo.zip](https://edu-apps.oss-cn-beijing.aliyuncs.com/test/MyApplicationDemo.zip)

有解决办法不?

最好写个能复现这种情况的demo

找HarmonyOS工作还需要会Flutter的哦,有需要Flutter教程的可以学学大地老师的教程,很不错,B站免费学的哦:https://www.bilibili.com/video/BV1S4411E7LY/?p=17

有解决办法不?

针对HarmonyOS鸿蒙系统中Next CustomDialogController在弹出键盘后自动避让导致弹框高度变小,但输入框依然被遮挡的问题,可以尝试以下解决方案:

在自定义DialogController时,可以通过监听键盘的弹出和隐藏事件,动态调整Dialog的布局。具体实现步骤如下:

  1. 监听键盘事件:使用系统提供的键盘监听API,监听键盘的显示和隐藏状态。

  2. 动态调整布局:当键盘显示时,根据键盘的高度调整Dialog的布局,确保输入框不会被遮挡。通常可以通过调整Dialog的padding或margin来实现。

  3. 重新计算并设置Dialog高度:在调整布局后,需要重新计算Dialog的高度,并调用相关方法更新Dialog的显示。

  4. 确保布局更新及时:在调整布局后,确保UI线程能够及时刷新,以避免界面更新延迟导致的问题。

通过上述步骤,可以在键盘弹出时自动调整Dialog的布局,从而避免输入框被遮挡的问题。如果问题依旧没法解决请联系官网客服,官网地址是:https://www.itying.com/category-93-b0.html

回到顶部