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

简介: 本文介绍HarmonyOS中的Button使用,随着HarmonyOS明年不再兼容Android原生功能,学习其开发语言变得重要。相比Android,HarmonyOS的Button功能更丰富、扩展性更高,支持三种样式(普通、胶囊、圆形)及自定义样式,减少代码量并简化使用方式。常用属性包括type、backgroundColor、fontSize等,构造函数灵活配置。文章通过示例展示了如何实现带图片和文字的自定义Button,体现了HarmonyOS强大的UI绘制能力和便捷性。

简介

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

目录
相关文章
|
1月前
|
容器
45.[HarmonyOS NEXT RelativeContainer案例二] 精确控制组件间距:外边距在相对布局中的高级应用
在HarmonyOS NEXT的UI开发中,组件之间的间距控制对于创建美观、易用的界面至关重要。RelativeContainer不仅提供了强大的锚点定位系统,还可以结合外边距(margin)属性实现更精细的布局控制。本教程将详细讲解如何在RelativeContainer中巧妙运用外边距,帮助你掌握这一实用技巧。
81 29
|
1月前
|
开发者 容器
44.[HarmonyOS NEXT RelativeContainer案例一] 掌握组件锚点布局:打造灵活精准的UI定位系统
在HarmonyOS NEXT的UI开发中,精确控制组件位置是构建复杂界面的关键。RelativeContainer作为一种强大的布局容器,通过锚点系统提供了精确定位能力,使开发者能够创建出灵活且精准的UI布局。本教程将详细讲解如何使用RelativeContainer的锚点布局功能,帮助你掌握这一核心技术。
58 4
|
1月前
|
UED 容器
43.[HarmonyOS NEXT Row案例十一] 构建智能分页控件:Row组件实现页码与翻页按钮的完美结合
分页控件是数据展示类应用中不可或缺的导航元素,它允许用户在大量数据中进行有序浏览。本教程将详细讲解如何使用HarmonyOS NEXT的Row组件创建一个功能完善的分页控件,实现页码显示与前后翻页按钮的完美结合。 分页控件在各类应用场景中广泛应用,如电子商城的商品列表、新闻应用的文章列表、图库应用的图片浏览等。通过合理的设计和交互,可以提升用户的浏览体验和数据访问效率。
62 3
|
1月前
|
数据库 开发者 UED
37.[HarmonyOS NEXT Row案例五] 构建智能聊天气泡:Row组件的reverse属性妙用
在即时通讯应用中,聊天气泡是一个核心UI元素,它需要能够区分发送方和接收方的消息,并以不同的样式和位置显示。本教程将详细讲解如何使用HarmonyOS NEXT的Row组件创建反向排列的消息气泡,重点介绍reverse属性的巧妙应用,帮助开发者构建出专业、美观的聊天界面。
58 3
|
1月前
|
API 开发者 索引
HarmonyOS API 15 新晋导航点组件Indicator详解
本节介绍HarmonyOS API 15新增的导航点组件Indicator的特性和用法,支持圆点和数字两种导航样式。示例基于DevEco Studio 5.0.5,展示如何不依赖Swiper组件独立显示导航点。通过IndicatorComponentController控制翻页,设置初始索引、样式、循环、总数及方向等属性,并处理索引变化事件。代码示例详细解析各属性与事件的功能,适用于API Version 15及以上版本,支持ArkTS卡片和元服务使用。源码托管于《跟老卫学HarmonyOS开发》GitHub仓库。
32 1
|
1月前
|
开发者 UED 容器
33.[HarmonyOS NEXT Row案例一(下)] 深入理解Row组件与按钮组布局技巧
在上一篇教程中,我们介绍了如何使用Row组件创建水平排列的功能按钮组,并讲解了基础间距与对齐的设置方法。本篇教程将深入探讨Row组件的高级特性、布局技巧以及在实际应用中的最佳实践,帮助开发者更好地掌握HarmonyOS NEXT的水平布局能力。
58 1
|
25天前
|
开发者 容器
HarmonyOS Next快速入门:Button组件
本教程摘自《HarmonyOS Next快速入门》,聚焦HarmonyOS应用开发中的Button组件。Button支持胶囊、圆形和普通三种类型,可通过子组件实现复杂功能,如嵌入图片或文字。支持自定义样式(边框弧度、文本样式、背景色等)及点击事件处理。示例代码展示了不同类型按钮的创建与交互逻辑,助开发者快速上手。适合HarmonyOS初学者及对UI组件感兴趣的开发者学习。
71 0
|
25天前
|
开发者
HarmonyOS Next快速入门:Image组件
本教程摘自《HarmonyOS Next快速入门》,专注于HarmonyOS应用开发中的Image组件使用。Image组件支持多种图片格式(如png、jpg、svg等),可渲染本地资源、网络图片、媒体库文件及PixelMap像素图。通过设置`objectFit`属性,实现不同缩放类型;利用`fillColor`属性调整矢量图颜色。示例代码涵盖本地、网络及资源图片的加载与样式设置,同时需在`module.json5`中声明网络权限以加载外部资源。适合开发者快速掌握HarmonyOS图像展示功能。
84 0
|
1月前
|
监控 JavaScript 前端开发
🎉 Harmony OS Next里的Web组件:网页加载的全流程掌控手册
本文详细解析了Harmony OS Next中ArkUI Web组件的九大生命周期回调,帮助开发者全面掌控网页加载流程。从组件初始化到加载完成,再到异常处理与性能优化,每个阶段都配有具体代码示例和注意事项。内容涵盖关键回调(如aboutToAppear、onPageBegin)的使用场景、网页加载进度监控(FCP/FMP/LCP)、以及前端页面优化实践。通过本文,开发者可以高效管理网页加载过程,提升应用性能与用户体验。
74 0
|
1月前
|
API UED 开发者
Harmony OS Next玩转多层级手势事件:当组件遇上“套娃”,触摸该怎么分家?
在HarmonyOS开发中,处理多层级手势事件是一项挑战,尤其在“组件套组件”的复杂布局下。本文深入探讨了触摸事件的基础原理、父子组件间的手势竞争规则以及如何通过`responseRegion`和`hitTestBehavior`等属性自定义触摸分发逻辑。同时介绍了`.gesture()`、`.priorityGesture()`和`.parallelGesture()`三种手势绑定方法,帮助开发者灵活调整手势优先级。掌握这些技巧,可精准控制复杂交互中的触摸行为,提升用户体验。
45 0