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

HarmonyOS基础组件之Button三种类型的使用_第1张图片

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

HarmonyOS基础组件之Button三种类型的使用_第2张图片

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

HarmonyOS基础组件之Button三种类型的使用_第3张图片

扩展功能

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

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

代码如下:

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

实现效果如下:

HarmonyOS基础组件之Button三种类型的使用_第4张图片

总结

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

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

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

入门必看

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

HarmonyOS基础组件之Button三种类型的使用_第5张图片

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

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

HarmonyOS基础组件之Button三种类型的使用_第6张图片

如何快速入门

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

HarmonyOS基础组件之Button三种类型的使用_第7张图片

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

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

HarmonyOS基础组件之Button三种类型的使用_第8张图片

**基于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. ……

HarmonyOS基础组件之Button三种类型的使用_第9张图片

你可能感兴趣的:(鸿蒙,移动开发,Harmony,OS,harmonyos,华为,移动开发,ArkTS)