鸿蒙开发 - 键盘避让

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

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

页面配置:

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

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

官方指导:文档中心

相关推荐
四维碎片8 小时前
【Qt】线程池与全局信号实现异步协作
开发语言·qt·ui·visual studio
大雷神8 小时前
鸿蒙安卓前端中加载丢帧:ArkWeb分析
harmonyos
★YUI★11 小时前
学习游戏制作记录(制作系统与物品掉落系统)8.16
学习·游戏·ui·unity·c#
百锦再12 小时前
一文精通 Swagger 在 .NET 中的全方位配置与应用
后端·ui·.net·接口·配置·swagger·访问
小小小小小星14 小时前
鸿蒙开发状态管理与工程化关键信息通俗解释及案例汇总
harmonyos
奶糖不太甜14 小时前
鸿蒙开发问题之鸿蒙弹窗:方法论与技术探索
harmonyos
鸿蒙先行者15 小时前
鸿蒙ArkUI布局与性能优化技术探索
harmonyos·arkui
威哥爱编程15 小时前
鸿蒙 NEXT开发中轻松实现人脸识别功能
harmonyos
用户80547073681215 小时前
【鸿蒙开发教程】HarmonyOS 实现List 列表
harmonyos