第九节HarmonyOS 常用基础组件4-Button

一、Button

Button组件主要用来响应点击操作,可以包含子组件。

示例代码:

@Entry
@Component
struct Index {build() {Row() {Column() {Button('确定', { type: ButtonType.Capsule, stateEffect: true }).width('90%').height(40).fontSize(16).fontWeight(FontWeight.Medium).backgroundColor('#007DFF')}.width('100%')}.height('100%')}
}

效果图:

二、设置按钮样式

        type用于定义按钮样式,示例代码中ButtonType.Capsule表示胶囊形按钮;stateEffect用于设置按钮按下时是否开启切换效果,当状态置为false时,点击效果关闭,默认值为true。

我们可以设置多种样式的Button,除了Capsule可以以设置Normal和Circle:

代码:

@Entry
@Component
struct Index {build() {Row() {Column() {Button('确定', { type: ButtonType.Normal, stateEffect: true }).width('90%').height(50).fontSize(20).backgroundColor('#007DFF')Blank(10)Button('确定1', { type: ButtonType.Capsule, stateEffect: true }).width('90%').height(50).fontSize(20).backgroundColor('#007DFF')Blank(10)Button('确定', { type: ButtonType.Circle, stateEffect: true }).width('90%').height(100).fontSize(20).backgroundColor('#007DFF')}.width('100%')}.height('100%')}
}
  1. Capsule:胶囊型按钮(圆角默认为高度的一半)。

  1. Circle:圆形按钮。

  1. Normal:普通按钮(默认不带圆角)。

三、设置按钮点击事件

        可以给Button绑定onClick事件,每当用户点击Button的时候,就会回调执行onClick方法,调用里面的逻辑代码。

Button('登录', { type: ButtonType.Capsule, stateEffect: true })....onClick(() => {// 处理点击事件逻辑})

四、包含子组件

        Button组件可以包含子组件,让您可以开发出更丰富多样的Button,下面的示例代码中Button组件包含了一个Image组件:

Button({ type: ButtonType.Circle, stateEffect: true }) {Image($r('app.media.icon_delete')).width(30).height(30)
}
.width(55)
.height(55)
.backgroundColor(0x317aff)

效果图如下:

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

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

相关文章

Python多线程使用(二)

使用多个线程的时候容易遇到一个场景:多个线程处理一份数据 使用多线程的时候同时处理一份数据,在threading中提供了一个方法:线程锁 Demo:下订单 现在有多笔订单下单,库存减少 from threading import Thread from t…

Java类的初始化顺序

类初始化顺序遵循以下三个原则(优先级依次递减) 1、静态对象(变量)优先于非静态对象(变量)初始化,其中静态对象(变量)只初始化一次,而非静态对象&…

【海思SS528 | VO】MPP媒体处理软件V5.0 | 视频输出模块——学习笔记

😁博客主页😁:🚀https://blog.csdn.net/wkd_007🚀 🤑博客内容🤑:🍭嵌入式开发、Linux、C语言、C、数据结构、音视频🍭 🤣本文内容🤣&a…

谈谈MYSQL索引

基本介绍 索引是帮助MySQL高效获取数据的数据结构,主要是用来提高数据检索的效率,降低数据库的IO成本,同时通过索引列对数据进行排序,降低数据排序的成本,也能降低了CPU的消耗。 通俗来说, 索引就相当于一本书的目录,…

WebGL笔记:图形缩放的原理和实现

缩放 1 )原理 缩放可以理解为对向量长度的改变,或者对向量坐标分量的同步缩放 如下图,比如让向量OA 收缩到点B的位置,也就是从OA变成OB,缩放了一半 2 )公式 已知 点A的位置是(ax,ay,az)点A基于原点內缩了…

CTF特训日记day2

day2打了一个叫NBCTF的比赛 做了四个题,剩下五道arm的题不会做了,关注一下wp,也许可以靠这个比赛提升一波异架构能力。 heapnotes 2.31简单堆题,没啥好说的,直接改got就行了 from re import L from pwn import * f…

Redis 入门、基础。(五种基本类型使用场景)

文章目录 1. 概况1.1 认识 NoSQL1.1.1 查询方式1.1.2 事务1.1.3 总结 2. 认识 Redis4. Redis 常见命令4.1 Redis 数据结构介绍4.2 Redis 通用命令4.3 Redis 命令之 String 命令4.4 Redis 命令的层级结构4.5 Redis 命令之 Hash 命令4.6 Redis 命令之 List 命令4.7 set 唯一不排序…

SparkSQL远程调试(IDEA)

启动Intellij IDEA,打开spark源码项目,配置远程调试 Run->Edit Configuration 启动远程spark-sql spark-sql --verbose --driver-java-options "-Xdebug -Xrunjdwp:transportdt_socket,servery,suspendy,address5005"参数说明:…

css实现简单的抽奖动画效果和旋转效果,还有春联效果

使用css的animation和transform和transition可以实现简单的图片放大缩小,旋转,位移的效果,由此可以延伸的动画效果还是挺多的,比如图片慢慢放大,图片慢慢旋转并放大,图片慢慢变化位置等等, 抽奖…

重新认识Word——样式

重新认识Word Word样式给所有一级标题加上一级标题样式修改标题一样式,符合要求 正文样式标题前的小黑点导航窗格样式的相互复制Word一键转PPT 话说回来,一个程序员平时可能还看不起office全家桶的软件,但是,在实际的生活运用中&a…

苍穹外卖面试题-下

17. 项目参与人员角色 项目经理(1人):对整个项目负责,任务分配、把控进度 产品经理(1人):进行需求调研,输出需求调研文档、产品原型等 UI设计师(1人)&#…

电商产品经理常用的ChatGPT通用提示词模板

电商产品规划和策略:请帮助我规划和制定电商产品的策略和计划,包括市场调研、用户需求分析、产品定位、竞争对手分析等方面的内容,以便我能够更好地把握市场机会并制定相应的发展策略。 电商产品设计和开发:请帮助我进行电商产品…

Canvas和SVG有什么区别?a元素除了用于导航外,还有什么作用?如何在页面上实现一个圆形的可点击区域?

Canvas和SVG有什么区别? svg 绘制出来的每一个图形的元素都是独立的 DOM 节点, 能够方便的绑定事件或用来修改。 canvas输出的是一整幅画布。 svg 输出的图形是矢量图形,后期可以修改参数来自由放大缩小,不会失真和锯齿 。而canvas 输出标量…

springboot 整合 RocketMQ 可用于物联网,电商高并发场景下削峰,保证系统的高可用

本文根据阿里云 RocketMQ产品文档整理,地址:https://help.aliyun.com/document_detail/29532.html?userCodeqtldtin2 RocketMQ是由阿里捐赠给Apache的一款低延迟、高并发、高可用、高可靠的分布式消息中间件。经历了淘宝双十一的洗礼。RocketMQ既可为分布式应用系统…

内部培训平台的系统 PlayEdu搭建私有化内部培训平台

PlayEdu是由白书科技团队多年经营的线上教育系统,专为企业提供的全新企业培训方案 我们的目标是为更多的企业机构搭建私有化内部培训平台,以满足不断增长的培训需求 通过PlayEdu,企业可以有效地组织和管理培训资源,提供高质量的…

PriorityQueue类

PriorityQueue类 Java中的PriorityQueue是一个基于优先级堆的无界优先级队列。它是一个队列,可以按照元素的优先级顺序对元素进行排序,并且允许快速访问具有最高优先级的元素。它实现了Queue接口,继承了AbstractQueue类。 主要函数和方法&a…

AIGC: 关于ChatGPT中基于API实现一个客户端Client

Java版的GPT的Client 可作为其他编程语言的参考注意: 下面包名中的 xxx 可以换成自己的 1 )核心代码结构设计 src main java com.xxx.gpt.client entity ChatCompletion.javaChatCompletionResponse.javaChatChoice.java… util Proxys.java… ChatApi.javaChatG…

C++的lambda语法

仿函数的最大缺点是: 如果命名不合规范并且没有给出注释,直接阅读难以理解(排序的调用过程中,不查看仿函数细节,则很难直接得知是升序排序还是降序排序)每次实现仿函数都需自己构建一个类 因此C从其他语言…

分类详情 API 返回值说明

为了进行此平台API的调用,首先我们需要做下面几件事情。 1、 获取一个KEY,点击获取测试key和secret 2、 参考API文档里的接入方式和示例。 3、查看测试工具是否有需要的接口,响应实例的返回字段是否符合参数要求。 4、利用平台的文档中心…

[前 5 名] 最顶级的数据恢复软件解决方案列表

您是否在互联网上找到适用于 Windows PC 的前 5 名最受好评的数据恢复软件解决方案?嗯,在线市场上有很多工具可以恢复已删除的文件。但并不是所有的应用程序都值得使用它。值得信赖的文件恢复工具将有助于快速检索丢失、删除、格式化的数据并从计算机恢复…