OpenHarmony实战开发-按钮 (Button)

Button是按钮组件，通常用于响应用户的点击操作，其类型包括胶囊按钮、圆形按钮、普通按钮。Button做为容器使用时可以通过添加子组件实现包含文字、图片等元素的按钮。具体用法请参考Button。

创建按钮

Button通过调用接口来创建，接口调用有以下两种形式：

  • 创建不包含子组件的按钮。
Button(label?: ResourceStr, options?: { type?: ButtonType, stateEffect?: boolean })
ts
Button(label?: ResourceStr, options?: { type?: ButtonType, stateEffect?: boolean })

其中，label用来设置按钮文字，type用于设置Button类型，stateEffect属性设置Button是否开启点击效果。

Button('Ok', { type: ButtonType.Normal, stateEffect: true }) .borderRadius(8) .backgroundColor(0x317aff) .width(90).height(40)
ts
Button('Ok', { type: ButtonType.Normal, stateEffect: true }) .borderRadius(8) .backgroundColor(0x317aff) .width(90).height(40)zh-cn_image_0000001562820757

在这里插入图片描述

  • 创建包含子组件的按钮。
Button(options?: {type?: ButtonType, stateEffect?: boolean})
ts
Button(options?: {type?: ButtonType, stateEffect?: boolean})

只支持包含一个子组件，子组件可以是基础组件或者容器组件。

Button({ type: ButtonType.Normal, stateEffect: true }) {Row() {Image($r('app.media.loading')).width(20).height(40).margin({ left: 12 })Text('loading').fontSize(12).fontColor(0xffffff).margin({ left: 5, right: 12 })}.alignItems(VerticalAlign.Center)
}.borderRadius(8).backgroundColor(0x317aff).width(90).height(40)
ts
Button({ type: ButtonType.Normal, stateEffect: true }) {Row() {Image($r('app.media.loading')).width(20).height(40).margin({ left: 12 })Text('loading').fontSize(12).fontColor(0xffffff).margin({ left: 5, right: 12 })}.alignItems(VerticalAlign.Center)
}.borderRadius(8).backgroundColor(0x317aff).width(90).height(40)zh-cn_image_0000001511421216

在这里插入图片描述

设置按钮类型

Button有三种可选类型，分别为胶囊类型（Capsule）、圆形按钮（Circle）和普通按钮（Normal），通过type进行设置。

  • 胶囊按钮（默认类型）

此类型按钮的圆角自动设置为高度的一半，不支持通过borderRadius属性重新设置圆角。

Button('Disable', { type: ButtonType.Capsule, stateEffect: false }) .backgroundColor(0x317aff) .width(90).height(40)
ts
Button('Disable', { type: ButtonType.Capsule, stateEffect: false }) .backgroundColor(0x317aff) .width(90).height(40)zh-cn_image_0000001511421208

在这里插入图片描述

  • 圆形按钮

此类型按钮为圆形，不支持通过borderRadius属性重新设置圆角。

Button('Circle', { type: ButtonType.Circle, stateEffect: false }) .backgroundColor(0x317aff) .width(90) .height(90)
ts
Button('Circle', { type: ButtonType.Circle, stateEffect: false }) .backgroundColor(0x317aff) .width(90) .height(90)zh-cn_image_0000001511740428

在这里插入图片描述

  • 普通按钮

此类型的按钮默认圆角为0，支持通过borderRadius属性重新设置圆角。

Button('Ok', { type: ButtonType.Normal, stateEffect: true }) .borderRadius(8) .backgroundColor(0x317aff) .width(90).height(40)
ts
Button('Ok', { type: ButtonType.Normal, stateEffect: true }) .borderRadius(8) .backgroundColor(0x317aff) .width(90).height(40)zh-cn_image_0000001563060641

在这里插入图片描述

自定义样式

  • 设置边框弧度。

使用通用属性来自定义按钮样式。例如通过borderRadius属性设置按钮的边框弧度。

Button('circle border', { type: ButtonType.Normal }) .borderRadius(20).height(40)
ts
Button('circle border', { type: ButtonType.Normal }) .borderRadius(20).height(40)zh-cn_image_0000001511900392

在这里插入图片描述

  • 设置文本样式。

通过添加文本样式设置按钮文本的展示样式。

Button('font style', { type: ButtonType.Normal }) .fontSize(20) .fontColor(Color.Pink) .fontWeight(800)
ts
Button('font style', { type: ButtonType.Normal }) .fontSize(20) .fontColor(Color.Pink) .fontWeight(800)zh-cn_image_0000001511580828

在这里插入图片描述

  • 设置背景颜色。

添加backgroundColor属性设置按钮的背景颜色。

Button('background color').backgroundColor(0xF55A42)
ts
Button('background color').backgroundColor(0xF55A42)zh-cn_image_0000001562940477

在这里插入图片描述

  • 创建功能型按钮。

为删除操作创建一个按钮。

let MarLeft: Record<string, number> = { 'left': 20 }
Button({ type: ButtonType.Circle, stateEffect: true }) {Image($r('app.media.ic_public_delete_filled')).width(30).height(30)
}.width(55).height(55).margin(MarLeft).backgroundColor(0xF55A42)
ts
let MarLeft: Record<string, number> = { 'left': 20 }
Button({ type: ButtonType.Circle, stateEffect: true }) {Image($r('app.media.ic_public_delete_filled')).width(30).height(30)
}.width(55).height(55).margin(MarLeft).backgroundColor(0xF55A42)zh-cn_image_0000001511740436

在这里插入图片描述

添加事件

Button组件通常用于触发某些操作，可以绑定onClick事件来响应点击操作后的自定义行为。

Button('Ok', { type: ButtonType.Normal, stateEffect: true }) .onClick(()=>{ console.info('Button onClick') })
ts
Button('Ok', { type: ButtonType.Normal, stateEffect: true }) .onClick(()=>{ console.info('Button onClick') })

场景示例

  • 用于启动操作。

可以用按钮启动任何用户界面元素，按钮会根据用户的操作触发相应的事件。例如，在List容器里通过点击按钮进行页面跳转。

// xxx.ets
import router from '@ohos.router';
@Entry
@Component
struct ButtonCase1 {@State FurL:router.RouterOptions = {'url':'pages/first_page'}@State SurL:router.RouterOptions = {'url':'pages/second_page'}@State TurL:router.RouterOptions = {'url':'pages/third_page'}build() {List({ space: 4 }) {ListItem() {Button("First").onClick(() => {router.pushUrl(this.FurL)}).width('100%')}ListItem() {Button("Second").onClick(() => {router.pushUrl(this.SurL)}).width('100%')}ListItem() {Button("Third").onClick(() => {router.pushUrl(this.TurL)}).width('100%')}}.listDirection(Axis.Vertical).backgroundColor(0xDCDCDC).padding(20)}
}
ts
// xxx.ets
import router from '@ohos.router';
@Entry
@Component
struct ButtonCase1 {@State FurL:router.RouterOptions = {'url':'pages/first_page'}@State SurL:router.RouterOptions = {'url':'pages/second_page'}@State TurL:router.RouterOptions = {'url':'pages/third_page'}build() {List({ space: 4 }) {ListItem() {Button("First").onClick(() => {router.pushUrl(this.FurL)}).width('100%')}ListItem() {Button("Second").onClick(() => {router.pushUrl(this.SurL)}).width('100%')}ListItem() {Button("Third").onClick(() => {router.pushUrl(this.TurL)}).width('100%')}}.listDirection(Axis.Vertical).backgroundColor(0xDCDCDC).padding(20)}
}zh-cn_image_0000001562700393

在这里插入图片描述

  • 用于提交表单。

在用户登录/注册页面，使用按钮进行登录或注册操作。

// xxx.ets
@Entry
@Component
struct ButtonCase2 {build() {Column() {TextInput({ placeholder: 'input your username' }).margin({ top: 20 })TextInput({ placeholder: 'input your password' }).type(InputType.Password).margin({ top: 20 })Button('Register').width(300).margin({ top: 20 }).onClick(() => {// 需要执行的操作})}.padding(20)}
}
ts
// xxx.ets
@Entry
@Component
struct ButtonCase2 {build() {Column() {TextInput({ placeholder: 'input your username' }).margin({ top: 20 })TextInput({ placeholder: 'input your password' }).type(InputType.Password).margin({ top: 20 })Button('Register').width(300).margin({ top: 20 }).onClick(() => {// 需要执行的操作})}.padding(20)}
}zh-cn_image_0000001562940473

在这里插入图片描述

  • 悬浮按钮

在可以滑动的界面，滑动时按钮始终保持悬浮状态。

// xxx.ets
@Entry
@Component
struct HoverButtonExample {private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]build() {Stack() {List({ space: 20, initialIndex: 0 }) {ForEach(this.arr, (item:number) => {ListItem() {Text('' + item).width('100%').height(100).fontSize(16).textAlign(TextAlign.Center).borderRadius(10).backgroundColor(0xFFFFFF)}}, (item:number) => item.toString())}.width('90%')Button() {Image($r('app.media.ic_public_add')).width(50).height(50)}.width(60).height(60).position({x: '80%', y: 600}).shadow({radius: 10}).onClick(() => {// 需要执行的操作})}.width('100%').height('100%').backgroundColor(0xDCDCDC).padding({ top: 5 })}
}
ts
// xxx.ets
@Entry
@Component
struct HoverButtonExample {private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]build() {Stack() {List({ space: 20, initialIndex: 0 }) {ForEach(this.arr, (item:number) => {ListItem() {Text('' + item).width('100%').height(100).fontSize(16).textAlign(TextAlign.Center).borderRadius(10).backgroundColor(0xFFFFFF)}}, (item:number) => item.toString())}.width('90%')Button() {Image($r('app.media.ic_public_add')).width(50).height(50)}.width(60).height(60).position({x: '80%', y: 600}).shadow({radius: 10}).onClick(() => {// 需要执行的操作})}.width('100%').height('100%').backgroundColor(0xDCDCDC).padding({ top: 5 })}
}floating_button

在这里插入图片描述

如果大家还没有掌握鸿蒙，现在想要在最短的时间里吃透它，我这边特意整理了《鸿蒙语法ArkTS、TypeScript、ArkUI等…视频教程》以及《鸿蒙开发>鸿蒙开发学习手册》（共计890页），希望对大家有所帮助：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

鸿蒙语法ArkTS、TypeScript、ArkUI等…视频教程：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

在这里插入图片描述

OpenHarmony APP开发教程步骤：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

在这里插入图片描述

《鸿蒙开发>鸿蒙开发学习手册》：

如何快速入门：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

1.基本概念
2.构建第一个ArkTS应用
3.……
在这里插入图片描述

开发基础知识：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

1.应用基础知识
2.配置文件
3.应用数据管理
4.应用安全管理
5.应用隐私保护
6.三方应用调用管控机制
7.资源分类与访问
8.学习ArkTS语言
9.……
在这里插入图片描述

基于ArkTS 开发：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

1.Ability开发
2.UI开发
3.公共事件与通知
4.窗口管理
5.媒体
6.安全
7.网络与链接
8.电话服务
9.数据管理
10.后台任务(Background Task)管理
11.设备管理
12.设备使用信息统计
13.DFX
14.国际化开发
15.折叠屏系列
16.……
在这里插入图片描述

鸿蒙生态应用开发白皮书V2.0PDF：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

在这里插入图片描述


http://www.ppmy.cn/devtools/18294.html

相关文章

9.Godot数组|遍历|静态变量|对象|调试

9.Godot数组|遍历|静态变量|对象|调试

数组和字典的遍历 数组的概念 数组是一组数据的集合。在程序中负责批量处理数据。数组中的元素可以包括各个类型的数据&#xff0c;也可以对数组内数据类型进行限定。可以通过 数组名【数字】 的形式来访问数组元素&#xff0c;数字 0 代表数组的第一个元素。数组可以通过调用…
阅读更多...
Vue 3新特性解析

Vue 3新特性解析

Vue 3是Vue.js框架的最新版本&#xff0c;带来了一些重要的新特性和改进。以下是Vue 3的一些新特性解析&#xff1a; Composition API&#xff1a;Vue 3引入了Composition API&#xff0c;它提供了一种新的组织和重用组件逻辑的方式。通过Composition API&#xff0c;可以将相关…
阅读更多...
Spring AOP

Spring AOP

AOP即 Aspect Oriented Programming 面向切面编程。 切面指的是某一类特定的问题&#xff0c;面向切面编程即解决某一类问题&#xff0c;例如前面我们介绍的拦截器&#xff0c;统一数据返回&#xff0c;统一异常处理。 AOP 是一种思想&#xff0c;它的实现方法有很多&#xf…
阅读更多...
Python项目开发实战：怎么实现端口扫描器

Python项目开发实战：怎么实现端口扫描器

注意：本文的下载教程，与以下文章的思路有相同点，也有不同点，最终目标只是让读者从多维度去熟练掌握本知识点。 下载教程：Python项目开发实战_端口扫描器的实现_编程案例解析实例详解课程教程.pdf 1、步骤 在Python项目开发中，设计并实现一个端口扫描器是一项基础且实用的…
阅读更多...
K8s: 在Pod中将configmap数据注入容器

K8s: 在Pod中将configmap数据注入容器

configMap 概述 文档: https://kubernetes.io/zh-cn/docs/concepts/configuration/configmap/ Kubernetes 为我们提供了 ConfigMap&#xff0c;可以方便的配置一些变量 是一个存储键值对 key-value 对象的 创建一个可以包含多个键值对的 ConfigMap, 以下是&#xff1a;mul-c…
阅读更多...
【JavaEE多线程】线程中断 interrupt（）

【JavaEE多线程】线程中断 interrupt（）

系列文章目录 &#x1f308;座右铭&#x1f308;&#xff1a;人的一生这么长、你凭什么用短短的几年去衡量自己的一生&#xff01; &#x1f495;个人主页:清灵白羽 漾情天殇_计算机底层原理,深度解析C,自顶向下看Java-CSDN博客 ❤️相关文章❤️&#xff1a;清灵白羽 漾情天…
阅读更多...
Guitar Pro怎么循环某个段落 Guitar Pro怎么调整吉他谱段落间距

Guitar Pro怎么循环某个段落 Guitar Pro怎么调整吉他谱段落间距

在学习音乐的过程中&#xff0c;不断地重复听和练习是提高技能的关键。对于吉他手来说&#xff0c;利用专业的乐谱软件如Guitar Pro可以极大地辅助练习&#xff0c;尤其是在需要反复播放某个段落时。下面来看看Guitar Pro怎么循环某个段落&#xff0c;Guitar Pro怎么调整吉他谱…
阅读更多...
内网pth横向渗透思路笔记

内网pth横向渗透思路笔记

PTH 是 Pass the hash&#xff0c; 哈希传递攻击 的缩写。其原理是通过直接找到与账户相关的密码 Hash 值&#xff08;通常是 NTML Hash&#xff09;&#xff0c;由于域环境中&#xff0c;域管理员与本地管理员的账户大概率都是相同的&#xff0c;利用这种场景&#xff0c;使用…
阅读更多...
MySQL 8.0.23 临时表空间文件ibtmp1暴增原因及解决方法

MySQL 8.0.23 临时表空间文件ibtmp1暴增原因及解决方法

背景描述 同事反馈现场的MySQL8.0.23支撑库异常停止。分析发现是临时表空间过大撑爆了磁盘导致MySQL异常终止。 分析过程 查看MySQL版本 [rootsjjhpt182 mysql]# mysql -V mysql Ver 8.0.23 for Linux on x86_64 (MySQL Community Server - GPL) You have mail in /var/spool/m…
阅读更多...
vue3：组合式API和选项式API里分别如何使用store

vue3：组合式API和选项式API里分别如何使用store

vue3越来越主流了&#xff0c;但是很多人还不习惯vue3的组合式API写法&#xff0c;依旧喜欢用选项是API&#xff0c;但是很多功能的写法是不同的&#xff0c;比如我今天要分享的store写法。 我用的store是pinia。 选项式API&#xff08;script里不带setup&#xff09;的写法&…
阅读更多...
uniapp

uniapp

uniapp教程 uniapp项目新建 uniapp官网 新建Uniapp项目&#xff1a; 1. 2.
阅读更多...
鸿蒙OpenHarmony【轻量系统 编写“Hello World”程序】 （基于Hi3861开发板）

鸿蒙OpenHarmony【轻量系统 编写“Hello World”程序】 （基于Hi3861开发板）

编写“Hello World”程序 下方将通过修改源码的方式展示如何编写简单程序&#xff0c;输出“Hello world”。请在下载的源码目录中进行下述操作。 确定目录结构。 开发者编写业务时&#xff0c;务必先在./applications/sample/wifi-iot/app路径下新建一个目录&#xff08;或一…
阅读更多...
Java数据结构-二叉树

Java数据结构-二叉树

目录 1. 树与二叉树1.1 树1.2 二叉树1.3 树的相关概念1.4 特殊的二叉树1.5 二叉树性质1.6 二叉树的存储与表示方法 2. 二叉树遍历2.1 前序遍历2.2 中序遍历2.3 后序遍历2.4 层序遍历 3. 二叉树基本操作3.1 求树的所有结点个数3.2 求叶子结点个数3.3 求第k层结点个数3.4 求二叉树…
阅读更多...
【FineBI】强大处理、分析和可视化数据的工具

【FineBI】强大处理、分析和可视化数据的工具

文章目录 前言功能丰富的数据处理深入的数据分析交互式的数据可视化协作与共享无缝的集成 总结 前言 在当今数据驱动的商业环境中&#xff0c;企业需要强大的工具来处理、分析和可视化数据&#xff0c;以便做出更明智的决策。FineBI就是这样一个工具&#xff0c;它是一个全面的…
阅读更多...
JDK版本不对报错---警告: 源发行版 11 需要目标发行版 11

JDK版本不对报错---警告: 源发行版 11 需要目标发行版 11

文章目录 一、引言二、问题场景三、问题解决3.1 将项目的源发行版改为版本83.2 将项目的编译后的字节码从版本11变为版本8 四、结束 一、引言 由于目前JDK版本的更新差异较大,尤其是11之后,和旧版本大多不兼容,所以使用新版本JDK写的项目,使用旧版本JDK编译就可能报错 二、问…
阅读更多...
多输入多输出 | Matlab实现WOA-LSSVM鲸鱼算法优化最小二乘支持向量机多输入多输出预测

多输入多输出 | Matlab实现WOA-LSSVM鲸鱼算法优化最小二乘支持向量机多输入多输出预测

多输入多输出 | Matlab实现WOA-LSSVM鲸鱼算法优化最小二乘支持向量机多输入多输出预测 目录 多输入多输出 | Matlab实现WOA-LSSVM鲸鱼算法优化最小二乘支持向量机多输入多输出预测预测效果基本介绍程序设计往期精彩参考资料 预测效果 基本介绍 Matlab实现WOA-LSSVM鲸鱼算法优化…
阅读更多...
2024-04-23 问AI: 在深度学习中，介绍一下u-net模型。

2024-04-23 问AI: 在深度学习中，介绍一下u-net模型。

文心一言 U-Net模型是一种在深度学习中广泛应用的卷积神经网络结构&#xff0c;主要用于图像分割任务。这种模型最初在生物医学图像处理中得到了广泛应用&#xff0c;但由于其高效且可靠的性能&#xff0c;U-Net也逐渐被用于遥感图像分割等领域。 U-Net模型的结构对称&#x…
阅读更多...
Arcpy入门学习笔记（二）：脚本工具

Arcpy入门学习笔记（二）：脚本工具

Arcpy入门学习笔记&#xff08;二&#xff09;&#xff1a;脚本工具 主要介绍Arcpy脚本工具制作 文章目录 Arcpy入门学习笔记&#xff08;二&#xff09;&#xff1a;脚本工具Arcpy语法速查Arcpy脚本常用代码包的导入获取工具箱参数环境设置工具箱输出 脚本工具制作准备好py文…
阅读更多...
kafka 命令行使用 消息的写入和读取 quickstart

kafka 命令行使用 消息的写入和读取 quickstart

文章目录 Intro命令日志zookeeper serverkafka servercreate topic && describe topic Intro Kafka在大型系统中可用作消息通道&#xff0c;一般是用程序语言作为客户端去调用kafka服务。 不过在这之前&#xff0c;可以先用下载kafka之后就包含的脚本文件等&#xff0…
阅读更多...
Linux下载及安装OpenSSL

Linux下载及安装OpenSSL

文章目录 前言一、OpenSSL下载二、OpenSSL安装1.上传下载好的安装包到服务器2.解压3.切换目录4.配置config5.编译6.安装7.备份旧版本OpenSSL7.创建软链接8.添加OpenSSL动态链接库9.更新库缓存10.查看OpenSSL版本验证安装是否成功 前言 一般系统会自带有OpenSSL&#xff0c;我们…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站