HarmonyOS鸿蒙Next中如何实现弹窗和软键盘的避让

HarmonyOS鸿蒙Next中如何实现弹窗和软键盘的避让 组件设置expandSafeArea属性可以控制组件扩展其安全区域，实现键盘避让，键盘拉起时布局不发生改变。参考代码如下：

@Entry
@Component
struct AvoidDialogPage {
  @State message: string = 'Open pop up window';
  dialogController: CustomDialogController = new CustomDialogController({
    builder: CustomDialogExample()
  })


  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
          .onClick(() => {
            this.dialogController.open();
          })
      }
      .width('100%')
    }
    .height('100%')
  }
}


@CustomDialog
struct CustomDialogExample {
  controller: CustomDialogController = new CustomDialogController({
    builder: CustomDialogExample({})
  })


  build() {
    Column() {
      TextInput({})
        .fontSize(20)
        .margin({ top: 10, bottom: 10 })
        .expandSafeArea([SafeAreaType.KEYBOARD, SafeAreaType.SYSTEM])
        .borderWidth(0.5)
        .borderRadius(4)
        .height(40)
        .defaultFocus(true)
        .margin({
          top: 30,
          left: 16,
          right: 16,
          bottom: 30
        })
    }
  }
}

更多关于HarmonyOS鸿蒙Next中如何实现弹窗和软键盘的避让的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

感谢分享，设置软键盘避让模式这篇文章里也有关于避让软键盘的方式，可以参考

更多关于HarmonyOS鸿蒙Next中如何实现弹窗和软键盘的避让的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS Next中，可通过bindComponentCover绑定弹窗组件，使用avoidKeyboard属性实现软键盘避让。该属性设置为true时，弹窗会自动上移避开键盘区域。同时，利用onKeyboardHeightChange回调监听键盘高度变化，动态调整弹窗位置。

在HarmonyOS Next中，实现弹窗内输入框与软键盘的避让，关键在于正确使用 expandSafeArea 属性。你提供的代码示例方向正确，但存在一个关键问题和一个优化点。

1. 关键问题：Dialog结构内的Controller引用 在你的 CustomDialogExample 结构中，controller 属性指向了自身，这会导致循环引用和逻辑错误。弹窗组件（被 @CustomDialog 装饰的结构）通常不需要自己持有 CustomDialogController，控制器应由调用方（即 AvoidDialogPage）创建和管理。因此，应删除 CustomDialogExample 结构内的 controller 定义。

2. 核心机制：expandSafeArea属性 你代码中的 .expandSafeArea([SafeAreaType.KEYBOARD, SafeAreaType.SYSTEM]) 是实现避让的核心。

  • 作用：此方法将组件的安全区域扩展到避开系统栏（如状态栏、导航栏）和软键盘。当键盘弹出时，系统会重新计算并应用扩展后的安全区域，确保 TextInput 组件始终位于可视区域内，而不是被键盘遮挡。
  • 参数：SafeAreaType.KEYBOARD 用于避让键盘；SafeAreaType.SYSTEM 用于避让系统栏。两者通常结合使用。

3. 修正后的弹窗组件示例：

@CustomDialog
struct CustomDialogExample {
  // 移除了内部的controller定义

  build() {
    Column() {
      TextInput({})
        .fontSize(20)
        .margin({ top: 10, bottom: 10 })
        // 应用安全区域扩展，避让键盘和系统栏
        .expandSafeArea([SafeAreaType.KEYBOARD, SafeAreaType.SYSTEM])
        .borderWidth(0.5)
        .borderRadius(4)
        .height(40)
        .defaultFocus(true) // 设置默认焦点，键盘会自动拉起
        .margin({
          top: 30,
          left: 16,
          right: 16,
          bottom: 30
        })
    }
  }
}

总结： 实现弹窗中键盘避让的步骤是：

  1. 在弹窗组件（@CustomDialog）的输入组件（如 TextInput）上调用 .expandSafeArea([SafeAreaType.KEYBOARD, SafeAreaType.SYSTEM])。
  2. 确保弹窗组件结构简洁，无需内部管理控制器。
  3. 调用方（页面）通过 CustomDialogController 的 open() 方法打开弹窗。

这样，当弹窗中的输入框获得焦点时，软键盘弹出，输入框会自动调整位置以确保可见，实现平滑的避让效果。

回到顶部