【鸿蒙HarmonyOS开发笔记】常用组件介绍篇 —— Button按钮组件

概述

Button为按钮组件,通常用于响应用户的点击操作。

参数

Button组件有两种使用方式,分别是不包含子组件和包含子组件,两种方式下,Button 组件所需的参数有所不同,下面分别介绍


不包含子组件

不包含子组件时,Button组件所需的参数如下

Button(label?: string, options?: { type?: ButtonType, stateEffect?: boolean })

label:
label为按钮上显示的文字内容。


options.type:
options.type为按钮形状,该属性的类型ButtonType,可选的枚举值有

ButtonType.Capsule: 胶囊形状
ButtonType.Circle: 圆形
ButtonType.Normal : 普通形状


options.stateEffect:
options.stateEffect表示是否开启点击效果,点击效果如下
在这里插入图片描述

包含子组件

子组件会作为按钮上显示的内容,可以是图片、文字等。这种方式下,Button组件就不在需要label参数了,具体如下

Button(options?: {type?: ButtonType, stateEffect?: boolean})

常用属性

背景颜色

按钮的颜色可使用backgroundColor()方法进行设置,例如

Button('绿色按钮').backgroundColor(Color.Green)

边框圆角

按钮的边框圆角大小可使用borderRadius()方法进行设置,例如

Button('圆角按钮', { type: ButtonType.Normal }).borderRadius(10)

常用事件

对于Button组件而言,最为常用的就是点击事件,可以通过onClick()方法为按钮绑定点击事件,该方法的参数为一个回调函数,当按钮被点击时,就会触发该回调函数,例如

Button('点击事件').onClick(() => {
  console.log('我被点击了')
})

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

解决 Nginx 1.24 版本下载视频慢和文件问题的方法

解决 Nginx 1.24 版本下载视频慢和文件问题的方法 如果你最近在腾讯云服务器上遇到了下载视频慢以及视频文件无法正常使用的问题,可能需要检查一下你的 Nginx 版本。下面是一个真实案例的分析和解决方案,希望能帮助你避免或解决类似问题。 背景 一个运…

使用gitee自动备份文件

需求 舍友磁盘前两天gg了,里面的论文没有本地备份,最后费劲巴拉的在坚果云上找到了很早前的版本。我说可以上传到github,建一个私人仓库就行了,安全性应该有保证,毕竟不是啥学术大亨,不会有人偷你论文。但是…

从JVM的退出机制分析Java程序的优雅关闭退出

前言 Java程序启动从main函数开始启动,是程序入口和主线程,但程序会在什么时候结束?为什么有的Java程序在启动后很快就结束了,比如HelloWorld程序,有的程序却能一直在运行,比如Tomcat启动后就一直保持进程…

AI:149-法律电子邮件图像中的欺诈检测与敲诈勒索追踪—深度学习技术

🚀点击这里跳转到本专栏,可查阅专栏顶置最新的指南宝典~ 🎉🎊🎉 你的技术旅程将在这里启航! 从基础到实践,深入学习。无论你是初学者还是经验丰富的老手,对于本专栏案例和项目实践都有参考学习意义。 ✨✨✨ 每一个案例都附带关键代码,详细讲解供大家学习,希望…

JSONP漏洞详解

目录 同源策略 JSONP简介 JSONP劫持漏洞 漏洞原理 漏洞利用过程 利用工具 JSONP漏洞挖掘思路 JSONP防御 首先,要了解一下什么是同源策略? 同源策略 同源策略(SOP)是浏览器的一个安全基石,浏览器为了保证数据…

AI系统性学习01- Prompt Engineering

文章目录 面向开发者的Prompt Engineering一、简介二、Prompt设计原则1 环境配置2.两个基本原则2.1 原则1:编写清晰、具体的指令2.1.1 策略一:分割2.1.2 策略2:结构化输出2.1.3 策略3:模型检测2.1.4 策略4:提供示例 2.…

[数据集][目标检测]焊接件表面缺陷检测数据集VOC+YOLO格式2292张10类别

数据集格式:Pascal VOC格式YOLO格式(不包含分割路径的txt文件,仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数):2292 标注数量(xml文件个数):2292 标注数量(txt文件个数):2292 标注…

【GPT-SOVITS-03】SOVITS 模块-生成模型解析

说明:该系列文章从本人知乎账号迁入,主要原因是知乎图片附件过于模糊。 知乎专栏地址: 语音生成专栏 系列文章地址: 【GPT-SOVITS-01】源码梳理 【GPT-SOVITS-02】GPT模块解析 【GPT-SOVITS-03】SOVITS 模块-生成模型解析 【G…

【PyTorch】进阶学习:一文详细介绍 torch.load() 的应用场景、实战代码示例

【PyTorch】进阶学习:一文详细介绍 torch.load() 的应用场景、实战代码示例 🌈 个人主页:高斯小哥 🔥 高质量专栏:Matplotlib之旅:零基础精通数据可视化、Python基础【高质量合集】、PyTorch零基础入门教程…

栈和队列(Java实现)

栈和队列(Java实现) 栈 栈(Stack):栈是先进后出(FILO, First In Last Out)的数据结构。Java中实现栈有以下两种方式: stack类LinkedList实现(继承了Deque接口) (1&am…

Python基础算法解析:支持向量机(SVM)

支持向量机(Support Vector Machine,SVM)是一种用于分类和回归分析的机器学习算法,它通过在特征空间中找到一个最优的超平面来进行分类。本文将详细介绍支持向量机的原理、实现步骤以及如何使用Python进行编程实践。 什么是支持向…

【Java刷题篇】串联所有单词的子串

这里写目录标题 📃1.题目📜2.分析题目📜3.算法原理🧠4.思路叙述✍1.进窗口✍2.判断有效个数✍3.维护窗口✍4.出窗口 💥5.完整代码 📃1.题目 力扣链接: 串联所有单词的子串 📜2.分析题目 阅…

2.vscode 配置python开发环境

vscode用着习惯了,也不想再装别的ide 1.安装vscode 这一步默认已完成 2.安装插件 搜索插件安装 3.选择调试器 Ctrl Shift P(或F1),在打开的输入框中输入 Python: Select Interpreter 搜索,选择 Python 解析器 选择自己安…

vulhub中GitLab 远程命令执行漏洞复现(CVE-2021-22205)

GitLab是一款Ruby开发的Git项目管理平台。在11.9以后的GitLab中,因为使用了图片处理工具ExifTool而受到漏洞CVE-2021-22204的影响,攻击者可以通过一个未授权的接口上传一张恶意构造的图片,进而在GitLab服务器上执行任意命令。 环境启动后&am…

深度学习1650ti在win10安装pytorch复盘

深度学习1650ti在win10安装pytorch复盘 前言1. 安装anaconda2. 检查更新显卡驱动3. 根据pytorch选择CUDA版本4. 安装CUDA5. 安装cuDNN6. conda安装pytorch结语 前言 建议有条件的,可以在安装过程中,开启梯子。例如cuDNN安装时登录 or 注册,会…

安卓国产百度网盘与国外云盘软件onedrive对比

我更愿意使用国外软件公司的产品,而不是使用国内百度等制作的流氓软件。使用这些国产软件让我不放心,他们占用我的设备大量空间,在我的设备上推送运行各种无用的垃圾功能。瞒着我,做一些我不知道的事情。 百度网盘安装包大小&…

鸿蒙Next 支持数据双向绑定的组件:Checkbox--Search--TextInput

Checkbox $$语法,$$绑定的变量发生变化时,会触发UI的刷新 Entry Component struct MvvmCase { State isMarry:boolean falseStatesearchText:string build() {Grid(){GridItem(){Column(){Text("checkbox 的双向绑定")Checkbox().select($$…

【PyTorch】基础学习:一文详细介绍 torch.save() 的用法和应用

【PyTorch】基础学习:一文详细介绍 torch.save() 的用法和应用 🌈 个人主页:高斯小哥 🔥 高质量专栏:Matplotlib之旅:零基础精通数据可视化、Python基础【高质量合集】、PyTorch零基础入门教程&#x1f44…

ioDraw:与 GitHub、gitee、gitlab、OneDrive 无缝对接,绘图文件永不丢失!

🌟 绘图神器 ioDraw 重磅更新,文件保存再无忧!🎉 无需注册,即刻畅绘!✨ ioDraw 让你告别繁琐注册,尽情挥洒灵感! 新增文件在线实时保存功能,支持将绘图文件保存到 GitHu…

【HarmonyOS】ArkUI - 向左/向右滑动删除

核心知识点:List容器 -> ListItem -> swipeAction 先看效果图: 代码实现: // 任务类 class Task {static id: number 1// 任务名称name: string 任务${Task.id}// 任务状态finished: boolean false }// 统一的卡片样式 Styles func…