HarmonyOS如何避免键盘弹出对H5页面布局的影响？

import window from '@ohos.window';  
@Entry  
@Component  
struct ScrollExample {  
  scroller: Scroller = new Scroller()  
  private arr: number[] = [0, 1, 2, 3, 4, 5]  
  controller: TextInputController = new TextInputController()  
  @State flag: boolean = false;  
  @State TextTest: string = ''  
  @State TextTest1: string = ''  
  @State screenHeight: number = 0;  
  aboutToAppear() {  
    window.getLastWindow(getContext(this)).then(currentWindow => {  
      let property = currentWindow.getWindowProperties();  
      let avoidArea = currentWindow.getWindowAvoidArea(window.AvoidAreaType.TYPE_KEYBOARD);  
      // 初始化显示区域高度  
      this.screenHeight = px2vp(property.windowRect.height - avoidArea.bottomRect.height);  
      // 监视软键盘的弹出和收起  
      currentWindow.on('avoidAreaChange', async data => {  
        // 获取窗口内容规避的区域,如系统栏区域、刘海屏区域、手势区域、软键盘区域等  
        if (data.type !== window.AvoidAreaType.TYPE_KEYBOARD) {  
          return;  
        }  
        // 由于aboutToAppear该生命周期在build函数之前就执行了，所以只设置一个Text文本的话会有一个bug，即键盘收起后，文本顶起的区域并不会收回，影响用户体验，因此这里就用了两个文本来实现效果  
        this.TextTest = (this.TextTest == '') ? '1' : ''  
        if (this.TextTest1 == '1') {  
          this.TextTest1 = ''  
        }  
        console.log(this.TextTest, 666)  
        this.screenHeight = px2vp(property.windowRect.height - data.area.bottomRect.height);  
      })  
    })  
  }  
  build() {  
    // 使用Stack容器来实现Navigation导航栏的固定  
    Stack({ alignContent: Alignment.TopStart }) {  
      Scroll(this.scroller) {  
        Column() {  
          ForEach(this.arr, (item: number) => {  
            Text(item.toString())  
              .width('90%')  
              .height(150)  
              .backgroundColor(0xFFFFFF)  
              .borderRadius(15)  
              .fontSize(16)  
              .textAlign(TextAlign.Center)  
              .margin({ top: 10 })  
          }, (item: number) => item.toString())  
          TextInput({ placeholder: 'search...', controller: this.controller })// 默认设置当前组件不能获焦  
            .focusable(this.flag)  
            .width('90%')  
            .height(40)  
            .backgroundColor('#FFFFFF')  
            .margin({ top: 8, bottom: 20 })// 设置点击事件重新获取焦点  
            .onClick(() => {  
              this.flag = true  
              this.TextTest1 = '1'  
            })  
          // 给键盘空出的高度，内容不为空时会顶起页面的底部内容显示  
          Text(this.TextTest)  
            .lineHeight(300)  
            .fontColor('#DCDCDC')  
          Text(this.TextTest1)  
            .lineHeight(300)  
            .fontColor('#DCDCDC')  
        }.width('100%')  
      }  
      // 上间距根据导航栏高度来设置  
      .margin({ top: 110 })  
      .scrollable(ScrollDirection.Vertical)  
      .scrollBar(BarState.On)  
      .scrollBarColor(Color.Gray)  
      .scrollBarWidth(0)  
      .onScroll((xOffset: number, yOffset: number) => {  
        console.info(xOffset + ' ' + yOffset)  
      })  
      // Stack容器内的第二个子组件，Navigation会覆盖Scroll容器  
      Navigation() {  
      }  
      .title('导航栏标题')  
      .backgroundColor(Color.Yellow)  
      .height(110)  
      .titleMode(NavigationTitleMode.Full)  
      .hideTitleBar(false)  
      .hideToolBar(false)  
      // 这里的按钮是初步思想，由于没有找到监听键盘收起的事件，因此在键盘弹出时可以点击按钮，失去焦点的同时设置文本内容为空，但考虑到用户不会通过别的方式来收起键盘，因此这种方式就摒弃了，思路可供参考。  
      Button('键盘收起')  
        .onClick(() => {  
          this.TextTest1 = ''  
          this.flag = false  
        })  
        .margin({ top: 10, left: 20 })  
    }.width('100%').height('100%').backgroundColor(0xDCDCDC)  
    // 设置屏幕的安全区域  
    .expandSafeArea([SafeAreaType.KEYBOARD])  
  }  
}
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.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.