首页 > 其他分享 >鸿蒙应用示例:键盘管理从避免遮挡到显示监听的方案实践

鸿蒙应用示例:键盘管理从避免遮挡到显示监听的方案实践

时间:2024-10-02 16:50:35浏览次数:9  
标签:windowStage 鸿蒙 示例 100% 键盘 HarmonyOS window import 监听

在HarmonyOS应用开发中,键盘管理是一个关键环节,直接影响着用户体验。本文将探讨HarmonyOS键盘管理的几个重要方面,包括如何避免软键盘遮挡输入框、键盘显示与隐藏的监听机制,以及如何手动控制键盘的显示与隐藏。

一、避免软键盘遮挡输入框

鸿蒙应用示例:键盘管理从避免遮挡到显示监听的方案实践_键盘遮挡

在默认情况下,当用户在输入框中输入文本时,软键盘可能会遮挡住输入框,导致用户体验不佳。为了解决这一问题,HarmonyOS提供了.setKeyboardAvoidMode()方法来调整页面布局,以避免软键盘遮挡输入控件。

示例代码:

src/main/ets/entryability/EntryAbility.ets

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

export default class EntryAbility extends UIAbility {
  onWindowStageCreate(windowStage: window.WindowStage): void {
    windowStage.loadContent('pages/Page30', (err) => {
      AppStorage.setOrCreate('windowStage', windowStage); //保存windowStage
    });
  }
}

src/main/ets/pages/Index.ets

注意【import { KeyboardAvoidMode } from '@ohos.arkui.UIContext';】需要手动敲代码,自动导包会失败。

import { window } from '@kit.ArkUI'
import { KeyboardAvoidMode } from '@ohos.arkui.UIContext';

@Entry
@Component
struct Index {
  @State arrInfo: string[] = "以热爱祖国为荣,以危害祖国为耻。以服务人民为荣,以背离人民为耻。".split('')

  build() {
    Column() {
      Button('键盘RESIZE模式').onClick(() => {
        const windowStage = AppStorage.get('windowStage') as window.WindowStage;
        windowStage?.getMainWindowSync().getUIContext().setKeyboardAvoidMode(KeyboardAvoidMode.RESIZE);
      })
      Button('键盘OFFSET模式').onClick(() => {
        const windowStage = AppStorage.get('windowStage') as window.WindowStage;
        windowStage?.getMainWindowSync().getUIContext().setKeyboardAvoidMode(KeyboardAvoidMode.OFFSET);
      })
      Text('编辑页')
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
      List() {
        ForEach(this.arrInfo, (item: string, index: number) => {
          ListItem() {
            Column() {
              Text(`${item}`)
              TextArea()
            }
          }
        })
      }.layoutWeight(1)

      Row() {
        ForEach('我是工具栏'.split(''), (item: string, index: number) => {
          Column() {
            Text(`${item}`)
          }.width('20%')
        })
      }.width('100%')
      .height(60)
      .backgroundColor(Color.Gray)
    }
    .width('100%')
    .height('100%')
    .backgroundColor(Color.Pink)
  }
}

在上述示例中,通过在页面显示时调用.setKeyboardAvoidMode(KeyboardAvoidMode.RESIZE)方法,可以让页面在键盘弹出时自动调整大小,从而避免遮挡。

二、键盘显示与隐藏监听

鸿蒙应用示例:键盘管理从避免遮挡到显示监听的方案实践_键盘遮挡_02

随着HarmonyOS API版本的演进,原先使用的keyboardShow和keyboardHide事件监听已不再有效。新的监听机制通过keyboardHeightChange事件来实现,该事件可以实时获取键盘的高度变化,进而判断键盘是否显示。

示例代码:

import { window } from '@kit.ArkUI'
import { inputMethod } from '@kit.IMEKit'

@Entry
@Component
export struct Index {
  @State isShowKeyboard: boolean = false

  aboutToAppear(): void {
    try {
      window.getLastWindow(getContext(this), (err, data) => {
        if (err.code) {
          return;
        }
        let windowClass = data;
        try {
          windowClass.on('keyboardHeightChange', (data) => {
            console.log(`当前键盘高度:${data}`);
            if (data > 0) {
              this.isShowKeyboard = true;
              console.log('当前键盘已显示');
            } else {
              this.isShowKeyboard = false;
              console.log('当前键盘已隐藏');
            }
          });
        } catch (exception) {
        }
      });
    } catch (exception) {
    }
  }

  build() {
    Column() {
      Text(`当前键盘状态:${this.isShowKeyboard ? '显示' : '隐藏'}`)
      TextInput().width('100%')
      Button('收起键盘').onClick(() => {
        inputMethod.getController().stopInputSession()
      })
    }
    .height('100%')
    .width('100%')
  }
}

在这个示例中,通过监听keyboardHeightChange事件,可以根据键盘高度的变化来判断键盘的状态,并做出相应的UI更新。在某些场景下,开发者可能需要手动控制键盘的显示与隐藏,例如在用户点击按钮后隐藏键盘。HarmonyOS提供了API来实现这一点。通过调用inputMethod.getController().stopInputSession()方法,可以立即隐藏当前活跃的输入法会话。

结论

通过上述方法,开发者可以有效地管理HarmonyOS应用中的键盘行为,确保在各种情况下都能提供良好的用户体验。无论是避免软键盘遮挡输入框,还是实时监听键盘的状态变化,抑或是手动控制键盘的显示与隐藏,都有对应的API可供使用。随着HarmonyOS的发展,相信未来还会出现更多便捷的方式来优化键盘管理体验。

标签:windowStage,鸿蒙,示例,100%,键盘,HarmonyOS,window,import,监听
From: https://blog.51cto.com/u_16508701/12163456

相关文章

  • 鸿蒙智联仅此4家生态解决方案合作伙伴
    在当今快速发展的物联网时代,鸿蒙智联(HarmonyOSConnect)作为华为面向智能硬件生态伙伴打造的全新品牌和开放平台,正引领着智能硬件行业的变革与创新。鸿蒙智联生态解决方案合作伙伴,作为这一生态中的重要力量,通过提供全方位的解决方案和技术支持,助力生态产品伙伴快速融入鸿蒙智联......
  • <<迷雾>> 第5章 从逻辑学到逻辑电路(4)--或门及其符号 示例电路
    info::操作说明鼠标单击开关切换开合状态系统中使用一个类似箭头的形状表示或门primary::在线交互操作链接https://cc.xiaogd.net/?startCircuitLink=https://book.xiaogd.net/cyjsjdmw-examples/assets/circuit/cyjsjdmw-ch05-13-or-gate.txt原图......
  • C++在游戏开发中的卓越性能:优势解析与代码示例
    在游戏开发领域,C++一直是一种备受青睐的编程语言。它以其高性能、灵活性和强大的功能集,成为了游戏开发者的首选语言之一。在本文中,我们将深入探讨C++在游戏开发中的优势,并提供一些代码示例来展示这些优势是如何在实际开发中发挥作用的。高性能与低级控制C++提供接近硬件......
  • element-ui 监听原生事件需要加.native
    element-ui监听键盘事件需要加native,例如el-input上监听enter键,需要这么写:<el-inputplaceholder="请输入"v-model="select_word1"clearable:style="'width:190px'"@keyup.enter.native=&quo......
  • 八字测算api接口数据示例_奥顺八字测算接口分享
    八字测算免费api接口,每日开放时间在早上8点到晚上十点,本api接口完全免费,是奥顺居八字测算网程序内部接口,提供本地调用的,现在免费分享出来,仅供测试。接口名称:八字精批测算api接口示例接口平台:奥顺居八字测算程序内部接口接口格式:JSON请求方式:HTTPSGET请求示例https://blog.w......
  • 鸿蒙越狱全网最简单方法:不需要安装任何外部APP,不需要修改系统文件,几分钟完成,偶然中发
    亲测有效,特别简单。先上图   下面教方法。进“设置”→“应用和服务”→“应用管理”,把所有自带的系统应用能关的全全掉,能卸载的全部卸载更新,全部将至出厂版本即可。我不知道其中的原理,但我怀疑是出厂系统软件没有过多功能,因此就不会对手机软件安装施加过多限制。卸......
  • C#通用文档识别挂接示例、手写体识别接口
    通用文档识别服务接口支持扫描文档、长微博、自然场景下的各种印刷体文字、手写体文字、繁体文字、英文、阿拉伯文等文字的识别,提供免费测试与在线体验服务部署方式灵活多样,支持标准化HTTP、WebService接口集成,支持私有化部署,支持CPU、GPU以及国产化操作系统部署,支持返回......
  • <<迷雾>> 第5章 从逻辑学到逻辑电路(2)--非门 示例电路
    一个应用非门的例子info::操作说明鼠标单击开关切换开合状态primary::在线交互操作链接https://cc.xiaogd.net/?startCircuitLink=https://book.xiaogd.net/cyjsjdmw-examples/assets/circuit/cyjsjdmw-ch05-05-not-gate-sample.txt原图一个自带电源的常闭触点......
  • 余大嘴立新flag 鸿蒙智行五年内成为中国高端车市场第一
    华为常务董事、终端BG董事长、智能汽车解决方案BU董事长余承东和马东今日开启一场直播活动,介绍了鸿蒙智行旗下问界M9、享界S9、智界R7等产品情况。当被问及鸿蒙智行五年内的目标是什么?余承东表示,至少五年内能够成为中国市场高端车第一,包括三十万以上、四十万以上、五十万......
  • vscode监听代码变动重启node
    在VisualStudioCode(VSCode)中,可以使用nodemon来监听代码的变动并自动重启Node.js服务器。nodemon是一个工具,它可以监控文件的变化并在检测到变化时自动重启Node.js应用程序。安装nodemon你需要在项目中安装nodemon,可以使用npm全局安装或者将其作为开发依赖安装......