鸿蒙开发 - 键盘避让

Wezarp2025-03-07 13:15

最近几天优化了项目关于输入框的优化，崩溃至极，差点哭了，原因是各个页面都没有配置键盘避让模式，又加上页面功能优化，导致各个页面都出现键盘乱蹦。

整理一下键盘避让的实现方法

页面配置：

TypeScript 复制代码

aboutToAppear(): void {
// 上抬模式，页面会整体上抬，使输入框漏出
 this.getUIContext().setKeyboardAvoidMode(KeyboardAvoidMode.OFFSET);

// 压缩模式，使页面中间部分设置百分比的布局进行压缩， 使输入框漏出
this.getUIContext().setKeyboardAvoidMode(KeyboardAvoidMode.RESIZE);

}

根据自己情况选择合适的方式

布局配置

KeyboardAvoidMode.RESIZE 模式下：

压缩Page的大小，Page下设置百分比（一定要有layoutWeight(1)的组件）宽高的组件会跟随Page压缩，直接设置宽高的组件会按设置的固定大小布局。设置KeyboardAvoidMode.RESIZE时，expandSafeArea([SafeAreaType.KEYBOARD],[SafeAreaEdge.BOTTOM])不生效。

假如 List 组件上部有其他组件A那么一定会被顶到标题栏，可以考虑将组件A移动到List组件中

设置不避让

当然了我们开发中也会存在一些场景，不想让组件随键盘移动而避让，那么可以为单个组件设置：

.expandSafeArea([SafeAreaType.KEYBOARD])

还差最后一步

选好了避让模式，调整好了页面布局，一点输入框，键盘抬起了，输入框也不遮盖了，还差一步，list的内容得滚动到最后一条啊，不然要被产品说的。

TypeScript 复制代码

//监听软键盘抬起落下，比安卓方便那么一点点
aboutToAppear(): void {
    window.getLastWindow(getContext(this)).then(currentWindow => {
      let property = currentWindow.getWindowProperties();
      let avoidArea = currentWindow.getWindowAvoidArea(window.AvoidAreaType.TYPE_SYSTEM);
      // 初始化显示区域高度
      this.screenHeight = px2vp(property.windowRect.height - avoidArea.topRect.height - avoidArea.bottomRect.height);
      // 监视软键盘的弹出和收起
      currentWindow.on('avoidAreaChange', async data => {
        if (data.type !== window.AvoidAreaType.TYPE_KEYBOARD) {
          return;
        }
        if (data.area.bottomRect.height <= 0) {
          this.isKeyBoardHidden = true;
        } else {
          this.isKeyBoardHidden = false;
        }
        this.screenHeight = px2vp(property.windowRect.height - avoidArea.topRect.height - data.area.bottomRect.height);
      })
    })
  }

哦了，大部分软件应用场景就这些吧，参考一下，我一边写才发现了官方文档

官方指导：文档中心