【鸿蒙软件开发】ArkTS基础组件之Gauge(环形图表)、LoadingProgress(动态加载)

简介: 【鸿蒙软件开发】ArkTS基础组件之Gauge(环形图表)、LoadingProgress(动态加载)

前言


Gauge:数据量规图表组件,用于将数据展示为环形图表。

LoadingProgress:用于显示加载动效的组件。


一、Gauge环形图表


1.1 子组件


1.2 接口

Gauge的接口函数原型如下:

Gauge(options:{value: number, min?: number, max?: number})


36ffc41632cd48afbf00eefb7eaf1e55.png

从API version 9开始,该接口支持在ArkTS卡片中使用。

参数介绍

下面分别为:参数名,参数类型,是否必填,参数描述

参数:value,number,是,量规图的当前数据值,即图中指针指向位置。用于组件创建时量规图初始值的预置。

说明:value不在min和max范围内时使用min作为默认值。


参数:min,number,否,当前数据段最小值。默认值:0


参数:max,number,否,当前数据段最大值。,默认值:100

说明:max小于min时使用默认值0和100。max和min支持负数。


1.2 属性

除支持通用属性外,还支持以下属性:

他们属性分别是:名称,参数类型,描述

value,number,设置量规图的数据值,可用于动态修改量规图的数据值。默认值:0(要注意的是:参数和属性都是可以设置value属性值的)从API version 9开始,该接口支持在ArkTS卡片中使用。


startAngle,number,设置起始角度位置,时钟0点为0度,顺时针方向为正角度。默认值:0从API version 9开始,该接口支持在ArkTS卡片中使用。


endAngle,number,设置终止角度位置,时钟0点为0度,顺时针方向为正角度。默认值:360。从API version 9开始,该接口支持在ArkTS卡片中使用。


colors,Array,设置量规图的颜色,支持分段颜色设置。默认值:Color.Black从API version 9开始,该接口支持在ArkTS卡片中使用。


strokeWidth,Length,设置环形量规图的环形厚度。默认值:4,单位:vp

从API version 9开始,该接口支持在ArkTS卡片中使用。

说明:设置小于0的值时,按默认值显示。不支持百分比。


1.3 示例代码

// xxx.ets
@Entry
@Component
struct GaugeExample {
  build() {
    Column({ space: 20 }) {
      // 使用默认的min和max为0-100,角度范围默认0-360,value值设置
      // 参数中设置当前值为75
      Gauge({ value: 75 })
        .width(200).height(200)
        .colors([[0x317AF7, 1], [0x5BA854, 1], [0xE08C3A, 1], [0x9C554B, 1]])
      // 参数设置当前值为75,属性设置值为25,属性设置优先级高
      Gauge({ value: 75 })
        .value(25) // 属性和参数都设置时以属性为准
        .width(200).height(200)
        .colors([[0x317AF7, 1], [0x5BA854, 1], [0xE08C3A, 1], [0x9C554B, 1]])
      // 210--150度环形图表
      Gauge({ value: 30, min: 0, max: 100 })
        .startAngle(210)
        .endAngle(150)
        .colors([[0x317AF7, 0.1], [0x5BA854, 0.2], [0xE08C3A, 0.3], [0x9C554B, 0.4]])
        .strokeWidth(20)
        .width(200)
        .height(200)
    }.width('100%').margin({ top: 5 })
  }
}


f6b8c520d40e4195bd3099b47edee254.png

效果图如下:

397c3b9606d84882b9793569ef3f2e5c.png


二、LoadingProgress


用于显示加载动效的组件。

说明

该组件从API Version 8开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。


2.1 子组件


2.2 接口

该函数原型非常简单,无参数

LoadingProgress()


90e67bbb2dfc4cd7bb630bcbd248516e.png

创建加载进展组件。

从API version 9开始,该接口支持在ArkTS卡片中使用。


2.3 属性

他只有一个color属性,其类型为ResourceColor

他用于设置加载进度条前景色。


看下面对比:

1、无color属性

71877a284d6842a29b37ab4452bfaf7a.png

2、有前景属性,颜色为Blue

946d440ff62a48c4930a6986037ee88e.png

上面便是LoadingProgress的前景颜色的详解了!!!

从API version 9开始,该接口支持在ArkTS卡片中使用。


2.4 示例代码

// xxx.ets
@Entry
@Component
struct LoadingProgressExample {
  build() {
    Column({ space: 5 }) {
      Text('Orbital LoadingProgress ').fontSize(9).fontColor(0xCCCCCC).width('90%')
      LoadingProgress()
        .color(Color.Blue)
    }.width('100%').margin({ top: 5 })
  }
}


ea26f42b33044407a8b4e7cea0f9a214.png


总结


Gauge:数据量规图表组件,用于将数据展示为环形图表。

LoadingProgress:用于显示加载动效的组件。

我们需要掌握这些,开发出更好的鸿蒙ArkTS界面效果。

相关文章
|
18天前
|
人工智能 物联网 Android开发
【04】优雅草星云物联网AI智控系统从0开发鸿蒙端适配-deveco studio-自定义一个设置输入小部件组件-完成所有设置setting相关的页面-优雅草卓伊凡
【04】优雅草星云物联网AI智控系统从0开发鸿蒙端适配-deveco studio-自定义一个设置输入小部件组件-完成所有设置setting相关的页面-优雅草卓伊凡
154 92
|
18天前
|
前端开发 API 开发者
harmonyOS基础- 快速弄懂HarmonyOS ArkTs基础组件、布局容器(前端视角篇)
本文由黑臂麒麟(6年前端经验)撰写,介绍ArkTS开发中的常用基础组件与布局组件。基础组件包括Text、Image、Button等,支持样式设置如字体颜色、大小和加粗等,并可通过Resource资源引用统一管理样式。布局组件涵盖Column、Row、List、Grid和Tabs等,支持灵活的主轴与交叉轴对齐方式、分割线设置及滚动事件监听。同时,Tabs组件可实现自定义样式与页签切换功能。内容结合代码示例,适合初学者快速上手ArkTS开发。参考华为开发者联盟官网基础课程。
67 18
harmonyOS基础- 快速弄懂HarmonyOS ArkTs基础组件、布局容器(前端视角篇)
|
19天前
|
数据管理 API 开发者
HarmonyOS:ArkTS RowSplit 组件自学指南
在 ArkTS 开发中,复杂界面布局需求常见,尤其需要灵活调整子组件宽度时,传统方式难以满足动态交互需求。`RowSplit` 组件解决了这一问题,支持横向布局并插入可拖动的分割线,让用户轻松调整子组件宽度,提升体验。本文详细介绍了 `RowSplit` 的功能、接口、属性及使用示例,帮助开发者掌握其用法,并总结了注意事项。通过合理配置,可实现灵活美观的布局效果。希望对您有帮助,欢迎关注、点赞和收藏!
68 31
|
8天前
|
缓存 开发工具 开发者
鸿蒙NEXT开发App相关工具类(ArkTs)
这段代码展示了一个名为鸿蒙NEXT开发 `AppUtil` 的工具类,主要用于管理鸿蒙应用的上下文、窗口、状态栏、导航栏等配置。它提供了多种功能,例如设置灰阶模式、颜色模式、字体类型、屏幕亮度、窗口属性等,并支持获取应用包信息(如版本号、包名等)。该工具类需在 UIAbility 的 `onWindowStageCreate` 方法中初始化,以便缓存全局变量。代码由鸿蒙布道师编写,适用于鸿蒙系统应用开发,帮助开发者更便捷地管理和配置应用界面及系统属性。
|
19天前
|
开发者 容器
HarmonyOS NEXT - @Component自定义组件
在ArkUI中,组件是构成UI的基本单元,分为系统组件和自定义组件。自定义组件通过封装UI与业务逻辑,提升代码复用性和可维护性。其特点包括可组合、可重用及数据驱动UI更新。定义时使用`@Component`装饰器修饰struct,并实现`build()`函数描述UI。可通过`@Entry`标记为页面入口,或用`@Reusable`增强复用能力。成员函数和变量默认私有,状态管理需遵循特定规则。 示例代码展示了通过自定义组件`Home`和`Person`模块化开发UI页面的过程,结合`Tabs`实现多页面切换功能。
62 10
|
19天前
|
API 开发者 UED
HarmonyOS:ComposeTitleBar 组件自学指南
本文详解了鸿蒙开发中 ComposeTitleBar 组件的使用方法与技巧,从基础导入到属性配置,再到实际代码示例,帮助开发者构建美观实用的标题栏。组件自 API Version 10 起支持,具备独立功能结构,核心属性包括 `title`(必填)、`subtitle`(可选)和 `menuItems`(右侧菜单列表)。文章通过具体示例展示了如何配置标题、副标题及菜单项,并提供了交互优化、样式定制与多设备适配的建议。掌握这些内容,可显著提升应用界面体验。如果你有所收获,别忘了点赞收藏!
38 8
|
19天前
|
前端开发
鸿蒙开发:使用Rect绘制矩形
几何矩形,在实际的开发中,有多种的实现方式,并非一定需要Rect组件,但是,如果有需要用到矩形的场景,建议还是使用Rect组件,因为Rect组件自身携带了很多样式属性,可以满足我们日常的不同的需求。
鸿蒙开发:使用Rect绘制矩形
|
18天前
|
人工智能 物联网 Android开发
【03】优雅草星云物联网AI智控系统从0开发鸿蒙端适配-deveco studio-在lib目录新建自定义库UtilsLibrary,ComponentLibrary,CommonConstLibrary完成设置SettingsView.ets初始公共类书写-优雅草卓伊凡
【03】优雅草星云物联网AI智控系统从0开发鸿蒙端适配-deveco studio-在lib目录新建自定义库UtilsLibrary,ComponentLibrary,CommonConstLibrary完成设置SettingsView.ets初始公共类书写-优雅草卓伊凡
60 23
【03】优雅草星云物联网AI智控系统从0开发鸿蒙端适配-deveco studio-在lib目录新建自定义库UtilsLibrary,ComponentLibrary,CommonConstLibrary完成设置SettingsView.ets初始公共类书写-优雅草卓伊凡
|
20天前
|
存储 调度 开发者
HarmonyOS Next 实战卡片开发 03
本文详细介绍了基于 HarmonyOS Next 的卡片开发实战,涵盖从项目创建到功能实现的全流程。首先通过新建项目和服务卡片搭建基础框架,并设置沉浸式体验优化界面。接着实现了首页轮播图功能,包括申请网络权限、初始化数据和构建轮播组件。随后深入讲解了卡片 id 的处理,涉及获取、返回、持久化存储及移除操作,确保卡片与应用间的高效通信。此外,封装了下载图片工具类,支持卡片发起通知获取网络图片,增强功能扩展性。最后实现了卡片同步轮播功能,使首页与卡片轮播状态保持一致。整个流程注重细节,结合实际案例,为开发者提供了全面的参考。
64 20
HarmonyOS Next 实战卡片开发 03
|
18天前
|
存储 人工智能 物联网
【02】优雅草星云物联网AI智控系统从0开发鸿蒙端适配-deveco studio-登录页面LoginView.ets完成-并且详细解释关于arkui关于 CommonConst, commonColor, InputDataModel-优雅草卓伊凡
【02】优雅草星云物联网AI智控系统从0开发鸿蒙端适配-deveco studio-登录页面LoginView.ets完成-并且详细解释关于arkui关于 CommonConst, commonColor, InputDataModel-优雅草卓伊凡
48 14
【02】优雅草星云物联网AI智控系统从0开发鸿蒙端适配-deveco studio-登录页面LoginView.ets完成-并且详细解释关于arkui关于 CommonConst, commonColor, InputDataModel-优雅草卓伊凡

热门文章

最新文章