HarmonyOS 鸿蒙Next开发案例 | 界面组件在软键盘弹出时重绘避免遮挡

HarmonyOS 鸿蒙Next开发案例 | 界面组件在软键盘弹出时重绘避免遮挡

场景说明

在应用开发中，我们经常会遇到这样的场景：当我们点击一个输入框时，系统会自动弹出软键盘，但是软键盘却会遮挡住输入框或者其他重要的控件。为了解决这个问题，现有的常用策略会在软键盘弹出时，根据输入框的位置，把整个页面向上移动一段距离，从而让输入框能够完全显示在屏幕上。然而，这种方法并不完美，其他控件比如确认按钮仍有可能被软键盘挡住，使得用户无法完成操作。本案例将针对此问题提供一种简单而有效的解决方案。

效果呈现

运行环境

本例基于以下环境开发，开发者也可基于其他适配的版本进行开发：

• IDE: DevEco Studio 3.1.1 Release
• SDK: 3.1.0(API 9)

实现思路

要想解决页面遮挡的问题，我们首先要了解它的原因：当我们点击输入框时，系统会弹出软键盘，这时候软键盘会占用一部分屏幕空间，导致显示区域和软键盘区域重叠。软键盘区域属于系统规避区域。除了软键盘区域之外，还有一些其他的系统规避区域，比如状态栏、刘海屏和手势区域等。如果想让应用能够适应这些系统规避区域的变化，我们需要监听这些区域的变化事件并且根据这些区域的尺寸，动态地调整应用的显示区域，重新绘制页面。

开发步骤

1. 创建一个简单的输入验证码界面，它包含了文本框、输入框和确认按钮。这个界面的问题是，当我们点击输入框时，系统会弹出软键盘，但是软键盘却会挡住确认按钮，使得我们无法完成操作。

2. 创建一个变量screenHeight，并把它赋值为当前显示区域的高度。这样，我们就可以在后面根据需要来修改这个变量的值，从而改变显示区域的高度。

3. 监听系统规避区域的变化事件，判断是否是由于软键盘的弹出或收起导致的。如果是，则就获取软键盘的高度。然后，将screenHeight的值设置为原始高度减去软键盘的高度。这样，显示区域就会缩小，避免和软键盘重叠。

完整代码

import window from '@ohos.window';

@Component
struct Index {
 @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;
       }
       this.screenHeight = px2vp(property.windowRect.height - data.area.bottomRect.height);
     })
   })
 }

 build() {
   Row() {
     Column() {
       Text('请输入短信验证码')
         .fontSize(30)
         .margin({
           bottom:'50'
         })
       TextInput()
         .width('70%')
         .height('150px')
         .margin({
           bottom: '30'
         })
       Button('确定')
         .width('70%')
         .margin('20px')
     }
     .width('100%')
   }
   .width('100%').height(this.screenHeight)
 }
}