软件教程 2025年08月6日
0 收藏 0 点赞 217 浏览 1233 个字
摘要 :

文章目录 简介 常用属性 构造函数 按钮类型 普通类型 胶囊类型 圆形类型 扩展功能 总结 本文主要讲解关于HarmonyOS基础组件:三种Button类型使用相关内容,让我们来一……




  • 简介
  • 常用属性
  • 构造函数
  • 按钮类型
    • 普通类型
    • 胶囊类型
    • 圆形类型
  • 扩展功能
  • 总结

本文主要讲解关于HarmonyOS基础组件:三种Button类型使用相关内容,让我们来一起学习下吧!

简介

HarmonyOS在明年将正式不再兼容Android原生功能,这意味着对于客户端的小伙伴不得不开始学习HarmonyOS开发语言。本篇文章主要介绍鸿蒙中的三种Button使用。
HarmonyOS中的Button相较于Android原生来说,功能比较丰富,扩展性高,减少了开发者的代码数量,简化了使用方式。不仅可以自定义圆角还支持三种样式。

常用属性

名称 参数类型 描述
type ButtonType 设置按钮样式- Capsule:胶囊型按钮(圆角默认为高度的一半)。
  • Circle:圆形按钮。
  • Normal:普通按钮(默认不带圆角)。 |
    | backgroundColor | ResourceColor | 背景色 |
    | fontSize | number | 文字大小 |
    | fontWeight | FontWeight | 设置字体粗细 |
    | stateEffect | boolean | 是否开启点击效果 |

构造函数

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

按钮类型

普通类型

  Button(\"我是普通类型按鈕\",{type:Normal}).onClick(()=>{
        promptAction.showToast({message:\"我被点击了\"})
      })

HarmonyOS基础组件:三种Button类型使用详解

胶囊类型

  Button(\"我是胶囊类型按鈕\",{type:Capsule}).onClick(()=>{
        promptAction.showToast({message:\"我被点击了\"})
      })

HarmonyOS基础组件:三种Button类型使用详解

圆形类型

  Button(\"我是圆形类型按鈕\",{type:Capsule}).onClick(()=>{
        promptAction.showToast({message:\"我被点击了\"})
      })

HarmonyOS基础组件:三种Button类型使用详解

扩展功能

HarmonyOS提供的Button不仅支持普通类型,胶囊类型,圆形类型三种样式,还支持自定义样式,扩展能力更强,更简单。

下面实现一个带图片和文字的Button的效果,如果使用Android原生来实现,一般使用布局控件包裹Image和Text来实现,在鸿蒙系统中,可以直接使用Button来实现。

代码如下:

 Button(){
        Row(){
          Image($r(\"app.media.app_icon\")).width(30).height(30)
          Text(\"我是自定义Button\")
        }.padding(10)
      }

实现效果如下:HarmonyOS基础组件:三种Button类型使用详解

总结

HarmonyOS系统提供了强大的UI绘制能力,为开发者准备了很多便捷的属性功能,本文仅仅展示其冰山一角,更好丰富好玩的实现,需要动手实现。

以上就是关于HarmonyOS基础组件:三种Button类型使用详解相关的全部内容,希望对你有帮助。欢迎持续关注潘子夜个人博客,学习愉快哦!

微信扫一扫

支付宝扫一扫

版权: 转载请注明出处:https://www.zuozi.net/6548.html

管理员

相关推荐
2025-08-06

文章目录 一、Promise基础回顾 二、Promise 与 axios 结合使用场景及方法 (一)直接返回 axios …

269
2025-08-06

文章目录 一、模块初始化时的内部机制 二、常见导出写法的差异分析 (一)写法一:module.exports…

107
2025-08-06

文章目录 一、ResizeObserver详解 (一)ResizeObserver是什么 (二)ResizeObserver的基本用法 …

683
2025-08-06

文章目录 一、前期准备工作 (一)下载相关文件 (二)安装必要工具 二、处理扣子空间生成的文件…

338
2025-08-06

文章目录 一、官方文档 二、自动解包的数据类型 ref对象:无需.value即可访问 reactive对象:保持…

371
2025-08-06

文章目录 一、Hooks的工作原理 二、在if语句中使用Hook会出什么岔子? 三、React官方的Hook使用规…

843
发表评论
暂无评论

还没有评论呢,快来抢沙发~

助力内容变现

将您的收入提升到一个新的水平

点击联系客服

在线时间:08:00-23:00

客服QQ

122325244

客服电话

400-888-8888

客服邮箱

122325244@qq.com

扫描二维码

关注微信客服号