HarmonyOS 鸿蒙Next中弹窗与键盘拉起之间存在间隙

HarmonyOS 鸿蒙Next中弹窗与键盘拉起之间存在间隙 cke_214.png

(1)如上图,这是我开发时候做的一个弹窗 从底部弹出

(2)在点击输入框TextArea组件时会调起拉起键盘,拉起键盘后会将弹窗向上推动,但是发现拉起键盘与弹窗之间存在一些间隙,影响美观,现在想去掉这个间隙

提问:(1)为什么他会自动帮我把弹窗向上弹起

(2)如何消除其中存在的间隙

(3)麻烦提供一下相关文档链接

弹窗使用了第三方代码库+自定义弹窗

import { DialogHelper } from '@pura/harmony-dialog';
import { AddPointDialogOptions } from './AddPointDialogOption';
import { CommentDialogOptions } from './CommentDialogOptions';
import toast from '../utils/Toast';

@Builder
export function CommentDialogBuilder(options: CommentDialogOptions) {
  CommentDialogLayout({ options: options })
}

let inputText: string = ''

/**
 * 自定义AddPointLayout组件
 */
@Preview
@ComponentV2
export struct CommentDialogLayout {
  @Require @Param options: CommentDialogOptions

  aboutToAppear(): void {

  }

  build() {
    Column() {
      TextArea({ text: inputText, placeholder: this.options.placeholder })
        .placeholderColor('#A5A5A5')
        .fontColor('#232323')
        .fontSize(14)
        .width('100%')
        .borderRadius(6)
        .borderWidth(1)
        .textAlign(TextAlign.Start)
        .constraintSize({
          minHeight: 64,
        })
        .onChange((value: string) => {
          inputText = value
        })
        .borderColor('#F2F2F2')
        .padding({
          left: 14,
          right: 14,
          top: 10,
          bottom: 10
        })

      Row() {
        Stack().layoutWeight(1)

        Text('发送')
          .borderRadius(14)
          .backgroundColor('#F25B49')
          .fontSize(12)
          .fontColor(Color.White)
          .margin({ top: 14 })
          .padding({
            left: 14,
            right: 14,
            top: 5,
            bottom: 5
          })
          .onClick(() => {
            if (inputText.length > 0) {
              this.options.sendMsg(inputText)
              inputText = ''
              DialogHelper.closeDialog(this.options.dialogId)
            } else {
              toast.show('评论内容不得为空')
            }
          })
      }
    }.backgroundColor(Color.White)
    .padding({
      left: 14,
      right: 17,
      top: 18,
      bottom: 21
    })
  }
}

更多关于HarmonyOS 鸿蒙Next中弹窗与键盘拉起之间存在间隙的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

1.自动弹起是因为键盘避让机制

windowStage.getMainWindowSync().getUIContext().setKeyboardAvoidMode(KeyboardAvoidMode.OFFSET) //系统默认就是内容向上滚动

自定义弹窗键盘避让问题-行业常见问题-新闻阅读类行业实践-行业实践 - 华为HarmonyOS开发者

2.间隙应该是弹窗有margin之类的间隔,尝试找一找

不让弹窗触发键盘避让可以配置

Row(){ ... }.expandSafeArea([SafeAreaType.KEYBOARD])

更多关于HarmonyOS 鸿蒙Next中弹窗与键盘拉起之间存在间隙的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS Next中,弹窗与键盘拉起之间的间隙通常是由于布局计算或动画时序问题导致。该问题可能涉及系统UI组件的默认行为,例如弹窗组件未完全适配软键盘弹出时的动态布局调整。可通过调整弹窗组件的布局参数或监听键盘状态变化来优化显示同步,减少视觉间隙。

弹窗自动上推是HarmonyOS Next的默认行为,当键盘弹出时,系统会自动调整界面布局以避免输入框被遮挡。这是通过系统的软键盘自适应机制实现的,确保用户输入内容可见。

消除间隙可以通过以下方式调整:

  • 使用 alignContentalignItems 属性确保弹窗与键盘边缘对齐。
  • 检查弹窗组件的布局约束,确认是否存在额外的 marginpadding,尤其是在底部区域。
  • 考虑使用 position 属性固定弹窗位置,或通过监听键盘高度动态调整弹窗的 offset

相关文档可参考:

建议检查第三方弹窗库是否覆盖了默认的键盘响应行为,并确认布局参数是否正确配置。

回到顶部