鸿蒙5.0开发进阶:UI框架-ArkTS组件(Gauge)

往期鸿蒙5.0全套实战文章必看:(文中附带全栈鸿蒙5.0学习资料)


Gauge

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

说明

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

子组件

可以包含单个子组件。

说明

建议使用文本组件构建当前数值文本和辅助文本。

若子组件宽高为百分比形式,则基准范围为以外圆环做为内切圆的矩形。

接口

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

创建数据量规图表组件。

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

元服务API: 从API version 11开始,该接口支持在元服务中使用。

系统能力: SystemCapability.ArkUI.ArkUI.Full

参数:

参数名 类型 必填 说明
value number

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

说明:

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

min number

当前数据段最小值。

默认值:0

max number

当前数据段最大值。

默认值:100

说明:

max小于min时使用默认值0和100。

max和min支持负数。

属性

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

value

value(value: number)

设置量规图的数据值。

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

元服务API: 从API version 11开始,该接口支持在元服务中使用。

系统能力: SystemCapability.ArkUI.ArkUI.Full

参数:

参数名 类型 必填 说明
value number

量规图的数据值,可用于动态修改量规图的数据值。

默认值:0

startAngle

startAngle(angle: number)

设置起始角度位置。

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

元服务API: 从API version 11开始,该接口支持在元服务中使用。

系统能力: SystemCapability.ArkUI.ArkUI.Full

参数:

参数名 类型 必填 说明
angle number

起始角度位置,时钟0点为0度,顺时针方向为正角度。

默认值:0

endAngle

endAngle(angle: number)

设置终止角度位置。起始角度位置和终止角度位置差过小时,会绘制出异常图像,请取合理的起始角度位置和终止角度位置。建议使用单色环改变Gauge的value参数实现数据值的调节,可通过定时器setTimeout进行数值的延迟加载。

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

元服务API: 从API version 11开始,该接口支持在元服务中使用。

系统能力: SystemCapability.ArkUI.ArkUI.Full

参数:

参数名 类型 必填 说明
angle number

终止角度位置,时钟0点为0度,顺时针方向为正角度。

默认值:360

colors

colors(colors: ResourceColor | LinearGradient | Array<[ResourceColor | LinearGradient, number]>)

设置量规图的颜色。

从API version 11开始,该接口使用以下规则:

参数类型为ResourceColor,则圆环类型为单色环。

参数类型为LinearGradient,则圆环类型为渐变环。

参数类型为数组,则圆环类型为分段渐变环,第一个参数为颜色值,若设置为非颜色类型,则置为"0xFFE84026"。第二个参数为颜色所占比重,若设置为负数或是非数值类型,则将比重置为0。

分段渐变环最大显示段数为9段,若多于9段,则多于部分不显示。

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

元服务API: 从API version 11开始,该接口支持在元服务中使用。

系统能力: SystemCapability.ArkUI.ArkUI.Full

参数:

参数名 类型 必填 说明
colors
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值