鸿蒙原生APP开发之软键盘布局适配场景

---

📚往期笔录记录🔖：

🔖鸿蒙（HarmonyOS）北向开发知识点记录~
🔖鸿蒙（OpenHarmony）南向开发保姆级知识点汇总~
🔖鸿蒙应用开发与鸿蒙系统开发哪个更有前景？
🔖嵌入式开发适不适合做鸿蒙南向开发？看完这篇你就了解了~
🔖对于大前端开发来说，转鸿蒙开发究竟是福还是祸？
🔖鸿蒙岗位需求突增！移动端、PC端、IoT到底该怎么选？
🔖记录一场鸿蒙开发岗位面试经历~
🔖持续更新中……

---

概述

软键盘是用户进行交互的重要途径之一，同时软键盘的弹出和收起，可能会影响到正在显示的UI元素，影响用户体验，出现如下常见的软键盘布局适配问题：

• 重要信息被软键盘遮挡：当软键盘弹出时，输入框或其它重要UI元素可能会被键盘遮挡，导致用户无法看到或访问它们。
• 软键盘弹出导致布局错位：内容可能会不恰当上移，影响用户体验。
• 软键盘弹出导致弹窗过度上抬：弹窗被键盘上顶，造成不好的体验。

本文将介绍以下知识帮助开发者了解软键盘的弹出和收起的控制、避让机制以及软键盘常见问题的解决方法。

• 软键盘的弹出收起和监听
• 软键盘避让机制
• 软键盘避让常见问题

软键盘的弹出收起和监听

当用户点击输入框的时候，默认会弹出软键盘。但是某些场景下，需要对软键盘的弹出和收起进行控制。比如点击空白区希望收起软键盘、进入页面的时候希望页面中的输入框能主动获焦并且弹出软键盘等，此外开发者可能需要根据软键盘的弹出和收起状态、软键盘的弹出高度来进行页面布局调整。本节将介绍软键盘的弹出收起控制、获取软键盘高度以及安全区域高度变化监听。

主动获焦弹出软键盘

有时候进入页面，希望页面中的输入框能主动获焦并且弹出软键盘，方便用户直接输入，比如点击应用首页的搜索框，进入应用搜索页面。

可以通过将输入框的defaultFocus设置为true来实现。

TextInput()
  .defaultFocus(true)

代码控制弹出软键盘

开发者可以使用全局的焦点控制对象FocusController的 requestFocus 方法，通过组件的id将焦点转移到组件树对应的实体节点，并且弹出软键盘。例如下面这个新增地址的示例，当用户未输入信息的时候，点击保存按钮，提示用户输入信息，并且弹出输入框，便于用户直接输入。

示例如下：

TextInput({ placeholder: '请输入联系人姓名' })
  .id('input1')

Button('登录')
  .onClick(() => {
    this.getUIContext().getFocusController().requestFocus('input1');
  })

代码控制收起软键盘

通过全局的焦点控制对象FocusController的 clearFocus 方法，软键盘收起，例如下面的商品列表页面，点击搜索会收起软键盘。

示例代码如下：

Button('搜索')
  .onClick(() => {
    this.getUIContext().getFocusController().clearFocus();
  })

监听获取软键盘高度

开发者还可以通过获取软键盘高度、监听软键盘的弹出和收起状态，来调整组件的位置来适配界面或者显示隐藏某些组件。通过 window 模块的 on(‘keyboardHeightChange’) 方法开启固定态软键盘高度变化的监听，实时获取软键盘宽高。例如下面这个示例软键盘弹起后显示表情栏，软键盘收起后隐藏表情栏。

上面效果图的实现示例代码如下，通过 on(‘keyboardHeightChange’) 方法实时获取软键盘高度赋值给变量keyboardHeight，当keyboardHeight为0的时候表示软键盘处于收起状态，此时隐藏表情栏；keyboardHeight不为0的时候表示软键盘处于弹出状态，此时显示表情栏。

import { window } from '@kit.ArkUI';

@Entry
@Component
struct GetKeyboardHeightDemo {
  @State keyboardHeight: number = 0; // 软键盘高度

  aboutToAppear(): void {
    window.getLastWindow(getContext(this)).then(currentWindow => {
      currentWindow.on('keyboardHeightChange', (data: number) => {
        this.keyboardHeight = px2vp(data);
      })