HarmonyOS（鸿蒙）——单击事件

本是古典何须时尚 2022-09-02 11:46 318阅读 0赞

**目录**

一、简介

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（鸿蒙）的单击事件主要分为四个步骤：

1.  定义组件，给组件分配唯一ID，之后通过ID定位组件
2.  给定义的组件绑定单击事件
3.  实现ClickedListener接口并重写onClick方法
4.  实现onClick方法中的具体逻辑，以此完成点击事件的相关业务操作

## 二、案例 ##

### 2.1 创建项目 ###

File -> New -> New Project

![image.png][]

选择Empty Ability(Java)，单击Next;  
![image.png][image.png 1]

填写项目相关配置信息，点击Next;  
![image.png][image.png 2]

项目创建完成后的效果如下  
![image.png][image.png 3]

### 2.2 定义组件 ###

这一步会定义一个按钮（按钮也是一个组件），并且给按钮组件分配唯一ID，之后通过ID定位按钮组件，在这里可能需要首先了解一下Ability相关技术，这样可以更好的了解Ability框架以及页面之间的包含关系，如果有完全不了解的可以查阅这篇文章，做个简单入门[《HarmonyOS（鸿蒙）—— Ability与页面》][HarmonyOS_ Ability]。  
找到MainAbilitySlice.java文件，然后按住ctrl键+点击ResourceTable.Layout\_ability\_main，进入ability\_main.xml文件

![image.png][image.png 4]

也可以直接定位ability\_main.xml文件  
![image.png][image.png 5]

组件代码开发

<?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">
     
     
        
        
        <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方法中进行事件的绑定。

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) {
            // 具体点击操作的逻辑处理
        }
    }

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

在onClick方法中，处理具体点击操作的逻辑，这里通过修改按钮中的文字来显示单击事件效果

/**
      * 实现ClickedListener接口并重写onClick方法
      */
     class ButtonListener implements Component.ClickedListener {
     
         /**
          * 点击事件触发的操作会调用的方法
          * @param component     被点击的组件对象
          */
        @Override
        public void onClick(Component component) {
            // 具体点击操作的逻辑处理
            Button button = (Button) component;
            button.setText("哦，我被点击了！");
        }
    }

## 三、测试 ##

### 3.1 登录远程模拟器 ###

点击Tools -> Device Manager

![image.png][image.png 6]

点击Login进行登录  
![image.png][image.png 7]

登录华为账户，点击允许，如果没有注册账户的，请先注册一个华为账户  
![image.png][image.png 8]

选择P40作为远程模拟器  
![image.png][image.png 9]

启动成功后会看到如下调试手机界面  
![image.png][image.png 10]

### 3.2 运行项目 ###

点击右上角的三角形直接运行，或者点击甲壳虫进入调试模式

![image.png][image.png 11]

运行效果，点击前  
![image.png][image.png 12]

点击后  
![image.png][image.png 13]

## 四、精选好文 ##

[HarmonyOS（鸿蒙）DevEco Studio开发环境搭建][HarmonyOS_DevEco Studio]

[HarmonyOS（鸿蒙）开发一文入门][HarmonyOS]

[两个案例五分钟轻松入门Harmony（鸿蒙）开发][Harmony]

[armonyOS与Android的全面对比][armonyOS_Android]

[HarmonyOS（鸿蒙）全网最全资源汇总，吐血整理，赶紧收藏！][HarmonyOS 1]

[HarmonyOS（鸿蒙）—— Ability与页面][HarmonyOS_ Ability]

[HarmonyOS（鸿蒙）——config.json详解][HarmonyOS_config.json]

[HarmonyOS（鸿蒙）——启动流程][HarmonyOS 2]

[HarmonyOS（鸿蒙）——全面入门，始于而不止于HelloWorld][HarmonyOS_HelloWorld]

[image.png]: /images/20220829/286df383f55c4df480228b1a85e229e6.png
[image.png 1]: /images/20220829/7ee6b85c65d94a03886e6dde358e6bf7.png
[image.png 2]: /images/20220829/8117bcf3ad1b42869037e06f8259b133.png
[image.png 3]: /images/20220829/3df701d263274809b5229675ca3e36bf.png
[HarmonyOS_ Ability]: https://blog.csdn.net/qq_41125219/article/details/119192989?spm=1001.2014.3001.5501
[image.png 4]: /images/20220829/3cb38d7cd24c48b8803263b625f56428.png
[image.png 5]: /images/20220829/b18969b704524c098ca38fceefb367dd.png
[image.png 6]: /images/20220829/f82f1565ef274d2796a0cd6c8b3a3dcd.png
[image.png 7]: /images/20220829/c17aac7b0d764556b39bdcd6c207aaf5.png
[image.png 8]: /images/20220829/4fd7363f6253476690d84372ded7c507.png
[image.png 9]: /images/20220829/6677ba2d3dfd4907928e3f55416c4323.png
[image.png 10]: /images/20220829/fb6831d94dce46eeaab8fd58ef020f06.png
[image.png 11]: /images/20220829/d398b09ef2ef4508bed94c31f42dc4dc.png
[image.png 12]: /images/20220829/6e323c5e855e402b8fdce72c9e859771.png
[image.png 13]: /images/20220829/56c9b21bca384459b204ce6f3c452183.png
[HarmonyOS_DevEco Studio]: https://blog.csdn.net/qq_41125219/article/details/118980608?spm=1001.2014.3001.5501
[HarmonyOS]: https://blog.csdn.net/qq_41125219/article/details/119012509?spm=1001.2014.3001.5501
[Harmony]: https://blog.csdn.net/qq_41125219/article/details/119090348?spm=1001.2014.3001.5501
[armonyOS_Android]: https://blog.csdn.net/qq_41125219/article/details/119066740?spm=1001.2014.3001.5501
[HarmonyOS 1]: https://blog.csdn.net/qq_41125219/article/details/119121522?spm=1001.2014.3001.5501
[HarmonyOS_config.json]: https://blog.csdn.net/qq_41125219/article/details/119224472
[HarmonyOS 2]: https://blog.csdn.net/qq_41125219/article/details/119284052
[HarmonyOS_HelloWorld]: https://blog.csdn.net/qq_41125219/article/details/119284492?spm=1001.2014.3001.5501