HarmonyOS 鸿蒙Next 自定义弹框软键盘覆盖内容区域设置方法 HarmonyOS 鸿蒙Next下用customdialog弹出自定义弹框,内容靠底部显示,自定布局含文本输入框。点击文本输入框弹出软键盘时,如何让软键盘覆盖内容区域而非上顶?目标:设置软键盘不顶起内容区域。

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

HarmonyOS 鸿蒙Next 自定义弹框软键盘覆盖内容区域设置方法
HarmonyOS 鸿蒙Next下用customdialog弹出自定义弹框,内容靠底部显示,自定布局含文本输入框。点击文本输入框弹出软键盘时,如何让软键盘覆盖内容区域而非上顶?目标:设置软键盘不顶起内容区域。 用customdiloag弹出了个自定义弹框,内容靠底部显示,自定布局中文本输入框,点击文本输入框弹出软键盘,软键盘会把底部的内容区域网上上面顶。 目标:如何设置软键盘不把内容区域往上面顶,让软键盘覆盖在内容区域之上

2 回复
设置安全区域.expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM]);

参考链接:[https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-universal-attributes-expand-safe-area-V5](https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-universal-attributes-expand-safe-area-V5)

全模态内的输入框上抬需要自己做,可以通过这个接口获取到键盘的高度来避让

参考链接:[https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V13/js-apis-inputmethod-V13](https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V13/js-apis-inputmethod-V13)

关于类似验证码数字输入框,请参考以下代码示例:

```javascript
//验证码输入框
interface codeOne {
  str: string,
  isBorder: boolean
}
[@Component](/user/Component)
export struct TextInputCodeView {
  // 验证码
  [@State](/user/State) code: string = ''
  // 验证码位数
  [@Prop](/user/Prop)
  someArrayLength: number = 4
  someArray: number[] = []

  aboutToAppear(): void {
    this.someArray = Array.from({length: this.someArrayLength})
  }

  build() {
    Stack() {
      Row() {
        ForEach(this.someArray, (item: number,index:number) => {
          //加间隙
          if (index != 0) {
            Blank()
          }
          //index + 1 :表示输入框的位置。
          //填写验证码
          if (this.code.length >= index + 1 ) {
            this.OneText({ str:this.code.substring(index, index + 1), isBorder: index + 1 === this.someArray.length})
          } else {
            //没有验证码
            this.OneText({
              str:'',
              isBorder: this.code.length + 1 === index + 1
            })
          }
        }, (item: number ,index: number) => JSON.stringify(index + 1)) //键值标识
      }
      .width('100%')
      TextInput({ placeholder:""})
      .width('100%')
      .height('100%')
      .maxLength(this.someArray.length)
      .caretColor(Color.Transparent)
      .fontColor(Color.Transparent)
      .borderColor(Color.Transparent)
      .backgroundColor(Color.Transparent)
      .onChange((value: string) => {
        this.code = value
      })
      .onSubmit(async () => {
        //回车事件
      })
    }
    .width('100%')
    .height(60)
  }

  //参数:验证码内容,是否显示边框
  [@Builder](/user/Builder) OneText(item:codeOne) {
    //判断,是否选中当前的输入框,是否有内容 。是当前选中的,没有内容,显示 |
    Text(item.isBorder && !item.str ? '|' : item.str as string)
    .width(50)
    .height(50)
    .textAlign(TextAlign.Center)
    .fontSize(20)
    .fontColor(item.isBorder && !item.str ?'#ffdd4f46' : Color.Black)
    .backgroundColor('#f3f4f6')
    .borderRadius(8)
  }
}

更多关于HarmonyOS 鸿蒙Next 自定义弹框软键盘覆盖内容区域设置方法 HarmonyOS 鸿蒙Next下用customdialog弹出自定义弹框,内容靠底部显示,自定布局含文本输入框。点击文本输入框弹出软键盘时,如何让软键盘覆盖内容区域而非上顶?目标:设置软键盘不顶起内容区域。的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS 鸿蒙Next中,当你使用CustomDialog弹出自定义弹框,并且希望软键盘弹出时不顶起内容区域,而是覆盖内容区域,可以通过调整窗口属性来实现。

具体步骤如下:

  1. 设置Dialog窗口属性:在创建或显示CustomDialog之前,可以通过WindowManager.LayoutParams设置窗口属性,确保软键盘弹出时不改变内容区域的位置。

  2. 调整软输入模式:在Dialog的Window中设置软输入模式为SOFT_INPUT_ADJUST_NOTHING,这样软键盘弹出时不会调整窗口布局。

示例代码:

CustomDialog dialog = new CustomDialog(context);
// 设置Dialog布局等属性...

Window dialogWindow = dialog.getWindow();
if (dialogWindow != null) {
    WindowManager.LayoutParams layoutParams = dialogWindow.getAttributes();
    layoutParams.softInputMode = WindowManager.LayoutParams.SOFT_INPUT_ADJUST_NOTHING;
    dialogWindow.setAttributes(layoutParams);
}

dialog.show();

注意,这里的代码示例是为了说明思路,实际在HarmonyOS中可能需要使用对应的API或类来实现,具体请参考HarmonyOS的官方文档和API。

如果问题依旧没法解决请联系官网客服,官网地址是

回到顶部