HarmonyOS webview键盘适配方案？

Question

在全屏的webview页面中，如何处理软件盘遮挡输入框的问题。

Answer 1

参考demo如下：

import { KeyboardAvoidMode, window } from '@kit.ArkUI';
import { webview } from '@kit.ArkWeb';

@Entry
@Component
struct Index {
  controller: webview.WebviewController = new webview.WebviewController
  windowStage: window.WindowStage | undefined = undefined
  private sysTemHeight: number = AppStorage.get<number>('systemHeight') || 0
  private navigationHeight: number = AppStorage.get<number>('navigationHeight') || 0
  @State keyHeight: number = 0;

  aboutToAppear() {
    webview.WebviewController.setWebDebuggingAccess(true)
    window.getLastWindow(getContext(this)).then(currentWindow => {
      // 监视软键盘的弹出和收起
      currentWindow.on('avoidAreaChange', async data => {
        if (data.type == window.AvoidAreaType.TYPE_KEYBOARD) {
          this.keyHeight = px2vp(data.area.bottomRect.height);
          return;
        }
      });
    })
  }

  build() {
    Column() {
      Row() {
        Text('取消')
          .fontSize(16)
          .fontColor('#3e3c3d')
          .onClick(() => {
          })
        Button('发布')
          .fontColor('#ffffff')
          .backgroundColor('#ab1d22')
          .borderRadius(14)
          .height(28)
          .width(52)
      }
      .padding({ left: 16, right: 16 })
      .justifyContent(FlexAlign.SpaceBetween)
      .width('100%')
      .alignItems(VerticalAlign.Center)
      .height(44)

      Web({ controller: this.controller, src: 'xxxx' })
        .javaScriptAccess(true)
        .fileAccess(false)
        .zoomAccess(false)
        .domStorageAccess(true)
        .onlineImageAccess(true)
        .horizontalScrollBarAccess(false)
        .verticalScrollBarAccess(false)
        .cacheMode(CacheMode.Online)
        .width('100%')
        .layoutWeight(1)

      Column() {
        Row() {
        }.height(20)
      }
      .width('100%')
      .justifyContent(FlexAlign.Start)
    }
    .padding({
      top: this.sysTemHeight,
      bottom: this.keyHeight > 0 ? 0 : this.navigationHeight
    })
    .backgroundColor(Color.White)
    // 设置顶部绘制延伸到状态栏
    .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP])
    .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.BOTTOM])
    .height('100%')
    .width('100%')
  }

  onPageShow(): void {
    this.windowStage = AppStorage.get('windowStage') as window.WindowStage //获取windowStage
    this.windowStage?.getMainWindowSync().getUIContext().setKeyboardAvoidMode(KeyboardAvoidMode.RESIZE)
  }

  onPageHide(): void {
    this.windowStage?.getMainWindowSync().getUIContext().setKeyboardAvoidMode(KeyboardAvoidMode.OFFSET)
  }
}

设置全屏：

AppStorage.setOrCreate('windowStage', windowStage); //保存windowStage
let windowClass: window.Window = windowStage.getMainWindowSync(); // 获取应用主窗口
// 1. 设置窗口全屏
let isLayoutFullScreen = true;
windowClass.setWindowLayoutFullScreen(isLayoutFullScreen)
  .then(() => {
    console.info('Succeeded in setting the window layout to full-screen mode.');
  })
  .catch((err: BusinessError) => {
    console.error('Failed to set the window layout to full-screen mode. Cause:' + JSON.stringify(err));
  });