在HarmonyOS NEXT开发中希望监听键盘高度，在键盘弹出后组件上移，键盘收起后组件恢复，并且可以自行控制避让高度？

Question

在HarmonyOS NEXT开发中希望监听键盘高度，在键盘弹出后组件上移，键盘收起后组件恢复，并且可以自行控制避让高度？

Answer 1

你可参考如下示例：

//WebViewComponent.ets 
import { IAdjustOffsetParams } from '../viewmodel/IAdjustOffsetParams' 
// WebViewNode.ets 
import web_webview from '@ohos.web.webview' 
import { UIContext } from '@ohos.ArkUI.UIContext' 
import { BuilderNode, FrameNode, NodeController } from '@ohos.ArkUI.node' 
import WebViewComponent from '../view/WebViewComponent' 
import { WebBuilderParmas } from '../viewmodel/WebBuilderParmas' 
import { WebViewNodeUpdateParams } from '../viewmodel/WebViewNodeUpdateParams' 
 
@Component 
export default struct WebViewComponent { 
  @Prop @Watch('onAdjustOffsetChange') adjustOffset: IAdjustOffsetParams | null 
 
  onAdjustOffsetChange() { 
    if(this.adjustOffset) { 
      console.info(`TAG adjustOffset changed: x=${this.adjustOffset.x} y=${this.adjustOffset.y}`) 
    } else { 
      console.info(`TAG adjustOffset is null !`) 
    } 
  } 
 
  build() { 
    Row(){ 
      Text('Hello World') 
        .fontSize(20) 
        .fontColor(Color.Blue) 
    } 
    .backgroundColor(Color.White) 
  } 
} 
 
 
@Builder 
function webBuilder(params: WebBuilderParmas) { 
  Column() { 
    WebViewComponent({ 
      adjustOffset: params.adjustOffset 
    }) 
  } 
} 
 
class MyNodeController extends NodeController { 
  private rootNode: BuilderNode<[WebBuilderParmas]> | null = null; 
  private wrapBuilder: WrappedBuilder<[WebBuilderParmas]> = wrapBuilder(webBuilder); 
 
  makeNode(uiContext: UIContext): FrameNode | null { 
    if (this.rootNode === null) { 
      this.rootNode = new BuilderNode(uiContext); 
      this.rootNode.build(this.wrapBuilder, { text: "This is a Text" }) 
    } 
    return this.rootNode.getFrameNode(); 
  } 
 
 
  updateNode(updateParams: WebViewNodeUpdateParams) { 
    const params: WebBuilderParmas = { 
      adjustOffset : updateParams.adjustOffset 
    } 
    console.info(`TAG updateNode: ${JSON.stringify(params)}`) 
 
    this.rootNode?.update(params) 
  } 
} 
 
@Entry 
@Component 
struct MainPage { 
  controller: web_webview.WebviewController = new web_webview.WebviewController() 
  private myNodeController: MyNodeController = new MyNodeController(); 
  private currX: number = 0; 
  private currY: number = 0; 
 
  build() { 
    Column() { 
      NodeContainer(this.myNodeController) 
 
      Button('click to update') 
        .onClick(() => { 
          this.currX += 100; 
          this.currY += 100; 
          const updateParams : WebViewNodeUpdateParams = { 
            adjustOffset: { 
              x: this.currX, 
              y: this.currY 
            } 
          } 
          this.myNodeController.updateNode(updateParams) 
        }) 
 
    } 
  } 
} 
涉及的参数： 
//IAdjustOffsetParams.ets 
export interface IAdjustOffsetParams { 
  x?: number; 
  y?: number; 
} 
 
//WebBuilderParmas.ets 
 
export interface WebBuilderParmas { 
  adjustOffset: IAdjustOffsetParams; 
} 
 
// WebViewNodeUpdateParams.ets 
 
export interface WebViewNodeUpdateParams { 
  adjustOffset: IAdjustOffsetParams; 
}