HarmonyOS NEXT开发实战（5.0版）基于原生能力的键盘控制

 鸿蒙NEXT开发实战往期必看文章：

HarmonyOS NEXT应用开发案例实践总结合（持续更新......）

HarmonyOS NEXT应用开发性能优化实践总结（持续更新......）

一分钟了解”纯血版！鸿蒙HarmonyOS Next应用开发！

“非常详细的” 鸿蒙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)

}

最后

小编在之前的鸿蒙系统扫盲中，有很多朋友给我留言，不同的角度的问了一些问题，我明显感觉到一点，那就是许多人参与鸿蒙开发，但是又不知道从哪里下手，因为资料太多，太杂，无从选择。有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。所以有一份实用的鸿蒙（HarmonyOS NEXT）文档用来跟着学习是非常有必要的。

如果你是一名有经验的资深Android移动开发、Java开发、前端开发、对鸿蒙感兴趣以及转行人员

→   鸿蒙HarmonyOS Next 全栈开发学习笔记 希望这一份鸿蒙学习文档能够给大家带来帮助~

这份鸿蒙（HarmonyOS NEXT）包含了鸿蒙开发必掌握的核心知识要点，内容包含了（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、（南向驱动、嵌入式等）鸿蒙项目实战等等）鸿蒙（HarmonyOS NEXT）技术知识点。