HarmonyOS 自定义 Dialog 居于页面底部，弹出的软键盘和 dialog 有很大间隙？

Question

如题：HarmonyOS 自定义 Dialog 居于页面底部，弹出的软键盘和 dialog 有很大间隙？

Answer 1

参考代码：

import window from '@ohos.window'
import { data } from '@kit.TelephonyKit'

@Entry
@Component
export struct LightPublishMine {
  private window?: window.Window
  @State keyboardHeightVp: number = 0
  @State navHeight: number = 0
  @State safeAreaTop: number = 0

  aboutToAppear() {
    window.getLastWindow(getContext(this)).then((win) => {
      this.window = win
      if (this.window) {
        this.navHeight = px2vp(this.window.getWindowAvoidArea(window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR)
          //导航条高度
          .bottomRect.height
        )
        this.safeAreaTop = px2vp(this.window.getWindowAvoidArea(window.AvoidAreaType.TYPE_SYSTEM).topRect.height)
        this.window.on('keyboardHeightChange', (data) => {
          console.info('Succeeded in enabling the listener for keyboard height changes. 键盘 Data: ' + data);
          this.keyboardHeightVp = px2vp(data)
          console.info('Succeeded in enabling the listener for keyboard height changes. Data: ' + (this.keyboardHeightVp - this.navHeight));
          console.info('Succeeded in enabling the listener for keyboard height changes. 导航条Data: ' + this.navHeight);
        });
      }
    })
  }

  aboutToDisappear() {
    if (this.window) {
      this.window.off('keyboardHeightChange')
      this.window = undefined
    }
    this.keyboardHeightVp = 0
  }

  build() {
    Row() {
      Column() {
        TextInput().backgroundColor(Color.White)
        Blank().backgroundColor(Color.Red).height(this.keyboardHeightVp - this.navHeight).width('100%')
      }.width('100%')
    }
    .height('100%')
    .backgroundColor(Color.Green)
    .alignItems(VerticalAlign.Bottom)
    .expandSafeArea([SafeAreaType.KEYBOARD], [SafeAreaEdge.BOTTOM])
  }
}

@Entry
@Component
struct CustomDialogUser {
  dialogController: CustomDialogController = new CustomDialogController({
    builder: CommentInputDialog({}),
    alignment: DialogAlignment.Bottom,
    customStyle: true,
    offset: { dx: 0, dy: 100 }
  })
  build() {
    Column() {
      Button('click me')
        .onClick(() => {
          this.dialogController.open()
        })
    }.width('100%').height('100%').backgroundColor(Color.Red)
  }
}
可以将customStyle设置为true，并且给弹框内部的Column设置偏移.offset({ x: 0, y: 20})

@CustomDialog
export struct CommentInputDialog{
  private statusBarHeight: number = (AppStorage.get('statusBarHeight') as number);
  controller?: CustomDialogController
  private commentContent: string = ''
  onTap: (content: string) => void = () => {
  };

  build() {
    Column(){
      Image($r('app.media.black_close_icon'))
        .width(26)
        .height(26)
        .onClick(() =>{
          this.controller?.close();
        })

      TextArea({ placeholder: '我来说两句...', text: this.commentContent})
        .placeholderColor($r('app.color.color909099'))
        .backgroundColor($r('app.color.colorF7F8F9'))
        .borderRadius(4)
        .placeholderFont({
          size: '17fp',
          family: CommonConstants.SI_YUAN
        })
        .backgroundColor(Color.White)
        .enterKeyType(EnterKeyType.Done)
        .defaultFocus(true)
        .onChange((value) => {
          this.commentContent = value;
        }).margin({top: 10, bottom: 10})
        .layoutWeight(1)

      Text('确认')
        .width(60)
        .height(30)
        .fontColor(Color.White)
        .fontSize('14fp')
        .fontFamily(CommonConstants.SI_YUAN)
        .textAlign(TextAlign.Center)
        .backgroundColor($r('app.color.colorF21333'))
        .borderRadius(15)
        .onClick(() =>{
          this.onTap(this.commentContent)
        })
    }
    .width(CommonConstants.FULL_PERCENT)
    .height(210 + this.statusBarHeight)
    .padding({left: 15, top: 15, right: 15, bottom: 10 + this.statusBarHeight })
    .alignItems(HorizontalAlign.End)
    .backgroundColor($r('app.color.colorF1F2F3'))
    .borderRadius({topLeft: 15, topRight: 15})
    .offset({ x: 0, y: 20}) // 设置偏移
  }
}