HarmonyOS 鸿蒙Next 半模态框动态设置高度，当软键盘弹出时偶尔布局异常

HarmonyOS 鸿蒙Next 半模态框动态设置高度，当软键盘弹出时偶尔布局异常

实现思路：

用半模态实现弹框，根据键盘高度动态计算半模态框的高度，避免键盘弹出顶起半模态框导致内容显示不全。

代码说明：

绿色为bindsheet的配置颜色：

.bindSheet($$this.isShow, this.SubComment(), {
  backgroundColor: Color.Green
})

半模态框结构：

Column() {
  Scroll(this.scroller) {
    Column() {
      Row().backgroundColor(Color.Red)
      Row().backgroundColor(Color.Blue)
      Row().backgroundColor(Color.Yellow)
    }
  }
  .height(`calc(${this.screenHeight}vp - ${this.textHeight}vp - ${this.bottomRectHeight}vp)`)

  TextInput({
    placeholder: '请输入内容'
  })
    .height(this.textHeight)
    .backgroundColor(Color.White)

  Blank()
    .height(this.bottomRectHeight)
}
.width('100%')
.height(this.screenHeight)

完整代码

import { window } from '@kit.ArkUI';

@Component
export struct BindSheetPage {
  @State private isShow: boolean = false
  @State private screenHeight: number = 0
  @State private bottomRectHeight: number = 0
  private textHeight = 50
  private scroller: Scroller = new Scroller()

  aboutToAppear(): void {
    window.getLastWindow(getContext(this)).then(currentWindow => {
      let property = currentWindow.getWindowProperties();
      // 导航条区域的高度
      let avoidIndicatorArea = currentWindow.getWindowAvoidArea(window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR);
      let bottomRectHeight = px2vp(avoidIndicatorArea.bottomRect.height);
      this.bottomRectHeight = bottomRectHeight
      console.log('==== init bottomRectHeight:' + this.bottomRectHeight.toString())
      // 状态栏的高度
      let avoidTopArea = currentWindow.getWindowAvoidArea(window.AvoidAreaType.TYPE_SYSTEM);
      let topRectHeight = avoidTopArea.topRect.height; // 获取状态栏区域高度
      console.log('==== init topRectHeight:' + topRectHeight.toString()) //输出可以看到键盘的高度
      // 键盘的高度
      let avoidKeyboardArea = currentWindow.getWindowAvoidArea(window.AvoidAreaType.TYPE_KEYBOARD);
      // 初始化显示区域高度
      this.screenHeight = px2vp(property.windowRect.height - avoidKeyboardArea.bottomRect.height - topRectHeight);
      console.log('==== init screenHeight:' + this.screenHeight.toString())

      // 监视软键盘的弹出和收起
      currentWindow.on('avoidAreaChange', data => {
        if (data.type !== window.AvoidAreaType.TYPE_KEYBOARD) {
          return;
        }
        const keyboardHeight = data.area.bottomRect.height // 键盘高度
        this.bottomRectHeight = keyboardHeight ? 0 : bottomRectHeight // 键盘抬起时，底部安全区域设为0
        this.screenHeight = px2vp(property.windowRect.height - keyboardHeight - topRectHeight);
        console.log('==== screenHeight:' + this.screenHeight.toString()) //输出可以看到键盘的高度
      })
    })
  }

  @Builder
  SubComment() {
    Column() {
      Scroll(this.scroller) {
        Column() {
          Row() {
            Text('1').fontColor(Color.White)
          }
          .width('100%')
          .height(300)
          .backgroundColor(Color.Red)

          Row() {
            Text('2').fontColor(Color.White)
          }
          .width('100%')
          .height(300)
          .backgroundColor(Color.Blue)

          Row() {
            Text('3').fontColor(Color.White)
          }
          .width('100%')
          .height(300)
          .backgroundColor(Color.Yellow)
        }
      }
      .height(`calc(${this.screenHeight}vp - ${this.textHeight}vp - ${this.bottomRectHeight}vp)`)
      .width('100%')

      TextInput({
        placeholder: '请输入内容'
      })
        .width('100%')
        .height(this.textHeight)
        .backgroundColor(Color.White)

      Blank()
        .width('100%')
        .height(this.bottomRectHeight)
    }
    .width('100%')
    .height(this.screenHeight)
  }

  build() {
    Column() {
      Button('打开bindSheet')
        .onClick(() => {
          this.isShow = true
        })
        .bindSheet($$this.isShow, this.SubComment(), {
          height: '100%',
          backgroundColor: Color.Green
        })
    }
    .justifyContent(FlexAlign.Center)
    .height('100%')
    .width('100%')
    .backgroundColor($r('app.color.contact_background'))
  }
}