鸿蒙开发 - 键盘避让

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

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

页面配置:

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);
      })
    })
  }

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

官方指导:文档中心

相关推荐
俺不理解1 小时前
纯血鸿蒙 AudioRenderer+AudioCapturer+RingBuffer 实现麦克风采集+发声
音频·鸿蒙·录音·播放·纯血鸿蒙
博睿谷IT99_1 小时前
2025年华为HCIA-AI认证是否值得考?还是直接冲击HCIP?
人工智能·华为·ai·华为认证·职业规划
谢道韫5 小时前
鸿蒙ArkTS AppStorage数据同步失效:五大原因与高效解决策略
harmonyos
ajassi20005 小时前
开源 Arkts 鸿蒙应用 开发(十二)传感器的使用
linux·华为·开源·harmonyos
ShiMetaPi6 小时前
ShimetaPi M4-R1:国产高性能嵌入式平台的异构计算架构与OpenHarmony生态实践
架构·视觉检测·边缘计算·鸿蒙·树莓派4·#rk3568·树莓派替代方案
geovindu8 小时前
ArKTS:List 数组
数据结构·list·harmonyos
zhanshuo19 小时前
鸿蒙开发实战:分布式数据一致性机制详解 + 示例代码
harmonyos
zhanshuo19 小时前
分布式到底有啥用?鸿蒙在工业场景的三个实战告诉你答案
harmonyos
小雨青年21 小时前
HarmonyOS 生态与版本演进
华为·harmonyos
脑袋大大的1 天前
uni-app x开发避坑指南:拯救被卡顿的UI线程!
开发语言·前端·javascript·vue.js·ui·uni-app·uts