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 運作項目

四、精選好文

元件就是文本、按鈕、圖檔等元素的統稱

事件就是可以被元件識别的操作，常見的事件有單擊、輕按兩下、長按和滑動等。

單擊事件又稱點選事件，單擊事件是我們平時操作過程中觸發的最多的事件。

實作HarmonyOS（鴻蒙）的單擊事件主要分為四個步驟：

定義元件，給元件配置設定唯一ID，之後通過ID定位元件

給定義的元件綁定單擊事件

實作ClickedListener接口并重寫onClick方法

實作onClick方法中的具體邏輯，以此完成點選事件的相關業務操作

File -> New -> New Project

這一步會定義一個按鈕（按鈕也是一個元件），并且給按鈕元件配置設定唯一ID，之後通過ID定位按鈕元件，在這裡可能需要首先了解一下Ability相關技術，這樣可以更好的了解Ability架構以及頁面之間的包含關系，如果有完全不了解的可以查閱這篇文章，做個簡單入門《HarmonyOS（鴻蒙）—— Ability與頁面》。

找到MainAbilitySlice.java檔案，然後按住ctrl鍵+點選ResourceTable.Layout_ability_main，進入ability_main.xml檔案

元件代碼開發

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>      

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);
    }
}      

這裡可以直接使用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) {
        // 具體點選操作的邏輯處理
    }
}      

HarmonyOS（鴻蒙）DevEco Studio開發環境搭建

HarmonyOS（鴻蒙）開發一文入門

兩個案例五分鐘輕松入門Harmony（鴻蒙）開發

armonyOS與Android的全面對比

HarmonyOS（鴻蒙）全網最全資源彙總，吐血整理，趕緊收藏！

HarmonyOS（鴻蒙）—— Ability與頁面

HarmonyOS（鴻蒙）——config.json詳解

HarmonyOS（鴻蒙）——啟動流程

HarmonyOS（鴻蒙）——全面入門，始于而不止于HelloWorld