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

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

简介

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

常用属性

• Circle：圆形按钮。
• Normal：普通按钮（默认不带圆角）。 |
  | backgroundColor | ResourceColor | 背景色 |
  | fontSize | number | 文字大小 |
  | fontWeight | FontWeight | 设置字体粗细 |
  | stateEffect | boolean | 是否开启点击效果 |

构造函数

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

按钮类型

普通类型

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

胶囊类型

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

圆形类型

  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绘制能力，为开发者准备了很多便捷的属性功能，本文仅仅展示其冰山一角，更好丰富好玩的实现，需要动手实现。

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

喜欢 (0)赏

【请潘老师喝杯Coffee吧！】

分享 (0)