Tips:

In the previous article, I shared how to jump to a page. Today we will continue to talk about click events in detail. Tomorrow we will continue to share double-click events and long-click events

  1. Click event

There are four kinds of click events in HarmonyOS. Next, let's introduce the four kinds of click events and how to implement them

1. Custom implementation class

Define the button tag under our xml file, as shown below:

<?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">

    <Text
        ohos:id="$+id:text_helloworld"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:background_element="$graphic:background_ability_main"
        ohos:layout_alignment="horizontal_center"
        ohos:text="Custom click Page"
        ohos:text_size="40vp"
        />
    <Button
        ohos:id="$+id:aBtn"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:background_element="red"
        ohos:text_size="40fp"
        ohos:text_color="white"
        ohos:text="I'm the button"/>

</DirectionalLayout>

Click events are defined in our java file as follows:

package com.example.mydeom;

import com.example.mydeom.slice.MainAbilitySlice;
import ohos.aafwk.ability.Ability;
import ohos.aafwk.content.Intent;
import ohos.aafwk.content.Operation;
import ohos.agp.components.Button;
import ohos.agp.components.Component;

public class MainAbility extends Ability {
    //Define a Button variable
    private Button bTn;
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        //Main entrance
        super.setMainRoute(MainAbilitySlice.class.getName());
        //Set UI content
        super.setUIContent(ResourceTable.Layout_ability_main);
        //Find the button defined in the page according to the component ID
        bTn =(Button) findComponentById(ResourceTable.Id_aBtn);
        bTn.setClickedListener(new MyClick());
    }
}
//Define click event class
class MyClick implements Component.ClickedListener{

    @Override
    public void onClick(Component component) {
        //Get the currently clicked component
        Button btn=(Button) component;
        //Set the text content of the current component as "clicked"
        btn.setText("Click");
    }
}

So we can complete the function of customizing events. The effect is as follows:

Before clicking:After clicking:

2. The current class is used as the implementation class

Create a new capability second. The java code is as follows. The xml file is similar to the above one:

package com.example.mydeom;

import com.example.mydeom.slice.SecondSlice;
import ohos.aafwk.ability.Ability;
import ohos.aafwk.content.Intent;
import ohos.agp.components.Button;
import ohos.agp.components.Component;

public class Second extends Ability implements Component.ClickedListener {
    private Button bTn;
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setMainRoute(SecondSlice.class.getName());
        //Find the button defined in the page according to the component ID
        bTn =(Button) findComponentById(ResourceTable.Id_bBtn);
        //Bind the click event of the current class to bTn
        bTn.setClickedListener(this);
    }

    @Override
    public void onClick(Component component) {
        bTn.setText("Click");
    }
}

3. Anonymous inner class

The specific code of anonymous inner class is as follows:

package com.example.mydeom;

import com.example.mydeom.slice.ThreeSlice;
import ohos.aafwk.ability.Ability;
import ohos.aafwk.content.Intent;
import ohos.agp.components.Button;
import ohos.agp.components.Component;

public class Three extends Ability {
    private Button bTn;
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setMainRoute(ThreeSlice.class.getName());
        //Find the button defined in the page according to the component ID
        bTn =(Button) findComponentById(ResourceTable.Id_cBtn);
        //Bind the click event of the current class to bTn
        bTn.setClickedListener(new Component.ClickedListener() {
            @Override
            public void onClick(Component component) {
                bTn.setText("Click");
            }
        });
    }
}

4. Method reference

Method reference classes are as follows:

package com.example.mydeom;

import com.example.mydeom.slice.FourSlice;
import ohos.aafwk.ability.Ability;
import ohos.aafwk.content.Intent;
import ohos.agp.components.Button;
import ohos.agp.components.Component;

public class Four extends Ability {
    private Button bTn;
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setMainRoute(FourSlice.class.getName());
        //Find the button defined in the page according to the component ID
        bTn =(Button) findComponentById(ResourceTable.Id_dBtn);
        //Bind the click event of the current class to bTn
        bTn.setClickedListener(this::onClick);
    }
    public void onClick(Component component) {
        bTn.setText("Click");
    }
}

Here we have finished the implementation methods of four click events!  

I will upload the code to the resources this time. You can download it

Tips:

What is the difference between the four click events?

Here is a detailed explanation:

The second event is more convenient to apply other components in the current class than the first. Where is the convenience?

Because the components in the current class need to be defined in onStar, and the first is an independent class, it is inconvenient to apply the components of the current class

The third direct definition will cause the current click event to achieve the effect only once. If the effect is achieved once, the third anonymous function class method can be used

The fourth method is equivalent to referencing a method in the current class

  If you need source code, you can click this link to download it Four implementation methods of HarmonyOS click event source code. rar - other document resources - CSDN Download

It's not easy to share. Those who feel good can continue to pay attention to this column and leave a free praise!

The author will update new knowledge to everyone from time to time!