HarmonyOS Next快速入门:通用事件

简介: 本教程聚焦HarmonyOS应用开发,涵盖事件处理的核心内容。包括事件分发、触屏事件、键鼠事件、焦点事件及拖拽事件等。通过代码实例讲解点击事件、触控事件(Down/Move/Up)、获焦与失焦事件的处理逻辑,以及气泡弹窗的应用。适合开发者快速掌握HarmonyOS Next中通用事件的使用方法,提升应用交互体验。

HarmonyOS Next快速入门##HarmonyOS应用开发##教育

点击跳转《HarmonyOS Next快速入门》视频教程

通用事件分为以下几类:

  • 事件分发:事件分发是指ArkUI收到用户操作生成的触控事件,通过触摸测试,将触控事件分发至各个组件形成事件的过程。
  • 触屏事件:触控事件是触摸测试的输入,根据用户操作方式的不同,可以划分为Touch类触控事件和Mouse类触控事件。
  • 键鼠事件:键鼠事件指键盘,鼠标外接设备的输入事件。
  • 焦点事件:是指焦点、焦点链和走焦等事件。
  • 拖拽事件:拖拽事件提供了一种通过鼠标或手势触屏传递数据的机制,即从一个组件位置拖出(drag)数据并将其拖入(drop)到另一个组件位置,以触发响应。在这一过程中,拖出方提供数据,而拖入方负责接收和处理数据。这一操作使用户能够便捷地移动、复制或删除指定内容。

点击事件

  .onClick(() => {
   
    // 处理点击事件逻辑
  })

当手指或手写笔在组件上触碰时,会触发不同动作所对应的事件响应,包括按下(Down)、滑动(Move)、抬起(Up)事件:

onTouch(event: (event?: TouchEvent) => void)
  • event.type为TouchType.Down:表示手指按下。
  • event.type为TouchType.Up:表示手指抬起。
  • event.type为TouchType.Move:表示手指按住移动。
  • event.type为TouchType.Cancel:表示打断取消当前手指操作。

焦点、焦点链和走焦

  • 焦点:指向当前应用界面上唯一的一个可交互元素,当用户使用键盘、电视遥控器、车机摇杆/旋钮等非指向性输入设备与应用程序进行间接交互时,基于焦点的导航和交互是重要的输入手段。
  • 焦点链:在应用的组件树形结构中,当一个组件获得焦点时,从根节点到该组件节点的整条路径上的所有节点都会被视为处于焦点状态,形成一条连续的焦点链。
  • 走焦:指焦点在应用内的组件之间转移的行为。这一过程对用户是透明的,但开发者可以通过监听onFocus(焦点获取)和onBlur(焦点失去)事件来捕捉这些变化。

焦点态:用来指向当前获焦组件的样式。

  • 显示规则:默认情况下焦点态不会显示,只有当应用进入激活态后,焦点态才会显示。因此,虽然获得焦点的组件不一定显示焦点态(取决于是否处于激活态),但显示焦点态的组件必然是获得焦点的。大部分组件内置了焦点态样式,开发者同样可以使用样式接口进行自定义,一旦自定义,组件将不再显示内置的焦点态样式。在焦点链中,若多个组件同时拥有焦点态,系统将采用子组件优先的策略,优先显示子组件的焦点态,并且仅显示一个焦点态。
  • 进入激活态:仅使用外接键盘按下TAB键时才会进入焦点的激活态,进入激活态后,才可以使用键盘TAB键/方向键进行走焦。首次用来激活焦点态的TAB键不会触发走焦。
  • 退出激活态:当应用收到点击事件时(包括手指触屏的按下事件和鼠标左键的按下事件),焦点的激活态会退出。

获焦事件

  .onFocus(() => {
   
    // 处理获焦事件逻辑
  })

失焦事件

  .onBlur(() => {
   
    // 处理失焦事件逻辑
  })

气泡弹窗事件

  .bindPopup(this.handlePopup, {
   
    message: 'This is a popup with PopupOptions',
  })

代码实例:UniversalEvents

@Entry
@Component
struct UniversalEvents {
   
  @State message: string = 'UniversalEvents ';
  @State count:number=0;
  @State eventMessage:string="Events Message";
  @State phone:string='';
  @State handlePopup:boolean=false;

  build() {
   
    Column({
   space:10}) {
   
      Text(this.message)
        .fontSize(30)
        .fontWeight(FontWeight.Bold)

      Text(`click time: ${
     this.count}`).onClick(()=>{
   
        this.count=this.count+1
      })

      TextInput({
   placeholder:'Focus Event'})
        .onFocus(()=>{
   
          this.eventMessage="I do focus event---"
        })
        .onBlur(()=>{
   
          this.eventMessage="I do lost focus event***"
        })
      Text(this.eventMessage)

      TextInput({
   placeholder:'please input phone'})
        .type(InputType.Number)
        .onChange((value:string)=>{
   
          this.phone=value
        })
        .onFocus(()=>{
   
          this.handlePopup=false;
        })
        .onBlur(()=>{
   
          if(this.phone==''){
   
            //Tell the user that the phone number cannot be empty
            this.handlePopup=true;
          }
        })
        .bindPopup(this.handlePopup,{
   
          message:"Mobile number cannot be empty"
        })
    }
    .height('100%')
    .width('100%')
  }
}
目录
相关文章
|
2天前
|
移动开发 前端开发 JavaScript
鸿蒙NEXT时代你所不知道的全平台跨端框架:CMP、Kuikly、Lynx、uni-app x等
本篇基于当前各大活跃的跨端框架的现状,对比当前它们的情况和未来的可能,帮助你在选择框架时更好理解它们的特点和差异。
41 0
|
编译器
鸿蒙NEXT-鸿蒙三层架构搭建,嵌入HMRouter,实现便捷跳转,新手攻略。(2/3)
本文介绍在三层架构中实现模块依赖的步骤。首先在产品定制层(features)的oh-package.json5文件中导入共享包依赖,如"basic":"file:../../commons/basic"。然后在产品层(products)的配置文件中同时导入公共能力层和产品定制层的依赖,示例展示了如何添加"basic"和"my"两个依赖项。通过这些配置,三层架构的各模块之间建立了完整的依赖关系。
86 0
鸿蒙NEXT-鸿蒙三层架构搭建,嵌入HMRouter,实现便捷跳转,新手攻略。(2/3)
|
9天前
|
缓存 移动开发 网络协议
纯血鸿蒙NEXT即时通讯/IM系统:RinbowTalk正式发布,全源码、纯ArkTS编写
RainbowTalk是一套基于MobileIMSDK的产品级鸿蒙NEXT端IM系统,目前已正式发布。纯ArkTS、从零编写,无套壳、没走捷径,每一行代码都够“纯”(详见:《RainbowTalk详细介绍》)。 MobileIMSDK是一整套开源IM即时通讯框架,历经10年,超轻量级、高度提炼,一套API优雅支持 UDP 、TCP 、WebSocket 三种协议,支持 iOS、Android、H5、标准Java、小程序、Uniapp、鸿蒙NEXT,服务端基于Netty编写。
44 1
|
20天前
|
存储 开发者
鸿蒙Next仓颉开发语言中的数据类型总结分享
仓颉语言数据类型包括多种数字类型(Int、Float)、字符串(String)、数组(Array、ArrayList、ObservedArrayList)及HashMap。数字类型区分长度和精度,数组支持固定与动态操作,HashMap用于存储键值对。适合开发者快速掌握仓颉基础数据结构。#仓颉 #HarmonyOS
|
20天前
详解鸿蒙Next仓颉开发语言中的全屏模式
仓颉开发语言实现全屏模式教程:默认非全屏,需手动设置沉浸模式以占满屏幕。通过`setWindowLayoutFullScreen`开启全屏,并利用`getWindowAvoidArea`获取摄像头与导航条区域高度,结合AppStorage保存尺寸,适配界面布局,避免内容被遮挡。附屏幕尺寸获取方法及单位说明。
|
20天前
|
容器
鸿蒙Next仓颉语言开发实战教程:聊天列表
本文分享了 HarmonyOS 仓颉语言实现聊天页面布局的全过程,包括顶部导航栏、动态消息列表及底部输入框的设计与代码实现,详细讲解了上中下结构布局、消息方向区分、阴影设置等内容。
|
20天前
鸿蒙Next仓颉语言开发实战教程:消息列表
本教程分享了使用仓颉语言开发商城应用中的消息列表页面,包含导航栏布局、消息筛选列表及消息内容列表的实现。通过Row、Scroll、List和ForEach等组件,完成页面结构搭建与数据循环渲染,适合初学者实战练习。
|
容器
HarmonyOS的组件、布局和事件三者的关系
HarmonyOS的组件、布局和事件三者的关系
203 0
HarmonyOS的组件、布局和事件三者的关系
|
18天前
|
容器
HarmonyOS NEXT仓颉开发语言实战案例:电影App
周末好!本文分享使用仓颉语言重构ArkTS实现的电影App案例,对比两者在UI布局、组件写法及语法差异。内容包括页面结构、列表分组、分类切换与电影展示等。通过代码演示仓颉在HarmonyOS开发中的应用。##仓颉##ArkTS##HarmonyOS开发
|
18天前
|
容器
HarmonyOS NEXT仓颉开发语言实战案例:外卖App
仓颉语言实战分享,教你如何用仓颉开发外卖App界面。内容包括页面布局、导航栏自定义、搜索框实现、列表模块构建等,附完整代码示例。轻松掌握Scroll、List等组件使用技巧,提升HarmonyOS应用开发能力。