网站建设与开发 期末作品公司网站更换域名流程

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

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

  页面配置：

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的内容得滚动到最后一条啊，不然要被产品说的。 

//监听软键盘抬起落下，比安卓方便那么一点点
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);})})}

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

官方指导：文档中心