鸿蒙开发实战案例：组件随软键盘弹出避让案例

原创

小帅聊鸿蒙

发布于 2025-02-28 14:18:13

840

文章被收录于专栏：鸿蒙开发笔记鸿蒙开发笔记

介绍

本示例介绍使用TextInput组件和LazyForEach实现组件随软键盘弹出避让场景。该场景多用于需要用户手动输入文字类应用。

效果图预览

使用说明

进入案例时，TextInput获焦，弹出系统键盘，点击空白地方键盘收起；
点击输入框触发TextInput获焦，弹出系统键盘；
点击“弹出键盘”按钮触发TextInput获焦，弹出系统键盘；
在上抬避让模式下，键盘抬起时组件上抬，键盘收起后让组件恢复；
在缩小避让模式下，键盘抬起时组件上抬并缩小，键盘收起后让组件恢复；

实现思路

场景一：通过设置defaultFocus属性为true，使TextInput自动获焦，完成进入案例自动拉起键盘；
场景二：TextInput组件拥有点击获焦能力，输入框使用TextInput组件即可实现点击输入框弹出系统键盘；
场景三：通过使用focusControl.requestFocus API实现textInput获焦拉起键盘；
场景四：通过设置setKeyboardAvoidMode API，将页面的避让模式设置为RESIZE模式，,即可实现键盘拉起时组件上抬避让场景；
场景五 ：通过监听键盘高度，可以实时感知键盘拉起收起状态，实现缩放组件尺寸的调整，达到键盘拉起组件缩小效果，配合KeyboardAvoidMode.RESIZE避让模式，实现组件上抬缩小场景。

创建KeyboardDataSource类，用于KeyboardAvoid和LazyForEach加载数据。

export class KeyboardDataSource {
  private dataArray: string[] = [];
  private listeners: DataChangeListener[] = [];

  constructor(dataArray: string[]) {
    for (let i = 0; i < dataArray.length; i++) {
      this.dataArray.push(dataArray[i]);
    }
  }
  public getData(index: number): string {
    return this.dataArray[index];
  }
  notifyDataReload(): void {
    this.listeners.forEach(listener => {
      listener.onDataReloaded();
    })
  }
  notifyDataAdd(index: number): void {
    this.listeners.forEach(listener => {
      listener.onDataAdd(index);
    })
  }
// ...
}

TextInput组件存在默认交互逻辑，默认即为可获焦，通过defaultFocus属性设置实现TextInput组件自动获焦。在输入按钮的点击事件中调用focusControl.requestFocus API，TextInput组件的id为方法参数，即可实现给TextInput组件申请焦点功能。

TextInput()
  .defaultFocus(true)
  .key('keyInput')

Button('输入')
  .onClick(() => {
    focusControl.requestFocus('keyInput');
  })

通过设置setKeyboardAvoidMode API，将虚拟键盘抬起时页面的避让模式设置为RESIZE模式，KeyboardAvoidMode.RESIZE是压缩Page的大小，Page下设置百分比宽高的组件会跟随Page压缩,即可实现键盘拉起时组件上抬效果。

aboutToAppear(): void {
    let context = getContext(this) as common.UIAbilityContext
    context.windowStage.getMainWindowSync().getUIContext().setKeyboardAvoidMode(KeyboardAvoidMode.RESIZE);
    window.getLastWindow(getContext(this)).then(currentWindow => {
      currentWindow.on('keyboardHeightChange', (data: number) => {
        this.keyboardHeight = px2vp(data);
      })
    })
  }

DD一下：`欢迎大家关注公众号<程序猿百晓生>，可以了解到一下知识点。`

1.OpenHarmony开发基础
2.OpenHarmony北向开发环境搭建
3.鸿蒙南向开发环境的搭建
4.鸿蒙生态应用开发白皮书V2.0 & V3.0
5.鸿蒙开发面试真题（含参考答案） 
6.TypeScript入门学习手册
7.OpenHarmony 经典面试题(含参考答案)
8.OpenHarmony设备开发入门【最新版】
9.沉浸式剖析OpenHarmony源代码
10.系统定制指南
11.【OpenHarmony】Uboot 驱动加载流程
12.OpenHarmony构建系统--GN与子系统、部件、模块详解
13.ohos开机init启动流程
14.鸿蒙版性能优化指南
.......

通过监听键盘高度，可以感知到键盘的拉起收起状态，实现缩放组件尺寸的调整，配合KeyboardAvoidMode.RESIZE避让模式，实现组件上抬压缩效果。

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

@Builder
scalingContentComponent(item: string) {
  Column() {
    Image('')
    .borderRadius(8)
    .objectFit(ImageFit.Contain)
    .width(this.keyboardHeight > 0 ? '40' : '80')
    .height(this.keyboardHeight > 0 ? '40' : '80')
    Text(item)
    .fontColor(Color.Black)
    .textAlign(TextAlign.Center)
    .textOverflow({ overflow: TextOverflow.Ellipsis })
  }
  .alignItems(HorizontalAlign.Center)
  .justifyContent(FlexAlign.Center)
  .width(this.keyboardHeight > 0 ? '110' : '175')
  .height(this.keyboardHeight > 0 ? '110' : '175')
}

高性能知识点

本示例使用了LazyForEach进行数据懒加载， liftUpComponents布局时会根据可视区域按需创建liftUpContentComponent组件，并在liftUpContentComponent滑出可视区域外时销毁以降低内存占用。

工程结构&模块类型

   keyboardavoid                            // har类型
   |---pages
   |   |---KeyboardAvoidIndex.ets           // 视图层-应用主页面 
   |---basicDataResource                    
   |   |---BasicDataSource.ets              // 数据模型层-LazyForEach控制器