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

Question

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

本文参与了 【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。

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}) // 设置偏移 
  } 
}