HarmonyOS鸿蒙Next中CustomDialogController如何设置键盘避让区？

HarmonyOS鸿蒙Next中CustomDialogController如何设置键盘避让区？ 代码如下，请问当打开弹窗时，点击弹窗中的输入框调起键盘，如何让键盘上方的避让区域高度为0

@Entry
@Component
struct Index {
  conditionsDialog: CustomDialogController = new CustomDialogController({
    builder: ConditionsDialog(),
    alignment: DialogAlignment.Bottom,
    autoCancel: true,
    customStyle: true,
  })

  build() {
    Column() {

    }.width('100%').height('100%').backgroundColor('#ff5500').onClick(() => {
      this.conditionsDialog.open()
    })
  }
}

@CustomDialog
export struct ConditionsDialog {
  dialog: CustomDialogController

  build() {
    Column() {
      TextInput().width('100%').margin({ top: 100 })
    }.width('100%').height('90%').backgroundColor('#c0c0c0')
  }
}

cke_2539.png


更多关于HarmonyOS鸿蒙Next中CustomDialogController如何设置键盘避让区？的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

弹窗高度不可以写成百分比，需要固定高度

import { LengthMetrics } from '@kit.ArkUI'

@Entry
@Component
struct CustomRadioPage {
  conditionsDialog: CustomDialogController = new CustomDialogController({
    builder: ConditionsDialog(),
    alignment: DialogAlignment.Bottom,
    autoCancel: true,
    customStyle: true,
    keyboardAvoidMode: KeyboardAvoidMode.DEFAULT, // TODO 配置键盘弹出时页面的避让模式
    keyboardAvoidDistance: LengthMetrics.vp(0) // TODO 弹窗避让键盘后，和键盘之间距离
  })

  build() {
    Column({ space: 20 }) {
      // 自定义弹窗避让键盘的安全区域高度
      Text() {
        Span('\n' + '点击调出弹窗，验证弹出键盘时，键盘上方安全区域是否展示正确')
      }.fontSize(18).margin({ top: 50 }).onClick(() => {
        this.conditionsDialog.open()
      })
    }
  }
}

@CustomDialog
export struct ConditionsDialog {
  dialog: CustomDialogController

  build() {
    Column() {
      TextInput().width('100%')
    }
    .width('100%')
    .height(500)
    // .height('90%') // TODO 重点: 弹窗的高度不可以写成百分数，会影响弹出键盘时的避让区域高度
    .backgroundColor('#ff5500')
  }
}

更多关于HarmonyOS鸿蒙Next中CustomDialogController如何设置键盘避让区？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


弹窗高度不可以写成百分比，需要固定高度

在HarmonyOS Next中，CustomDialogController通过设置键盘避让模式实现避让。使用setKeyboardAvoidMode()方法，参数可选AVOID_MODE_DEFAULT、AVOID_MODE_OFF或AVOID_MODE_SPECIFIED。若选择AVOID_MODE_SPECIFIED，需配合setKeyboardAvoidArea()指定避让区域。区域通过Rect对象定义，系统将自动调整对话框位置避免键盘遮挡。

在HarmonyOS Next中，可以通过设置CustomDialog的avoidance属性来控制键盘避让区域。要完全移除避让区域，可以在CustomDialog的build方法中添加avoidance属性并设置为AvoidanceArea.NONE：

@CustomDialog
export struct ConditionsDialog {
  dialog: CustomDialogController

  build() {
    Column() {
      TextInput().width('100%').margin({ top: 100 })
    }
    .width('100%')
    .height('90%')
    .backgroundColor('#c0c0c0')
    .avoidance(AvoidanceArea.NONE)
  }
}

这样设置后，当键盘弹出时，弹窗不会自动调整位置，键盘上方的避让区域高度将为0。需要注意的是，这可能导致输入框被键盘遮挡，需要自行处理布局适配。

另外，也可以考虑使用AvoidanceArea.DEFAULT来保持默认避让行为，或者通过调整弹窗的alignment和尺寸来优化用户体验。

回到顶部