【鸿蒙 HarmonyOS】UI 组件 ( Button 组件 )

2023-03-28 20:23:01 浏览数 (2)

文章目录

  • 一、布局文件中设置 Button 组件属性
  • 二、代码中修改 Button 组件属性
  • 三、Button 点击事件
  • 四、完整代码示例
  • 五、执行结果
  • 六、GitHub 地址

一、布局文件中设置 Button 组件属性

Button 组件是在 UI 界面中的按钮组件 , 重要的用户交互接口 ;

布局文件中设置 Button :

Button 组件在布局文件中的示例 :

代码语言：javascript复制
<?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:button"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:background_element="#000000"
        ohos:layout_alignment="horizontal_center"
        ohos:text="你点啥"
        ohos:text_size="150"
        ohos:text_color="#00FF00"/>

</DirectionalLayout>

id 属性 : ohos:id="$ id:button" , 用于作为当前组件的唯一标识 , 在单个布局文件中不允许 id 标识重复 ;

宽度与高度属性 : 可以设置 match_content 和 match_parent 两个值 ;

  • 宽度 : ohos:width=“match_content”
  • 高度 : ohos:height=“match_content”

组件位置属性 : ohos:layout_alignment=“horizontal_center” , 上述配置标识组件水平居中 ;

背景设置属性 : ohos:background_element="#000000" , 可以设置一个颜色值 ;

文本设置 : ohos:text=“你点啥” , 设置组件显示的文本为 “你点啥” ;

文本文字大小设置 : ohos:text_size=“150”

文本颜色设置 : ohos:text_color="#00FF00" , 绿色 ;

二、代码中修改 Button 组件属性

代码中设置 Button 属性 :

获取组件 : 调用 findComponentById ( ) 方法获取 ;

设置背景 : 需要使用 ShapeElement 对象设置 , 下面的代码是设置 Button 组件红色背景 ;

代码语言：javascript复制
                // 修改 Button 背景颜色
                ShapeElement shapeElement = new ShapeElement();
                // 设置红色背景
                shapeElement.setRgbColor(new RgbColor(0xFF, 0x00, 0x00));
                // 设置 组件 背景
                button.setBackground(shapeElement);

设置文本 : 调用 Button 对象的 setText ( ) 方法设置文本 ;

设置文字大小 : 调用 Button 对象的 setTextSize ( ) 方法设置文字大小 ;

设置文字颜色 : 调用 Button 对象的 setTextColor ( ) 方法设置文字颜色 ;

完整代码示例 : 设置 Button 组件红色背景 , 白色字体 , 180 大小文字 , 以及文本显示内容 ;

代码语言：javascript复制
               // 修改 Button 按钮属性

                // 修改 Button 背景颜色
                ShapeElement shapeElement = new ShapeElement();
                // 设置红色背景
                shapeElement.setRgbColor(new RgbColor(0xFF, 0x00, 0x00));
                // 设置 组件 背景
                button.setBackground(shapeElement);

                // 设置文本
                button.setText("点你咋地");

                // 设置文本颜色
                button.setTextColor(Color.WHITE);

                // 设置文本大小
                button.setTextSize(180);

三、Button 点击事件

点击 Button 按钮事件 :

设置 Component.ClickedListener 点击监听器 , 点击 Button 按钮组件后通过该方法回调 ;

代码语言：javascript复制
        // 获取 XML 布局中的 Button 按钮
        Button button = (Button) findComponentById(ResourceTable.Id_button);

        // 设置 Button 按钮点击事件
        button.setClickedListener(new Component.ClickedListener() {
            @Override
            public void onClick(Component component) {
            }
        }

四、完整代码示例

主界面代码 :

代码语言：javascript复制
package com.example.button.slice;

import com.example.button.ResourceTable;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.colors.RgbColor;
import ohos.agp.components.Button;
import ohos.agp.components.Component;
import ohos.agp.components.element.ShapeElement;
import ohos.agp.utils.Color;

public class MainAbilitySlice extends AbilitySlice {
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_ability_main);

        // 获取 XML 布局中的 Button 按钮
        Button button = (Button) findComponentById(ResourceTable.Id_button);

        // 设置 Button 按钮点击事件
        button.setClickedListener(new Component.ClickedListener() {
            @Override
            public void onClick(Component component) {
               // 修改 Button 按钮属性

                // 修改 Button 背景颜色
                ShapeElement shapeElement = new ShapeElement();
                // 设置红色背景
                shapeElement.setRgbColor(new RgbColor(0xFF, 0x00, 0x00));
                // 设置 组件 背景
                button.setBackground(shapeElement);

                // 设置文本
                button.setText("点你咋地");

                // 设置文本颜色
                button.setTextColor(Color.WHITE);

                // 设置文本大小
                button.setTextSize(180);
            }
        });

    }

    @Override
    public void onActive() {
        super.onActive();
    }

    @Override
    public void onForeground(Intent intent) {
        super.onForeground(intent);
    }
}

布局文件代码 :

代码语言：javascript复制
<?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:button"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:background_element="#000000"
        ohos:layout_alignment="horizontal_center"
        ohos:text="你点啥"
        ohos:text_size="150"
        ohos:text_color="#00FF00"/>

</DirectionalLayout>

五、执行结果

点击前 :

点击后 :

六、GitHub 地址

GitHub 主应用 : https://github.com/han1202012/HarmonyHelloWorld

Button 组件示例 Module : https://github.com/han1202012/HarmonyHelloWorld/tree/master/button

button harmonyos ui 布局 对象

0 人点赞