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

举报
IT小码哥 发表于 2025/05/28 09:22:59 2025/05/28
200 0 0
【摘要】 简介HarmonyOS在明年将正式不再兼容Android原生功能,这意味着对于客户端的小伙伴不得不开始学习HarmonyOS开发语言。本篇文章主要介绍鸿蒙中的Button使用。HarmonyOS中的Button相较于Android原生来说,功能比较丰富,扩展性高,减少了开发者的代码数量,简化了使用方式。不仅可以自定义圆角还支持三种样式。 常用属性名称参数类型描述typeButtonType设...

简介

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:"我被点击了"})
      })

image1-1.jpeg

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

image1-2.jpeg

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

image1-3.jpeg

扩展功能

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

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

代码如下:

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

实现效果如下:

image1-4.jpeg

总结

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

【声明】本内容来自华为云开发者社区博主,不代表华为云及华为云开发者社区的观点和立场。转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息,否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

作者其他文章

评论(0

抱歉,系统识别当前为高风险访问,暂不支持该操作

    全部回复

    上滑加载中

    设置昵称

    在此一键设置昵称,即可参与社区互动!

    *长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

    *长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。