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

  1. 胶囊类型

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

  1. 圆形类型

    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绘制能力,为开发者准备了很多便捷的属性功能,本文仅仅展示其冰山一角,更好丰富好玩的实现,需要动手实现,还不会的小伙伴快动手试试吧!

相关推荐
2501_919749036 小时前
鸿蒙:使用Emitter进行线程间通信
华为·harmonyos
SuperHeroWu78 小时前
【HarmonyOS 6】仿AI唤起屏幕边缘流光特效
华为·harmonyos·特效·鸿蒙6.0·流光·ai唤起·屏幕边缘
gcios9 小时前
鸿蒙-flutter 混合开发
harmonyos
特立独行的猫a9 小时前
HarmonyOS应用开发之界面列表不刷新问题Bug排查记:从现象到解决完整记录
华为·bug·harmonyos·ui刷新
安卓开发者10 小时前
鸿蒙Next的UI国际化与无障碍适老化实践:构建全球包容的数字世界
ui·华为·harmonyos
云天徽上15 小时前
【数据可视化-106】华为2025上半年财报分析:用Python和Pyecharts打造炫酷可视化大屏
开发语言·python·华为·信息可视化·数据分析·pyecharts
爱笑的眼睛111 天前
深入剖析 HarmonyOS ArkUI 声明式开发:状态管理艺术与最佳实践
华为·harmonyos
花先锋队长1 天前
为何三折叠手机只有华为可以?看华为Mate XTs非凡大师就知道
华为·智能手机
安卓开发者1 天前
鸿蒙NEXT交互机制解析:从输入设备到手势响应的全面指南
microsoft·交互·harmonyos
奶糖不太甜。1 天前
鸿蒙分布式数据同步失败全解
分布式·华为·harmonyos·数据同步