键盘拉起时如何禁止页面自动上移？

Question

键盘拉起时如何禁止页面自动上移，输入框在一个自定义弹窗内，点击后弹窗会自动上移，希望可以禁止这个自动上移的动作。

@Component
export struct DemoPage {
  customDialogController = new CustomDialogController({
    builder: CustomFilterDialog()，
    alignment: DialogAlignment.Top，
    customStyle: true，
    offset: { dx: 0， dy: 177 }，
  })

  build() {
    Column() {
      Button('打开弹窗')
        .onClick(() => {
          this.customDialogController.open()
        })
    }
    .width('100%')
    .height('100%')
    .alignItems(HorizontalAlign.Center)
    .justifyContent(FlexAlign.Center)
  }
}

@CustomDialog
export struct CustomFilterDialog {
  customDialogController: CustomDialogController

  // 渲染价格区间输入
  @Builder
  renderPriceRangeInput() {
    Column() {
      Row() {
        Text('价格区间')
          .fontSize(14)
          .fontWeight(500)
          .lineHeight(20)
          .fontColor('rgba(0， 0， 0， 0.80)')
      }
      .width('100%')

      Row() {
        TextInput({ placeholder: '最低价' })
          .height(40)
          .borderRadius(6)
          .textAlign(TextAlign.Center)
          .layoutWeight(1)
          .type(InputType.Number)

        Divider().width(14).height(1).color('#333333').margin({ left: 12， right: 12 })

        TextInput({ placeholder: '最高价' })
          .height(40)
          .width(150)
          .borderRadius(6)
          .textAlign(TextAlign.Center)
          .layoutWeight(1)
          .type(InputType.Number)
      }
      .margin({ top: 12 })
      .expandSafeArea([SafeAreaType.KEYBOARD])
    }
    .margin({ bottom: 12 })
  }

  // 渲染底部操作栏
  @Builder
  renderDialogFooter() {
    Row() {
      Button('重置')
        .margin({ right: 12 })
        .layoutWeight(1)
        .height(40)
        .backgroundColor(Color.White)
        .border({
          width: 0.5，
          color: 'rgba(0， 0， 0， 0.20)'
        })
        .fontColor('rgba(0， 0， 0， 0.80)')
        .fontSize(16)
        .fontWeight(500)

      Button('查看800+商品')
        .layoutWeight(1)
        .height(40)
        .backgroundColor('#ff2442')
        .fontColor(Color.White)
        .fontSize(16)
        .fontWeight(500)
    }
    .width('100%')
    .height(64)
    .padding({ left: 16， right: 16， top: 12， bottom: 12 })
  }

  build() {
    Column() {
      // 筛选项展示
      Scroll() {
        Column() {
          this.renderPriceRangeInput()
        }
        .width('100%')
        .padding({ top: 12， left: 16， right: 16 })
        .justifyContent(FlexAlign.Start)
      }
      .layoutWeight(1)

      Divider().width('100%').height(0.5).color('rgba(0， 0， 0， 0.08)')

      // 底部操作
      this.renderDialogFooter()
    }
    .width('100%')
    .height(434)
    .backgroundColor(Color.White)
  }
}

Answer 1

弹框的规格是完全避让输入法，并且自定义弹框只适用于提示作用，不能用来做为页面使用的。https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V1/ts-methods-custom-dialog-box-0000001580345722-V1

自定义弹窗官网已明确说明：自定义弹窗仅适用于简单提示场景，不能替代页面使用。由于弹窗存在完全避让输入法行为，即在软键盘弹出时，会自动向上抬起软键盘高度，因此如果弹窗高度过大时，可能会导致部分区域不可见。