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绘制能力,为开发者准备了很多便捷的属性功能,本文仅仅展示其冰山一角,更好丰富好玩的实现,需要动手实现,还不会的小伙伴快动手试试吧!
- 0回答
- 0粉丝
- 0关注
- Harmony OS Next手势组合全攻略!三种模式玩转交互设计
- 【HarmonyOS NEXT】如何给未知类型对象定义类型并使用递归打印所有的Key
- Button组件无法设置字体最大、最小值
- OpenHarmony: 创建线程的3种方式
- 【HarmonyOS NEXT】ArkTs数据类型解析与使用
- 115.HarmonyOS NEXT 跑马灯组件详解(三):MarqueeSection基础结构
- LoadingProgress组件的使用##HarmonyOS应用开发##
- 16.[HarmonyOS NEXT Column案例一(上)] 使用Column组件构建垂直表单布局的基础指南
- 【HarmonyOS】HMRouter使用详解(三)生命周期
- 「Mac玩转仓颉内测版22」基础篇2 - 基础数据类型简述
- 「Mac畅玩鸿蒙与硬件 11」鸿蒙UI组件篇1 - Text和Button组件详解
- (六一)ArkCompiler 的高级类型推导:静态与动态类型推导的结合及提升代码类型安全性
- ArkTS第三方库的语法与使用详解
- 「Mac玩转仓颉内测版24」基础篇4 - 浮点类型详解
- 「Mac玩转仓颉内测版25」基础篇5 - 布尔类型详解