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})

按钮类型

1. 普通类型

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

2. 胶囊类型

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

3. 圆形类型

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

扩展功能

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

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

代码如下：

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

实现效果如下：

总结

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

为了能让大家更好的学习鸿蒙 (Harmony OS) 开发技术，这边特意整理了《鸿蒙 (Harmony OS)开发学习手册》（共计890页），希望对大家有所帮助：https://qr21.cn/FV7h05

《鸿蒙 (Harmony OS)开发学习手册》

入门必看

1. 应用开发导读(ArkTS)
2. 应用开发导读(Java)

HarmonyOS 概念：https://qr21.cn/FV7h05

1. 系统定义
2. 技术架构
3. 技术特性
4. 系统安全

如何快速入门

1. 基本概念
2. 构建第一个ArkTS应用
3. 构建第一个JS应用
4. ……

开发基础知识：https://qr21.cn/FV7h05

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

**基于ArkTS 开发：https://qr21.cn/FV7h05 **

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