HarmonyOS 鸿蒙Next中如何解决Web组件包含输入框时键盘与其他布局积压出现遮挡的问题

HarmonyOS 鸿蒙Next中如何解决Web组件包含输入框时键盘与其他布局积压出现遮挡的问题

【问题现象】

一个包含输入框的H5页面，使用Web组件加载，点击较底部的输入框，会出现软键盘遮挡输入框的现象，同一个H5页面在浏览器中打开，输入框会上抬，不会被遮挡。

APP效果图和浏览器效果图对比：

点击放大
点击放大

【定位思路】

  1. 实现不遮挡的效果，首先考虑使用安全区域的避让模式：

    setKeyboardAvoidMode(value: KeyboardAvoidMode): void

    控制虚拟键盘抬起时页面的避让模式：

    KeyboardAvoidMode.OFFSET：键盘抬起时默认页面避让模式为上抬模式。

    KeyboardAvoidMode.RESIZE：压缩Page的大小，Page下设置百分比宽高的组件会跟随Page压缩，直接设置宽高的组件会按设置的固定大小布局。

  2. 研究浏览器实现方案：

    通过远端网页调试，观察页面组件位置，情况发现，在浏览器中，因浏览器底部存在导航栏，在软键盘抬起时，导航栏隐藏，但实际占据的位置仍然存在，H5页面中的组件都上移了导航栏高度。按照浏览器效果实现，在软键盘抬起时，将Web组件上抬一个合适的偏移量。

【解决方案】

主要配置：添加layoutWeight(1) 属性，在抬起键盘时，对子组件UI重新布局； 添加软键盘拉起时，页面上移偏移量。

Column() {
  Web({
    src: '网页资源URL',
    controller: this.controller,
    incognitoMode: this.incognitoMode
  })
    .cacheMode(2)
    .domStorageAccess(true)
    .mixedMode(this.mixMode) // 允许加载HTTP和HTTPS混合内容
    .onlineImageAccess(true)
    .javaScriptAccess(true)
    .layoutWeight(1) // 重点属性，对子组件进行重新布局,不设置，避让软键盘配置页面不会上抬
  // 页面上移偏移量
  Column() {
    Row() {
    }.height(20)
  }
  .width('100%')
  .justifyContent(FlexAlign.Start)
}
// 设置顶部绘制延伸到状态栏
.expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP])
.expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.BOTTOM])
.width('100%')

更多关于HarmonyOS 鸿蒙Next中如何解决Web组件包含输入框时键盘与其他布局积压出现遮挡的问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于HarmonyOS 鸿蒙Next中如何解决Web组件包含输入框时键盘与其他布局积压出现遮挡的问题的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，解决Web组件包含输入框时键盘与其他布局积压出现遮挡的问题，可以通过以下步骤实现：

  1. 使用setKeyboardAvoidMode方法设置键盘避让模式：

    • KeyboardAvoidMode.OFFSET：键盘抬起时页面默认上抬。
    • KeyboardAvoidMode.RESIZE：压缩Page大小，百分比宽高的组件会跟随压缩，固定宽高的组件保持不变。

  2. 在Web组件中添加layoutWeight(1)属性，确保在键盘抬起时对子组件进行重新布局。

  3. 设置页面上移偏移量，确保输入框不被遮挡。

示例代码：

Column() {
  Web({
    src: '网页资源URL',
    controller: this.controller,
    incognitoMode: this.incognitoMode
  })
    .cacheMode(2)
    .domStorageAccess(true)
    .mixedMode(this.mixMode)
    .onlineImageAccess(true)
    .javaScriptAccess(true)
    .layoutWeight(1) // 重点属性，对子组件进行重新布局
  Column() {
    Row() {
    }.height(20)
  }
  .width('100%')
  .justifyContent(FlexAlign.Start)
}
.expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP])
.expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.BOTTOM])
.width('100%')
回到顶部