【鸿蒙 HarmonyOS】UI 组件 ( Button 组件 )
文章目录
- 一、布局文件中设置 Button 组件属性
- 二、代码中修改 Button 组件属性
- 三、Button 点击事件
- 四、完整代码示例
- 五、执行结果
- 六、GitHub 地址
一、布局文件中设置 Button 组件属性
Button 组件是在 UI 界面中的按钮组件 , 重要的用户交互接口 ;
布局文件中设置 Button :
Button 组件在布局文件中的示例 :
<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayoutxmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:height="match_parent"ohos:width="match_parent"ohos:orientation="vertical"><Buttonohos: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 组件红色背景 ;
// 修改 Button 背景颜色ShapeElement shapeElement = new ShapeElement();// 设置红色背景shapeElement.setRgbColor(new RgbColor(0xFF, 0x00, 0x00));// 设置 组件 背景button.setBackground(shapeElement);
设置文本 : 调用 Button 对象的 setText ( ) 方法设置文本 ;
设置文字大小 : 调用 Button 对象的 setTextSize ( ) 方法设置文字大小 ;
设置文字颜色 : 调用 Button 对象的 setTextColor ( ) 方法设置文字颜色 ;
完整代码示例 : 设置 Button 组件红色背景 , 白色字体 , 180 大小文字 , 以及文本显示内容 ;
// 修改 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 按钮组件后通过该方法回调 ;
// 获取 XML 布局中的 Button 按钮Button button = (Button) findComponentById(ResourceTable.Id_button);// 设置 Button 按钮点击事件button.setClickedListener(new Component.ClickedListener() {@Overridepublic void onClick(Component component) {}}
四、完整代码示例
主界面代码 :
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 {@Overridepublic 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() {@Overridepublic 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);}});}@Overridepublic void onActive() {super.onActive();}@Overridepublic void onForeground(Intent intent) {super.onForeground(intent);}
}
布局文件代码 :
<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayoutxmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:height="match_parent"ohos:width="match_parent"ohos:orientation="vertical"><Buttonohos: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
【鸿蒙 HarmonyOS】UI 组件 ( Button 组件 )相关推荐
- 【Python】Label组件 Button组件 Checkbutton组件
Label组件 Label组件是用于在界面上输出描述的标签. #导入tkinter模块所有内容 from tkinter import *#创建一个主窗口,可以容纳整个GUI程序 root = Tk( ...
- 微信小程序_(表单组件)button组件的使用
微信小程序表单组件button官方文档 传送门 Learn 一.button组件的使用 一.button组件的使用 size:按钮的大小[默认值default] type:按钮的样式类型[默认值def ...
- 鸿蒙os事例代码,鸿蒙HarmonyOS App开发造轮子之自定义圆形图片组件的实例代码
一.背景 在采用Java配合xml布局编写鸿蒙app页面的时候,发现sdk自带的Image组件并不能将图片设置成圆形,反复了翻阅了官方API手册(主要查阅了Compont和Image相关的API),起 ...
- 源码级剖析了 Naive UI 的 Button 完整过程
注意:为了让篇幅尽可能简洁一丢丢,在有些地方贴源码时,我尽可能贴最能反映要讲解内容的源码,其他重复性的代码就略去了,所以如果你自己尝试去阅读源码时,可能会发现和文章里的代码有出入.文章跑通 Naive ...
- 七、华为鸿蒙HarmonyOS应用开发之Java UI框架、常用Text组件和Button组件使用
一.Java UI框架概述 应用的Ability在屏幕上将显示一个用户界面,该界面用来显示所有可被用户查看和交互的内容. 应用中所有的用户界面元素都是由Component和ComponentConta ...
- 【鸿蒙 HarmonyOS】UI 组件 ( Text 组件 )
文章目录 一.Text 组件 二.Module 准备 三.代码示例 四.GitHub 地址 一.Text 组件 Text 组件是在 UI 界面中显示文本的组件 ; 1. 布局文件中设置 Text : ...
- 【鸿蒙 HarmonyOS】UI 组件 ( 单选按钮 | RadioButton 与 RadioContainer 组件 )
文章目录 一.RadioButton 与 RadioContainer 组件 二.监听 RadioContainer 选择事件 三.GitHub 地址 一.RadioButton 与 RadioCon ...
- 【鸿蒙 HarmonyOS】Ability 中使用纯代码绘制布局及 UI 组件
文章目录 一.Ability 与 Slice 简介 二.Ability 中使用纯代码绘制布局及 UI 组件 三.Ability 中使用纯代码绘制布局及 UI 组件代码示例 四.GitHub 地址 一. ...
- 【鸿蒙 HarmonyOS】UI 组件 ( 多选按钮 | Checkbox 组件 )
文章目录 一.布局文件中配置 Checkbox 组件 二.代码中配置 Checkbox 组件选中事件 三.完整代码示例 四.GitHub 地址 一.布局文件中配置 Checkbox 组件 Checkb ...
最新文章
- Microsoft Dynamics CRM4.0 Data Auditing and Restore (数据审核和恢复)
- SAP Fiori Elements 里 Smart Table column 的宽度问题
- 【.NET Core项目实战-统一认证平台】第七章 网关篇-自定义客户端限流
- 作者:曾伟,电子科技大学副教授。
- Sql SUBSTR函数
- 【编译原理笔记09】语法制导翻译:语法制导翻译方案,在非递归的预测分析过程中进行翻译
- C调用PYTHON运行奇怪崩溃的一例及解决办法
- [数论] 快速傅里叶变换FFT
- C#做小工具的时候碰到的问题
- MATLAB表上作业法解决运输问题
- 64位mysql 和32位区别_32位和64位哪个好 区别的对比分析
- 链表实现一元多项式的加法、乘法、求导,求值
- matlab矩阵怎么进行相加,matlab矩阵如何运算相加
- viewport的width值应该怎么设置
- 【存档】精确的过零检测电路
- Git详解之特殊配置与钩子应用
- 使用R进行数据可视化套路之-茎叶图、盒形图
- RA关节功能残疾与软骨破坏的相关性高于骨破坏
- 一个新手学着重装系统之路
- list_ndarray_csr_lil占用空间比较