HarmonyOS(鸿蒙)——单击事件

简介: HarmonyOS(鸿蒙)——单击事件

目录


一、简介


1.1 什么是组件


1.2 什么是事件


1.3 什么是单击事件


1.4 实现步骤


二、案例


2.1 创建项目


2.2 定义组件


2.3 定义的组件绑定单击事件


2.4 实现ClickedListener接口并重写onClick方法


2.5 实现onClick方法中的具体逻辑,以此完成点击事件的相关业务操作


三、测试


3.1 登录远程模拟器


3.2 运行项目


四、精选好文


一、简介

1.1 什么是组件

组件就是文本、按钮、图片等元素的统称


1.2 什么是事件

事件就是可以被组件识别的操作,常见的事件有单击、双击、长按和滑动等。


1.3 什么是单击事件

单击事件又称点击事件,单击事件是我们平时操作过程中触发的最多的事件。


1.4 实现步骤

实现HarmonyOS(鸿蒙)的单击事件主要分为四个步骤:


定义组件,给组件分配唯一ID,之后通过ID定位组件

给定义的组件绑定单击事件

实现ClickedListener接口并重写onClick方法

实现onClick方法中的具体逻辑,以此完成点击事件的相关业务操作

二、案例

2.1 创建项目

File -> New -> New Projectimage.pngimage.png2.2 定义组件

这一步会定义一个按钮(按钮也是一个组件),并且给按钮组件分配唯一ID,之后通过ID定位按钮组件,在这里可能需要首先了解一下Ability相关技术,这样可以更好的了解Ability框架以及页面之间的包含关系,如果有完全不了解的可以查阅这篇文章,做个简单入门《HarmonyOS(鸿蒙)—— Ability与页面》。

找到MainAbilitySlice.java文件,然后按住ctrl键+点击ResourceTable.Layout_ability_main,进入ability_main.xml文件

image.png组件代码开发

1. <?xml version="1.0" encoding="utf-8"?>
 <DirectionalLayout
     xmlns:ohos="http://schemas.huawei.com/res/ohos"
     ohos:height="match_parent"
     ohos:width="match_parent"
     ohos:alignment="center"
     ohos:orientation="vertical">
    <!-- ohos:id定义组件的id,注意格式固定$+id:xxxx   -->
    <!--match_content 表示包裹内容,按钮的大小与按钮内的文字大小一致-->
    <Button
        ohos:id="$+id:button"
        ohos:width="match_content"
        ohos:height="match_content"
        ohos:text="点击我"
        ohos:text_size="19fp"
        ohos:text_color="#FFFFFF"
        ohos:top_padding="8vp"
        ohos:bottom_padding="8vp"
        ohos:right_padding="70vp"
        ohos:left_padding="70vp"
        ohos:center_in_parent="true"
        ohos:margin="10vp"
        ohos:background_element="#007DFF"
        />
</DirectionalLayout>

2.3 定义的组件绑定单击事件

Component findComponentById(**int **resID)方法返回的是Component,Component是HarmonyOS中所有组件的父类。我们首先找到MainAbilitySlice.java文件,在onStart方法中进行事件的绑定。


image.png

 package com.liziba.demo.slice;
 import com.liziba.demo.ResourceTable;
 import ohos.aafwk.ability.AbilitySlice;
 import ohos.aafwk.content.Intent;
 import ohos.agp.components.Button;
 import ohos.agp.components.Component;
 public class MainAbilitySlice extends AbilitySlice {
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_ability_main);
        //1. 找到组件
        Button button = (Button) findComponentById(ResourceTable.Id_button);
        //2. 绑定单击事件 -- 此时代码并未完成,需要传入Component.ClickedListener的实现类
        button.setClickedListener();
    }
    @Override
    public void onActive() {
        super.onActive();
    }
    @Override
    public void onForeground(Intent intent) {
        super.onForeground(intent);
    }
}

2.4 实现ClickedListener接口并重写onClick方法

这里可以直接使用MainAbilitySlice实现Component.ClickedListener接口,也可以通过定义内部类ButtonListener实现Component.ClickedListener接口,或者定义其他外部类实现Component.ClickedListener接口都可以,案例采用第二种情况。

 package com.liziba.demo.slice;
 import com.liziba.demo.ResourceTable;
 import ohos.aafwk.ability.AbilitySlice;
 import ohos.aafwk.content.Intent;
 import ohos.agp.components.Button;
 import ohos.agp.components.Component;
 public class MainAbilitySlice extends AbilitySlice {
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_ability_main);
        //1. 找到组件
        Button button = (Button) findComponentById(ResourceTable.Id_button);
        //2. 绑定单击事件
        button.setClickedListener(new ButtonListener());
    }
    @Override
    public void onActive() {
        super.onActive();
    }
    @Override
    public void onForeground(Intent intent) {
        super.onForeground(intent);
    }
}
/**
 * 实现ClickedListener接口并重写onClick方法
 */
class ButtonListener implements Component.ClickedListener {
    /**
     * 点击事件触发的操作会调用的方法
     * @param component     被点击的组件对象
     */
    @Override
    public void onClick(Component component) {
        // 具体点击操作的逻辑处理
    }
}

image.pngimage.pngimage.pngimage.pngimage.pngimage.png四、精选好文

HarmonyOS(鸿蒙)DevEco Studio开发环境搭建


HarmonyOS(鸿蒙)开发一文入门


两个案例五分钟轻松入门Harmony(鸿蒙)开发


armonyOS与Android的全面对比


HarmonyOS(鸿蒙)全网最全资源汇总,吐血整理,赶紧收藏!


HarmonyOS(鸿蒙)—— Ability与页面


HarmonyOS(鸿蒙)——config.json详解


HarmonyOS(鸿蒙)——启动流程


HarmonyOS(鸿蒙)——全面入门,始于而不止于HelloWorld


目录
相关文章
|
7月前
|
开发者 容器
鸿蒙HarmonyOS - SideBarContainer 组件自学指南
`SideBarContainer` 是 HarmonyOS 提供的双区域容器组件,适用于「左侧导航 + 右侧内容」布局,如后台管理界面、文件管理器等。它支持三种布局类型:Embed(并排)、Overlay(悬浮)和 Auto(自动切换),并提供折叠、拖拽、控制按钮等功能。本文通过示例代码详解其用法,包括子组件限制、显示模式控制、尺寸参数设置、控制按钮与分割线样式定制,以及常见问题解答。掌握该组件可高效构建复杂页面结构,推荐从 Embed 模式入手逐步进阶。
192 9
鸿蒙HarmonyOS - SideBarContainer 组件自学指南
|
6月前
|
UED 开发者 容器
27.[HarmonyOS NEXT Column案例六(下)] 任务项交互设计:条件渲染与事件处理的高级应用
在上一部分中,我们介绍了任务列表的基础结构、数据模型设计以及外层Column的实现。本教程将继续深入探讨TaskItem组件的内部结构,包括Row布局的实现、条件渲染的使用以及交互事件的处理,帮助开发者掌握更复杂的布局和交互技巧,创建功能丰富、用户体验良好的任务列表界面。
112 6
|
3月前
|
存储 缓存 5G
鸿蒙 HarmonyOS NEXT端云一体化开发-云存储篇
本文介绍用户登录后获取昵称、头像的方法,包括通过云端API和AppStorage两种方式,并实现上传头像至云存储及更新用户信息。同时解决图片缓存问题,添加上传进度提示,支持自动登录判断,提升用户体验。
168 1
|
3月前
|
存储 负载均衡 数据库
鸿蒙 HarmonyOS NEXT端云一体化开发-云函数篇
本文介绍基于华为AGC的端云一体化开发流程,涵盖项目创建、云函数开通、应用配置及DevEco集成。重点讲解云函数的编写、部署、调用与传参,并涉及环境变量设置、负载均衡、重试机制与熔断策略等高阶特性,助力开发者高效构建稳定云端服务。
383 1
鸿蒙 HarmonyOS NEXT端云一体化开发-云函数篇
|
3月前
|
存储 JSON 数据建模
鸿蒙 HarmonyOS NEXT端云一体化开发-云数据库篇
云数据库采用存储区、对象类型、对象三级结构,支持灵活的数据建模与权限管理,可通过AGC平台或本地项目初始化,实现数据的增删改查及端侧高效调用。
169 1
|
3月前
|
存储 开发者 容器
鸿蒙 HarmonyOS NEXT星河版APP应用开发-ArkTS面向对象及组件化UI开发使用实例
本文介绍了ArkTS语言中的Class类、泛型、接口、模块化、自定义组件及状态管理等核心概念,并结合代码示例讲解了对象属性、构造方法、继承、静态成员、访问修饰符等内容,同时涵盖了路由管理、生命周期和Stage模型等应用开发关键知识点。
308 1
鸿蒙 HarmonyOS NEXT星河版APP应用开发-ArkTS面向对象及组件化UI开发使用实例
|
3月前
鸿蒙 HarmonyOS NEXT星河版APP应用开发-阶段三
本文介绍了UI开发中的样式复用与组件构建技术,涵盖@Extend、@Styles和@Builder的使用方法,并通过Swiper轮播、Scroll滚动、Tabs导航等常用组件实现典型界面效果,结合生肖抽卡、小米轮播、回顶按钮等案例,展示实际应用技巧。
125 1
|
3月前
鸿蒙 HarmonyOS NEXT星河版APP应用开发-阶段二
本文介绍鸿蒙应用界面开发中的弹性布局(Flex)、绝对定位、层叠布局及ArkTS语法进阶,涵盖字符串拼接、类型转换、数组操作、条件与循环语句,并结合B站视频卡、支付宝首页等案例,深入讲解点击事件、状态管理与界面交互功能。
262 1
鸿蒙 HarmonyOS NEXT星河版APP应用开发-阶段二
|
6月前
|
传感器 移动开发 API
【HarmonyOS 5】鸿蒙中的UIAbility详解(一)
HarmonyOS 5 中的 UIAbility 是应用框架的核心组件,负责管理用户界面生命周期和上下文信息。它类似于 Android 的 Activity 或 iOS 的 UIViewController,主要用于与用户交互。本文详细解析了 UIAbility 的基本概念、启动页面设置、上下文获取、生命周期管理及常用操作(如终止实例、跨 Ability 信息传递)。
655 9
|
7月前
|
人工智能 自然语言处理 开发工具
HarmonyOS NEXT~鸿蒙开发能力:HarmonyOS SDK AI 全解析
本文深入解析HarmonyOS SDK中的AI功能集,涵盖分布式AI引擎、核心组件(NLP、计算机视觉等)及智能决策能力。通过代码示例与开发实践指南,帮助开发者掌握环境配置、性能调优及多场景应用(智能家居、移动办公等)。同时探讨性能优化策略与未来演进方向,助力构建高效分布式智能应用。
717 9