如何解决Web页面输入框拉起键盘后，页面头部被截断的问题

// 子窗口页面布局 
import { webview } from '@kit.ArkWeb'; 
import { window } from '@kit.ArkUI'; 
 
@Entry 
@Component 
export struct SubWindowPage { 
  @State webViewVisibility: Visibility = Visibility.Visible; 
  private pageWidth = 320; 
  private pageHeight = 500; 
  private controller: webview.WebviewController = new webview.WebviewController(); 
  @State flexAlign: FlexAlign = FlexAlign.Center; 
  @State screenHeight: number | string = '100%'; 
 
  aboutToAppear() { 
    window.getLastWindow(getContext(this)).then(currentWindow => { 
      // 监视软键盘的弹出和收起 
      currentWindow.on('avoidAreaChange', async data => { 
        let property = currentWindow.getWindowProperties(); 
        let avoidArea = currentWindow.getWindowAvoidArea(window.AvoidAreaType.TYPE_KEYBOARD); 
        this.screenHeight = px2vp(property.windowRect.height - avoidArea.bottomRect.height); 
      }); 
    }) 
  } 
 
  build() { 
    Stack() { 
      Column() { 
        Web({ src: $rawfile('index.html'), controller: this.controller }) 
          .javaScriptAccess(true) 
          .fileAccess(false) 
          .zoomAccess(false) 
          .domStorageAccess(true) 
          .onlineImageAccess(true) 
          .horizontalScrollBarAccess(false) 
          .verticalScrollBarAccess(false) 
          .cacheMode(CacheMode.Online) 
          .width(this.pageWidth) 
          .height(this.pageHeight) 
          .border({ radius: 6 }) 
          .visibility(this.webViewVisibility) 
          .backgroundColor(Color.Pink) 
      } 
      .justifyContent(this.flexAlign) 
      .alignItems(HorizontalAlign.Center) 
      .width('100%') 
      .height('100%') 
    } 
    .width('100%') 
    .height(this.screenHeight) 
    .backgroundColor('#999955') 
    .alignContent(Alignment.Center) 
  } 
}
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.