应用通常使用键盘的方式,系统键盘的弹出收起,获焦失焦,高度监听,安全避让等。
应用经常会遇到如下的业务诉求:
场景一:进入页面TextInput获焦,弹出系统键盘。
场景二:点击按钮或其他事件触发TextInput获焦,弹出系统键盘。
场景三:键盘弹出后只上抬特定的输入组件。
场景四:监听键盘高度,在键盘弹出后让组件上移,键盘收起后让组件恢复。
场景五:设置窗口在键盘抬起时的页面避让模式为上抬,压缩。
方案描述
场景一:
进入页面TextInput获焦,弹出系统键盘。
效果图
方案
通过defaultFocus通用属性设置,实现第一次进入页面后弹出键盘。
核心代码
TextInput({ text: $$this.username, placeholder: "请输入用户名" })
.placeholderColor("#D4D3D1")
.backgroundColor(this.isUserNameFocus ? "#80FFFFFF" : "#ffffff")
.width(260)
.borderRadius(8)
.id("username")
.margin({ top: 10, bottom: 10 })
.onFocus(() => {
this.isUserNameFocus = true
})
.onBlur(() => {
this.isUserNameFocus = false
})
.defaultFocus(true) // 进入页面默认获焦
场景二:
点击登录按钮触发密码输入TextInput获焦,弹出系统键盘。
效果图
方案
通过focusControl.requestFocus,实现输入账号后,点击登录按钮后,代码主动设置TextInput获取焦点
核心代码
Button("登 录")
.width(200)
.height(45)
.fontSize(28)
.type(ButtonType.Normal)
.backgroundColor(&