【鸿蒙软件开发】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界面效果。

目录
打赏
0
0
0
0
60
分享
相关文章
一文轻松拿下HarmonyOS NEXT的自定义组件
本文介绍ArkUI中的自定义组件开发,涵盖基础概念、语法格式、创建与使用方法、成员函数/变量定义及通用样式事件设置等内容。通过实例代码演示,帮助开发者掌握自定义组件的构建与复用技巧,助力高效开发。君志所向,一往无前!希望在成长的路上有你相伴。
30 7
【04】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-正确安装鸿蒙SDK-结构目录介绍-路由介绍-帧动画(ohos.animator)书写介绍-能够正常使用依赖库等-ArkUI基础组件介绍-全过程实战项目分享-从零开发到上线-优雅草卓伊凡
【04】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-正确安装鸿蒙SDK-结构目录介绍-路由介绍-帧动画(ohos.animator)书写介绍-能够正常使用依赖库等-ArkUI基础组件介绍-全过程实战项目分享-从零开发到上线-优雅草卓伊凡
52 5
【04】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-正确安装鸿蒙SDK-结构目录介绍-路由介绍-帧动画(ohos.animator)书写介绍-能够正常使用依赖库等-ArkUI基础组件介绍-全过程实战项目分享-从零开发到上线-优雅草卓伊凡
HarmonyOS NEXT开发-ArkTS五
本文介绍了ArkTS中的联合类型和枚举类型,讲解了定义与使用方法,并详细阐述了模块的导出与导入(包括静态导入、动态导入及HarmonyOS SDK的开放能力导入),帮助开发者更好地理解和应用这些特性。君志所向,一往无前!
17 0
HarmonyOS NEXT开发-ArkTS五
HarmonyOS NEXT开发-ArkTS四
本文介绍了面向对象编程中的“类”和“对象”概念:类是创建对象的蓝图,定义属性和方法;对象是类的具体实例,通过new关键字创建,具有类定义的所有特征。构造函数用于初始化对象属性,确保每个实例都能正确设置初始状态。希望这些内容能帮助你更好地理解面向对象编程的核心思想。 (239字符)
HarmonyOS NEXT开发-ArkTS四
HarmonyOS NEXT开发-ArkTS六
本文介绍了分支语句的概念及其在ArkTS中的应用,通过生动的日常例子解释了“如果...那么...否则...”结构,帮助读者理解条件渲染和决策逻辑。期待与你共同探索编程与财富之路!
HarmonyOS NEXT开发-ArkTS六
Harmony OS开发-ArkTS三
本文介绍了ArkTS的基础语法,包括常量、命名规则、数组及其常用函数,以及函数的定义与使用,涵盖匿名函数和箭头函数的区别。通过具体示例,帮助读者快速掌握ArkTS编程技巧,踏上Harmony OS开发之旅。君志所向,一往无前!
22 1
Harmony OS开发-ArkTS三
【02】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-项目开发实战-准备工具安装-编译器DevEco Studio安装-arkts编程语言认识-编译器devco-鸿蒙SDK安装-模拟器环境调试-hyper虚拟化开启-全过程实战项目分享-从零开发到上线-优雅草卓伊凡
【02】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-项目开发实战-准备工具安装-编译器DevEco Studio安装-arkts编程语言认识-编译器devco-鸿蒙SDK安装-模拟器环境调试-hyper虚拟化开启-全过程实战项目分享-从零开发到上线-优雅草卓伊凡
34 2
【02】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-项目开发实战-准备工具安装-编译器DevEco Studio安装-arkts编程语言认识-编译器devco-鸿蒙SDK安装-模拟器环境调试-hyper虚拟化开启-全过程实战项目分享-从零开发到上线-优雅草卓伊凡
|
2月前
|
UED
【HarmonyOS——ArkTS语言】计算器的实现【合集】
【ArkTS语言-HarmonyOS】计算器的实现【合集】组件,点击等号后计算函数高效解析表达式并给出准确结果,达成核心功能要求。错误提示不够详尽,难以助力用户快速定位输入错误;响应式设计不足,在不同屏幕规格下适配性差。总体而言,本次实验已成功构建起基本功能框架,后续将针对上述问题深入探究优化方案,不断打磨细节,在完善计算器功能与提升用户体验的道路上持续精进,进而提升自身编程与应用开发的综合能力水平。利用按钮组件顺利完成布局设计,数字、运算符及功能按钮排列有序,操作逻辑清晰直观。
84 2
【HarmonyOS——ArkTS语言】面向对象【合集】
【ArkTS语言-HarmonyOS】面向对象【合集】本次实验,我们在utils目录中创建了MyClass.ets和MyConfig.ets文件,在此过程中定义了Config接口和Color枚举。同时,我们实现了Auth类及其子类WechatAuth和AlipayAuth,从而深入了解了面向对象编程在HarmonyOS开发中的应用。在实验中,我们学会了如何遵循接口规范来实现类的功能,并通过继承机制来扩展类的行为。通过这些实践,我们完成了用户创建、密码设置以及登录操作。
60 3
【HarmonyOS NEXT开发——ArkTS语言】购物商城的实现【合集】
HarmonyOS应用开发使用@Component装饰器将Home结构体标记为一个组件,意味着它可以在界面构建中被当作一个独立的UI单元来使用,并且按照其内部定义的build方法来渲染具体的界面内容。txt:string定义了一个名为Data的接口,用于规范表示产品数据的结构。src:类型为,推测是用于引用资源(可能是图片资源等)的一种特定类型,用于指定产品对应的图片资源。txt:字符串类型,用于存放产品的文字描述,比如产品名称等相关信息。price:数值类型,用于表示产品的价格信息。
70 5

热门文章

最新文章

  • 1
    原生鸿蒙版小艺APP接入DeepSeek-R1,为HarmonyOS应用开发注入新活力
    16
  • 2
    【01】噩梦终结flutter配安卓android鸿蒙harmonyOS 以及next调试环境配鸿蒙和ios真机调试环境-flutter项目安卓环境配置-gradle-agp-ndkVersion模拟器运行真机测试环境-本地环境搭建-如何快速搭建android本地运行环境-优雅草卓伊凡-很多人在这步就被难倒了
    23
  • 3
    APP-国内主流安卓商店-应用市场-鸿蒙商店上架之必备前提·全国公安安全信息评估报告如何申请-需要安全评估报告的资料是哪些-优雅草卓伊凡全程操作
    15
  • 4
    EMAS 性能分析全面适配HarmonyOS NEXT,开启原生应用性能优化新纪元
    7
  • 5
    鸿蒙开发:了解@Builder装饰器
    8
  • 6
    【04】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-正确安装鸿蒙SDK-结构目录介绍-路由介绍-帧动画(ohos.animator)书写介绍-能够正常使用依赖库等-ArkUI基础组件介绍-全过程实战项目分享-从零开发到上线-优雅草卓伊凡
    22
  • 7
    【01】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-项目开发实战-优雅草卓伊凡拟开发一个一站式家政服务平台-前期筹备-暂定取名斑马家政软件系统-本项目前端开源-服务端采用优雅草蜻蜓Z系统-搭配ruoyi框架admin后台-全过程实战项目分享-从零开发到上线
    11
  • 8
    HarmonyOS使用系统图标
    6
  • 9
    【03】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-测试hello word效果-虚拟华为手机真机环境调试-为DevEco Studio编译器安装中文插件-测试写一个滑动块效果-介绍诸如ohos.ui等依赖库-全过程实战项目分享-从零开发到上线-优雅草卓伊凡
    6
  • 10
    【02】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-项目开发实战-准备工具安装-编译器DevEco Studio安装-arkts编程语言认识-编译器devco-鸿蒙SDK安装-模拟器环境调试-hyper虚拟化开启-全过程实战项目分享-从零开发到上线-优雅草卓伊凡
    7
  • AI助理

    你好,我是AI助理

    可以解答问题、推荐解决方案等