HarmonyOS开发实战案例：原生应用的键盘控制-TextInput

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

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

场景一：进入页面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获焦，弹出系统键盘。

效果图