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

HarmonyOS
2024-12-18 14:27:23
浏览
收藏 0
回答 1
回答 1
按赞同
/
按时间
shlp

参考代码:

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])
  }
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.
@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}) // 设置偏移
  }
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.
  • 52.
  • 53.
  • 54.
  • 55.
  • 56.
  • 57.
  • 58.
  • 59.
  • 60.
  • 61.
  • 62.
  • 63.
  • 64.
  • 65.
  • 66.
  • 67.
  • 68.
  • 69.
  • 70.
  • 71.
  • 72.
  • 73.
  • 74.
  • 75.
分享
微博
QQ
微信
回复
2024-12-18 17:16:35
相关问题
HarmonyOS dialog软键盘
695浏览 • 1回复 待解决
鸿蒙软键盘弹出后,页面底部按钮
4918浏览 • 0回复 待解决
软键盘弹出时,页面的自适应
2302浏览 • 1回复 待解决
HarmonyOS 弹出软键盘时,web页面白屏
810浏览 • 1回复 待解决
HarmonyOS 自定义全屏dialog
913浏览 • 1回复 待解决
HarmonyOS 自定义全局dialog
721浏览 • 1回复 待解决
HarmonyOS 自定义Dialog宽度
865浏览 • 1回复 待解决
HarmonyOS是否弹出隐藏软键盘api
650浏览 • 1回复 待解决
HarmonyOS 软键盘弹出方式
869浏览 • 1回复 待解决
HarmonyOS 如何监听软键盘弹出
892浏览 • 1回复 待解决