HarmonyOS H5页面中调用系统键盘，会把页面往上顶

可以对不想要受影响的组件添加安全区域.expandSafeArea([SafeAreaType.KEYBOARD],[ SafeAreaEdge.BOTTOM])。

参考链接：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-universal-attributes-expand-safe-area-V5

参考demo：

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.
98.
99.
100.
101.