HarmonyOS基础组件之Button三种类型的使用

简介

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

常用属性

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

构造函数

css 复制代码
Button(options?: {type?: ButtonType, stateEffect?: boolean})

按钮类型

  1. 普通类型
less 复制代码
  Button("我是普通类型按鈕",{type:Normal}).onClick(()=>{
        promptAction.showToast({message:"我被点击了"})
      })
  1. 胶囊类型
css 复制代码
  Button("我是胶囊类型按鈕",{type:Capsule}).onClick(()=>{
        promptAction.showToast({message:"我被点击了"})
      })
  1. 圆形类型
css 复制代码
  Button("我是圆形类型按鈕",{type:Capsule}).onClick(()=>{
        promptAction.showToast({message:"我被点击了"})
      })

扩展功能

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

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

代码如下:

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

实现效果如下:

总结

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

相关推荐
夏天想2 分钟前
vue2+elementui使用compressorjs压缩上传的图片
前端·javascript·elementui
今晚打老虎z10 分钟前
dotnet-env: .NET 开发者的环境变量加载工具
前端·chrome·.net
用户38022585982416 分钟前
vue3源码解析:diff算法之patchChildren函数分析
前端·vue.js
烛阴21 分钟前
XPath 进阶:掌握高级选择器与路径表达式
前端·javascript
小鱼小鱼干24 分钟前
【JS/Vue3】关于Vue引用透传
前端
JavaDog程序狗26 分钟前
【前端】HTML+JS 实现超燃小球分裂全过程
前端
独立开阀者_FwtCoder31 分钟前
URL地址末尾加不加 "/" 有什么区别
前端·javascript·github
丶皮蛋菌32 分钟前
关于OC与Swift内存管理的解惑
ios
独立开阀者_FwtCoder34 分钟前
Vue3 新特性:原来watch 也能“暂停”和“恢复”了!
前端·javascript·github
snakeshe101035 分钟前
优化 Mini React:实现组件级别的精准更新
前端