关于harmonyos:32HarmonyOS鸿蒙开发组件Button

作者：韩茹

公司：程序咖（北京）科技有限公司

鸿蒙巴士专栏作家

Button 是一种常见的组件，点击能够触发对应的操作，通常由文本或图标组成，也能够由图标和文本独特组成。

文本按钮

图标按钮

图标和文本独特组成的按钮

一、反对的 XML 属性

Button 无自有的 XML 属性，共有 XML 属性继承自 Text

二、创立 Button

2.1 一般文本按钮

咱们先创立一个一般的按钮。

罕用的背景如文本背景、按钮背景，通常采纳 XML 格局搁置在 graphic 目录下。

在“Project”窗口，关上“entry > src > main > resources > base”，右键点击“graphic”文件夹，抉择“New > File”，命名为“background_button.xml”，在该文件中定义按钮的背景形态、色彩。

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
       ohos:shape="rectangle">
    <corners
        ohos:radius="10"/>
    <solid
        ohos:color="#66007CFD"/>
</shape>

在 layout 目录下的 xml 文件中创立 Button，并设置按钮的背景形态、色彩。

<?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:orientation="vertical">

    <Button
        ohos:id="$+id:button1"
        ohos:width="match_content"
        ohos:height="match_content"
        ohos:text_size="17fp"
        ohos:text="文本按钮"
        ohos:background_element="$graphic:background_button"
        ohos:margin="15vp"
        ohos:padding="10vp"

        />


</DirectionalLayout>

效果图：

2.2 带图标按钮

咱们也能够在创立按钮的时候，附带小图标。通过 element_xxx 属性设置即可。

element_left，文本左侧图标
element_top，文本上方图标
element_right，文本右侧图标
element_bottom，文本下方图标
element_start，文本开始方向图标
element_end，文本完结方向图标 

在“Project”窗口，关上“entry > src > main > resources > base”，右键点击“media”文件夹，先粘贴进去一个 icon 图标。

而后在 xml 文件中持续增加 Button 按钮：

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    ...>

    ...
     <Button
        ohos:id="$+id:button2"
        ohos:width="match_content"
        ohos:height="match_content"
        ohos:text_size="17fp"
        ohos:text="带图标按钮"
        ohos:background_element="$graphic:background_button"
        ohos:margin="15vp"
        ohos:padding="10vp"
        ohos:element_padding="5vp"
        ohos:element_left="$media:add_friend"
        />
    <Button
        ohos:id="$+id:button3"
        ohos:width="match_content"
        ohos:height="match_content"
        ohos:text_size="17fp"
        ohos:text="带图标按钮"
        ohos:background_element="$graphic:background_button"
        ohos:margin="15vp"
        ohos:padding="10vp"
        ohos:element_padding="5vp"
        ohos:element_right="$media:add_friend"
        />
    <Button
        ohos:id="$+id:button4"
        ohos:width="match_content"
        ohos:height="match_content"
        ohos:text_size="17fp"
        ohos:text="带图标按钮"
        ohos:background_element="$graphic:background_button"
        ohos:margin="15vp"
        ohos:padding="10vp"
        ohos:element_padding="5vp"
        ohos:element_top="$media:add_friend"
        />

</DirectionalLayout>

阐明：

ohos:element_padding="5vp"，文本与图片的边距 

效果图：

2.3 其余形态的按钮

依照按钮的形态，按钮能够分为：一般按钮，椭圆按钮，胶囊按钮，圆形按钮等。

一般文本按钮。

先在在 graphic 目录下创立一个红色背景的 xml 文件 color_red_element.xml。

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
       ohos:shape="rectangle">
<!--    FF0000，大红色不难看，咱们在色彩后面设置一下透明度。-->
    <solid
        ohos:color="#33FF0000"/>
</shape>

一般按钮和其余按钮的区别在于不须要设置任何形态，只设置文本和背景色彩即可，例如：

<!--    各种形态的按钮 -->
    <Button
        ohos:width="150vp"
        ohos:height="50vp"
        ohos:text_size="27fp"
        ohos:text="一般按钮"
        ohos:background_element="$graphic:color_red_element"
        ohos:left_margin="15vp"
        ohos:bottom_margin="15vp"
        ohos:right_padding="8vp"
        ohos:left_padding="8vp"
        />

椭圆按钮

椭圆按钮是通过设置 background_element 的来实现的，background_element 的 shape 设置为椭圆（oval）：

oval_button_element.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
       ohos:shape="oval">

<!--   shape 形态这里选 oval -->
    <solid
        ohos:color="#33FF0000"/>
</shape>

xml 布局文件：

   <Button
        ohos:width="150vp"
        ohos:height="50vp"
        ohos:text_size="27fp"
        ohos:text="椭圆按钮"
        ohos:background_element="$graphic:oval_button_element"
        ohos:left_margin="15vp"
        ohos:bottom_margin="15vp"
        ohos:right_padding="8vp"
        ohos:left_padding="8vp"
        />

胶囊按钮

胶囊按钮是一种常见的按钮，设置按钮背景时将背景设置为矩形形态，并且设置 ShapeElement 的 radius 的半径。

capsule_button_element.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
       ohos:shape="rectangle">
    <corners
        ohos:radius="18vp"/>
    <solid
        ohos:color="#33FF0000"/>
</shape>

xml 文件中：

 <Button
        ohos:width="match_content"
        ohos:height="match_content"
        ohos:text_size="27fp"
        ohos:text="胶囊按钮"
        ohos:background_element="$graphic:capsule_button_element"
        ohos:left_margin="15vp"
        ohos:bottom_margin="15vp"
        ohos:right_padding="15vp"
        ohos:left_padding="15vp"
        />

圆形按钮

圆形按钮和椭圆按钮的区别在于组件自身的宽度和高度须要雷同

circle_button_element.xml，其实这个和下面的椭圆按钮 oval_button_element.xml 的内容是雷同的，形态选 oval 即可。

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
       ohos:shape="oval">
    <solid
        ohos:color="#33FF0000"/>
</shape>

xml 文件中：

 <Button
        ohos:width="50vp"
        ohos:height="50vp"
        ohos:text_size="27fp"
        ohos:background_element="$graphic:circle_button_element"
        ohos:text="+"
        ohos:left_margin="15vp"
        ohos:bottom_margin="15vp"
        ohos:right_padding="15vp"
        ohos:left_padding="15vp"
        />

三、解决按钮的点击事件

下面所有的操作，都是在页面布局中搁置按钮，各种形态的。然而无论多难看的按钮，如果不能点击，那么是没有灵魂的。那么如何来响应按钮的点击事件呢？

按钮的重要作用是当用户单击按钮时，会执行相应的操作或者界面呈现相应的变动。实际上用户点击按钮时，Button 对象将收到一个点击事件。开发者能够自定义响应点击事件的办法。例如，通过创立一个 Component.ClickedListener 对象，而后通过调用 setClickedListener 将其调配给按钮。

Button button = (Button) findComponentById(ResourceTable.Id_button);
// 为按钮设置点击事件回调
button.setClickedListener(new Component.ClickedListener() {
    @Override
    public void onClick(Component component) {// 此处增加点击按钮后的事件处理逻辑}
}); 

四、写几个例子

1、打电话的拨号界面

在 layout 目录下新建一个布局文件：dials_layout.xml：

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:width="match_parent"
    ohos:height="match_parent"
    ohos:background_element="$graphic:color_light_gray_element"
    ohos:orientation="vertical"
    ohos:padding="20vp"
    >
    <Text
        ohos:width="match_content"
        ohos:height="match_content"
        ohos:text_size="20fp"
        ohos:text="0123456789"
        ohos:background_element="$graphic:green_text_element"
        ohos:text_alignment="center"
        ohos:layout_alignment="horizontal_center"
        />
    <DirectionalLayout
        ohos:width="match_parent"
        ohos:height="match_content"
        ohos:alignment="horizontal_center"
        ohos:orientation="horizontal"
        ohos:top_margin="5vp"
        ohos:bottom_margin="5vp">
        <Button
            ohos:width="40vp"
            ohos:height="40vp"
            ohos:text_size="15fp"
            ohos:background_element="$graphic:green_circle_button_element"
            ohos:text="1"
            ohos:text_alignment="center"
            />
        <Button
            ohos:width="40vp"
            ohos:height="40vp"
            ohos:text_size="15fp"
            ohos:background_element="$graphic:green_circle_button_element"
            ohos:text="2"
            ohos:left_margin="5vp"
            ohos:right_margin="5vp"
            ohos:text_alignment="center"
            />
        <Button
            ohos:width="40vp"
            ohos:height="40vp"
            ohos:text_size="15fp"
            ohos:background_element="$graphic:green_circle_button_element"
            ohos:text="3"
            ohos:text_alignment="center"
            />
    </DirectionalLayout>
    <DirectionalLayout
        ohos:width="match_parent"
        ohos:height="match_content"
        ohos:alignment="horizontal_center"
        ohos:orientation="horizontal"
        ohos:bottom_margin="5vp">
        <Button
            ohos:width="40vp"
            ohos:height="40vp"
            ohos:text_size="15fp"
            ohos:background_element="$graphic:green_circle_button_element"
            ohos:text="4"
            ohos:text_alignment="center"
            />
        <Button
            ohos:width="40vp"
            ohos:height="40vp"
            ohos:text_size="15fp"
            ohos:left_margin="5vp"
            ohos:right_margin="5vp"
            ohos:background_element="$graphic:green_circle_button_element"
            ohos:text="5"
            ohos:text_alignment="center"
            />
        <Button
            ohos:width="40vp"
            ohos:height="40vp"
            ohos:text_size="15fp"
            ohos:background_element="$graphic:green_circle_button_element"
            ohos:text="6"
            ohos:text_alignment="center"
            />
    </DirectionalLayout>
    <DirectionalLayout
        ohos:width="match_parent"
        ohos:height="match_content"
        ohos:alignment="horizontal_center"
        ohos:orientation="horizontal"
        ohos:bottom_margin="5vp">
        <Button
            ohos:width="40vp"
            ohos:height="40vp"
            ohos:text_size="15fp"
            ohos:background_element="$graphic:green_circle_button_element"
            ohos:text="7"
            ohos:text_alignment="center"
            />
        <Button
            ohos:width="40vp"
            ohos:height="40vp"
            ohos:text_size="15fp"
            ohos:left_margin="5vp"
            ohos:right_margin="5vp"
            ohos:background_element="$graphic:green_circle_button_element"
            ohos:text="8"
            ohos:text_alignment="center"
            />
        <Button
            ohos:width="40vp"
            ohos:height="40vp"
            ohos:text_size="15fp"
            ohos:background_element="$graphic:green_circle_button_element"
            ohos:text="9"
            ohos:text_alignment="center"
            />
    </DirectionalLayout>
    <DirectionalLayout
        ohos:width="match_parent"
        ohos:height="match_content"
        ohos:alignment="horizontal_center"
        ohos:orientation="horizontal"
        ohos:bottom_margin="5vp">
        <Button
            ohos:width="40vp"
            ohos:height="40vp"
            ohos:text_size="15fp"
            ohos:background_element="$graphic:green_circle_button_element"
            ohos:text="*"
            ohos:text_alignment="center"
            />
        <Button
            ohos:width="40vp"
            ohos:height="40vp"
            ohos:text_size="15fp"
            ohos:left_margin="5vp"
            ohos:right_margin="5vp"
            ohos:background_element="$graphic:green_circle_button_element"
            ohos:text="0"
            ohos:text_alignment="center"
            />
        <Button
            ohos:width="40vp"
            ohos:height="40vp"
            ohos:text_size="15fp"
            ohos:background_element="$graphic:green_circle_button_element"
            ohos:text="#"
            ohos:text_alignment="center"
            />
    </DirectionalLayout>
    <Button
        ohos:width="match_content"
        ohos:height="match_content"
        ohos:text_size="15fp"
        ohos:text="CALL"
        ohos:background_element="$graphic:green_capsule_button_element"
        ohos:bottom_margin="5vp"
        ohos:text_alignment="center"
        ohos:layout_alignment="horizontal_center"
        ohos:left_padding="10vp"
        ohos:right_padding="10vp"
        ohos:top_padding="2vp"
        ohos:bottom_padding="2vp"
        />
</DirectionalLayout>

color_light_gray_element.xml：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:shape="rectangle">
    <solid
        ohos:color="#EDEDED"/>
</shape>

green_text_element.xml：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:shape="rectangle">
    <corners
        ohos:radius="20"/>
    <stroke
        ohos:width="2"
        ohos:color="#006E00"/>
    <solid
        ohos:color="#EDEDED"/>
</shape>

green_circle_button_element.xml：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:shape="oval">
    <stroke
        ohos:width="5"
        ohos:color="#006E00"/>
    <solid
        ohos:color="#EDEDED"/>
</shape>

green_capsule_button_element.xml：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:shape="rectangle">
    <corners
        ohos:radius="100"/>
    <solid
        ohos:color="#006E00"/>
</shape>

点击事件：

在 layout 目录下新建一个 xml 布局文件：

<?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:orientation="vertical">

    <Text
        ohos:id="$+id:text1"
        ohos:height="200vp"
        ohos:width="300vp"
        ohos:background_element="#22ff0000"
        ohos:layout_alignment="center"
        ohos:top_margin="20vp"
        ohos:text_color="#FF0000"
        ohos:text="尝试点击上面的两个按钮"
        ohos:text_alignment="center"
        ohos:text_size="24fp"
        />

    <DependentLayout
        ohos:height="match_content"
        ohos:width="match_parent"
        ohos:orientation="horizontal"
        ohos:margin="20vp"
        >
        <Button
            ohos:id="$+id:btn1"
            ohos:height="match_content"
            ohos:width="match_content"
            ohos:text="粑粑去哪了"
            ohos:padding="10vp"
            ohos:text_size="20fp"
            ohos:background_element="$graphic:capsule_button_element"
            ohos:align_parent_left="true"

            />

        <Button
            ohos:id="$+id:btn2"
            ohos:height="match_content"
            ohos:width="match_content"
            ohos:text="飞机去哪了"
            ohos:padding="10vp"
            ohos:text_size="20fp"
            ohos:background_element="$graphic:capsule_button_element"
            ohos:align_parent_right="true"
            />
    </DependentLayout>


</DirectionalLayout>

布局成果：

<img src=”https://img.chengxuka.com/WX20210607-181208@2x.png/mark” alt=”WX20210607-181208@2x” style=”zoom:50%;” />

而后咱们在 java 代码中解决点击事件：

package com.example.buttondemo.slice;

import com.example.buttondemo.ResourceTable;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.components.Button;
import ohos.agp.components.Component;
import ohos.agp.components.Text;

public class MainAbilitySlice extends AbilitySlice {
    @Override
    public void onStart(Intent intent) {super.onStart(intent);
      
        //1. 批改要展现的布局文件
        super.setUIContent(ResourceTable.Layout_button_click_layout);


        //2. 获取两个按钮对象
        Button btn1 = (Button)findComponentById(ResourceTable.Id_btn1);
        Button btn2 = (Button)findComponentById(ResourceTable.Id_btn2);

        //3. 获取文本对象
        Text text1 = (Text)findComponentById(ResourceTable.Id_text1);

        //4. 为按钮设置点击事件的回调函数

        btn1.setClickedListener(new Component.ClickedListener() {
            @Override
            public void onClick(Component component) {
                // 点击按钮
                text1.setText("粑粑去厕所了");
                System.out.println("点击按钮 1。。。");
            }
        });

        btn2.setClickedListener(new Component.ClickedListener() {
            @Override
            public void onClick(Component component) {
                // 点击按钮之后，设置文本
                text1.setText("飞机掉下来了");
                System.out.println("点击按钮 2。。。");

            }
        });

    }


}

运行成果：

更多内容：

1、社区：鸿蒙巴士 https://www.harmonybus.net/

2、公众号：HarmonyBus

3、技术交换 QQ 群：714518656

4、视频课：https://www.chengxuka.com