HarmonyOS 自定义Dialog中使用TextArea点击显示键盘后会出现20像素的间距,怎么消除这个20像素的区域

HarmonyOS
2025-01-09 17:22:45
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
aquaa

可以监听键盘的出现让弹窗偏移,参考示例:

import { window } from '@kit.ArkUI'

@Preview
@CustomDialog
export struct CommentsEditDialog {
  controller: CustomDialogController
  @State comment: string = ''
  tController: TextAreaController = new TextAreaController()
  @State keyHeight: number = 0;
  @State scrollHeight: number = 0;
  @State dialogIsShow: boolean = true
  aboutToAppear(): void {
    window.getLastWindow(getContext(this)).then(currentWindow => {
      // 设置窗口的布局为沉浸式布局
      // currentWindow.setWindowLayoutFullScreen(true);
      // 监听软键盘的隐藏和显示
      currentWindow.on('avoidAreaChange', data => {
        if (data.type == window.AvoidAreaType.TYPE_KEYBOARD) {
          if (px2vp(data.area.bottomRect.height) == 0) {
            this.keyHeight = 0
          } else {
            this.keyHeight = 20;
          }
          return;
        }
      })
    })
  }

  build() {
    this.CommentsEditBuilder()
  }

  @Builder
  CommentsEditBuilder() {

    Column() {
      TextArea({ controller: this.tController, placeholder: '说点什么吧...', text: this.comment })
        .fontColor('#313234')
        .placeholderColor('#A2A7B1')
        .fontSize(14)
        .width('100%')
        .caretColor(Color.Red)
        .padding(10)
        .height(88)
        .backgroundColor('#F3F3F3')
        .borderRadius(5)
        .defaultFocus(true)// 页面首次打开时,该TextInput获取焦点
        .enableKeyboardOnFocus(true)// .expandSafeArea([SafeAreaType.KEYBOARD])
        .id('mTextAreaId')

        .onVisibleAreaChange([0.0, 1.0], (isVisible: boolean, currentRatio: number) => {
          if (isVisible && currentRatio == 1) {
            focusControl.requestFocus('mTextAreaId')
          }
        })
        .fontWeight(FontWeight.Regular)
        .maxLength(100)
        .showCounter(false)
        .onChange((value: string) => {
          this.comment = value
        })

      Blank().height(10)
      Row() {
        Blank().width(6)
        Text(`${this.comment?.length ?? 0}/100`).fontSize(10).fontColor('#313234').fontWeight(FontWeight.Regular)
        Blank()
        Text('发送')
          .width(53)
          .height(21)
          .padding(0)
          .textAlign(TextAlign.Center)
          .fontColor(Color.White)
          .backgroundColor((this.comment?.length == 0) ? '#7fE91839' : '#E91839')
          .fontSize(11)
          .borderRadius(4)
          .fontWeight(FontWeight.Medium)
          .onClick(() => {
          })
        Blank().width(6)
      }.width('100%')
    }
    .expandSafeArea([SafeAreaType.SYSTEM])
    .backgroundColor(Color.White)
    .width('100%')
    .height('20%')
    .borderRadius(10)
    .padding(14)
    // .offset({y:20})
    .transition(TransitionEffect.OPACITY.animation({ duration: 300, curve: Curve.Ease })
      .combine(TransitionEffect.translate({ y: 1000 })))
    .offset({ x: 0, y: this.keyHeight })
  }

  closeDialog() {
    this.dialogIsShow = false
    if (this.controller != null) {
      this.controller.close()
    }
  }
}
分享
微博
QQ
微信
回复
2025-01-09 18:50:48
相关问题
HarmonyOS 自定义Dialog显示问题
874浏览 • 1回复 待解决
鸿蒙怎么实现自定义布局Dialog
9633浏览 • 2回复 已解决
HarmonyOS 使用自定义相机左边有间距
457浏览 • 1回复 待解决
HarmonyOS 如何在class中显示自定义dialog
266浏览 • 1回复 待解决
HarmonyOS 是否有像素单位相关资料
411浏览 • 1回复 待解决
HarmonyOS 自定义全局dialog
313浏览 • 1回复 待解决