HarmonyOS 鸿蒙Next基于原生能力的键盘控制

应用通常使用键盘的方式，系统键盘的弹出收起，获焦失焦，高度监听，安全避让等。

应用经常会遇到如下的业务诉求：

场景一：进入页面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("#30FFFFFF")
  .border({ width: 1, color: Color.White, radius: 8 })
  .margin({ top: 50, bottom: 60 })
  .onClick(() => {
    let LoginForm: LoginForm = {
      username: this.username,
      password: this.password
    }
    let requestId = “”
    // todo: 无法使用for…in遍历对象
    if (!LoginForm.username) {
      requestId = “username”
    } else if (!LoginForm.password) {
      requestId = “password”
    } else {
      promptAction.showToast({ message: ‘Login success’ })
      return
    }
    let res = focusControl.requestFocus(requestId) // 使选中的this.selectId的组件获焦
    promptAction.showToast({ message: requestId + ‘不能为空’ })
  })

场景三：

键盘弹出后只上抬特定的输入组件。

效果图

方案

通过expandSafeArea通用属性设置，实现只上抬红框圈住的特定组件核心代码

.expandSafeArea([SafeAreaType.KEYBOARD], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])

场景四：

监听键盘高度，在键盘弹出后让组件上移，键盘收起后让组件恢复，这种做法定制化程度更高，可以根据开发者需要自行控制页面避让的高度

效果图

方案

先通过expandSafeArea禁止自动键盘弹出上移页面。然后通过window.on(‘avoidAreaChange’)和windowClass.on(‘keyboardHeightChange’)，实现监听键盘高度，上抬整个页面view，让输入框（生命周期价值输入框）组件能显示在键盘上方。

核心代码

onPageShow(): 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;
}
this.screenHeight = px2vp(property.windowRect.height - avoidArea.topRect.height - data.area.bottomRect.height);
})
})
// …
}

场景五：

设置窗口在键盘抬起时的页面避让模式为上抬，压缩。

效果图

方案

点击生命周期输入框，通过windowStage.getMainWindowSync().getUIContext().setKeyboardAvoidMode，实现设置窗口在键盘抬起时的页面避让模式,这种情况下当键盘弹起的时候页面会自动压缩。

核心代码

onPageShow(): void {

  // …
  this.windowStage.getMainWindowSync().getUIContext().setKeyboardAvoidMode(KeyboardAvoidMode.RESIZE)
  // …
}
onPageHide(): void {
  this.windowStage.getMainWindowSync().getUIContext().setKeyboardAvoidMode(KeyboardAvoidMode.OFFSET)
}