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

40次阅读

共计 11684 个字符，预计需要花费 30 分钟才能阅读完成。

作者：韩茹

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

鸿蒙巴士专栏作家

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

正文完
harmonyos
发表至： harmonyos
2021-07-01
 0
关于harmonyos:基于HarmonyOS分布式技术他们打造了一款软硬件结合的全领域C端产品
关于harmonyos:相约山城重庆HarmonyOS-Connect伙伴峰会将于7月16日举办
关于harmonyos:HUAWEI-AppGallery-Connect全新升级支持HarmonyOS生态全生命周期服务
关于harmonyos:HarmonyOS实现静态与动态数据可视化图表