【鸿蒙 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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/23231.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Android Studio连接Huawei Matepad harmonyOS真机调试

一、开发环境 NO项目说明 1PC开发操作系统Windows10_64bit2Android stuidiov4.23Huawei Metapad 10.4HarmonyOS2.0 备注&#xff1a;PC和移动设备需要在同一wifi下 二、操作Huawei Matepad进入开发者模式 1、设置->关与平板电脑->版本号&#xff0c;双击版本号进入开发者…

鸿蒙应用开发学习路线(OpenHarmony/HarmonyOS)

鸿蒙应用开发学习路线&#xff08;OpenHarmony/HarmonyOS&#xff09; HarmonyOS应用开发学习路线网站汇总社区汇总视频学习路线 OpenHarmony应用开发学习路线与资料网站汇总社区汇总学习路线 MarkDown工具推荐 HarmonyOS应用开发学习路线 作者&#xff1a;坚果 团队&#xff1…

鸿蒙(HarmonyOS)支持低代码开发,无需HTML知识,就可以设计复杂界面

鸿蒙的最新IDE支持可视化开发。几乎不需要编写一行代码&#xff0c;就可以设计非常复杂的界面。当然&#xff0c;如果要实现业务逻辑&#xff0c;还是需要编写代码的。所以我们把这些功能称为低代码开发&#xff0c;也就是说&#xff0c;可以让我们少编写一些代码。 本文将详细…

元宇宙群涉及到技术

元宇宙六大核心技术包括&#xff1a; 1、物联网技术&#xff1a;分为感知层、网络层、应用层&#xff1b; 2、区块链技术&#xff1a;算法及时间戳技术、数据传播及验证技术、共识机制、分布式存储、智能合约、分布式账本等&#xff1b; 3、交互技术&#xff1a;VR虚拟现实技…

元宇宙与ChatGPT结合 一场颠覆式场景革命或将到来?

元宇宙和ChatGPT都是当前数字化领域中非常热门的技术和应用&#xff0c;两者之间也存在一定的关系&#xff0c;结合起来&#xff0c;可以为企业提供更加智能化、个性化的服务和支持&#xff0c;同时也可以拓展企业的市场和品牌影响力&#xff0c;提高企业的效率和创新能力。 元…

阿里上线文本生成视频大模型;微软GitHub引入OpenAI聊天功能;谷歌Bard被指抄袭媒体文章丨每日大事件...

‍ ‍数据智能产业创新服务媒体 ——聚焦数智 改变商业 企业动态 阿里达摩院上线“文本生成视频大模型” 近日&#xff0c;阿里达摩院已在AI模型社区“魔搭”ModelScope上线了“文本生成视频大模型”。根据官方介绍&#xff0c;目前文本生成视频大模型&#xff0c;由文本特征提…

酷开科技智能大屏生态,赋能RISC-V发展

3月2日&#xff0c;由阿里巴巴平头哥举办的首届玄铁RISC-V生态大会在上海举行。英特尔、谷歌、Canonical、Imagination、海尔、支付宝、网易有道、酷开科技等全球数百家企业及机构代表齐聚一堂&#xff0c;成为中国RISC-V发展史上规模最大的一次会议。 RISC-V是基于精简指令集…

认识 微内核架构

微内核架构 1 说明背景 关于宏内核、微内核、混合内核&#xff0c;都是相对而言的概念。 宏内核: 通用的操作系统&#xff0c;将操作系统内核的所有模块放置在内核态运行&#xff0c;具备直接操作硬件的能力。例如 UNIX/Linux, FreeBSD 等微内核: 简单的操作系统&#xff0c;…

一条可以让chatGTP输出图片的指令

一条可以让chatGTP输出图片的指令 接下来我会给你指令&#xff0c;生成相应的图片&#xff0c;我希望你用Markdown语言生成&#xff0c;不要用反引号&#xff0c;不要用代码框&#xff0c;你需要用Unsplash API&#xff0c;遵循以下的格式&#xff1a;https://source.unsplash…

[论文笔记] chatgpt系列 1.1 PPO算法(Proximal Policy Optimization)

Proximal Policy Optimization (PPO) 一、Motivation 避免较多的策略更新。 根据经验,训练期间较小的策略更新更有可能收敛到最优解决方案。在策略更新中,太大的一步可能会导致“掉下悬崖”(得到一个糟糕的策略),并且有很长时间甚至没有可能恢复。 所以在PPO中,我们…

余弦相似度算法

&#xff08;1&#xff09; 基于用户的协同过滤算法 基于用户行为数据设计的推荐算法一般称为协同过滤算法。学术界对协同过滤算法 进行了深入研究&#xff0c;提出了很多方法&#xff0c;比如基于邻域的方法&#xff08;neighborhood-based&#xff09;、隐语义模型&#xff…

ChatGPT各项能力的起源详解

正文 最近&#xff0c;OpenAI的预训练模型ChatGPT给人工智能领域的研究人员留下了深刻的印象和启发。毫无疑问&#xff0c;它又强又聪明&#xff0c;且跟它说话很好玩&#xff0c;还会写代码。它在多个方面的能力远远超过了自然语言处理研究者们的预期。于是我们自然就有一个问…

1688API接口,获得1688商品分类

点击获取key和secret测试 阿里巴巴中国站获得1688商品分类 API 返回值说明 API返回结果 --- Result Object: --------------------------------------- {"itmes": {"itme": [{"id": 312,"name": "内衣","pid":…

淘宝天猫1688京东商品详情API接口,封装接口可高并发

要提供商品详情数据需要知道具体的商品信息&#xff0c;但通常商品详情数据应包括以下内容&#xff1a; 商品名称&#xff1a;商品的名称&#xff0c;以方便顾客对其进行识别和区分。 商品描述&#xff1a;一段让顾客能够全面认识商品的描述。应能够有效地展示商品的特性、功能…

1688订单API接口

item_get - 获得1688商品详情 详情[API文档]https://open.onebound.cn/help/api/ 测试链接. 响应参数&#xff1a; 请求示例&#xff1a; <?php// 请求示例 url 默认请求参数已经URL编码处理 // 本示例代码未加密secret参数明文传输&#xff0c;若要加密请参考&#x…

1688获取商品api接口

作为一名技术爱好者&#xff0c;我们总会遇到各种各样的技术问题&#xff0c;需要寻找合适的技术解决方案。而在互联网时代&#xff0c;我们可以快速通过搜索引擎获取丰富的技术资源和解决方案。然而&#xff0c;在不同的技术分享中&#xff0c;我们常常会遇到质量参差不齐的文…

1688API接口,item_get_app - 获取1688app上原数据

点击获取key和secret测试 阿里巴巴中国站获取1688app上原数据 API 返回值说明 响应实例 Result Object: --------------------------------------- {"item": {"DeveloperWechat": "API","detailModel": {"detailUrl": &qu…

天猫/淘宝1688API接口大全

1、淘宝/天猫API接口 item_get 获得淘宝商品详情 item_get_pro 获得淘宝商品详情高级版 item_review 获得淘宝商品评论 item_fee 获得淘宝商品快递费用 item_password 获得淘口令真实url item_list_updown 批量获得淘宝商品上下架时间 seller_info 获得淘宝店铺详情 item_sear…

chatgpt赋能python:Python如何制作炫酷的动画-从基础到高级

Python如何制作炫酷的动画-从基础到高级 Python是一种被广泛应用的编程语言&#xff0c;适用于多种领域。其中&#xff0c;它的动画制作能力也备受关注。Python内置的GUI库和第三方工具可以使Python编程工程师完成非常炫酷的动画效果&#xff0c;适用于游戏、教育、展示和广告…

Python爬取热搜数据之炫酷可视化

可视化展示 看完记得点个赞哟 炫酷可视化音乐组合版来了&#xff01; 项目介绍 背景 现阶段、抖音、快手、哗哩哗哩、微信公众号已经成为不少年轻人必备的“生活神器”。在21世纪的今天&#xff0c;你又是如何获取外界的信息资源的&#xff1f;相信很多小伙伴应该属于下面这…