专业网站优化推广,wordpress文章内翻页,做外贸网站租什么服务器,中国建设造价协会网站文章目录 前言一、Gauge环形图表1.1 子组件1.2 接口参数介绍 1.2 属性1.3 示例代码二、LoadingProgress2.1 子组件2.2 接口2.3 属性2.4 示例代码 总结 前言
Gauge#xff1a;数据量规图表组件#xff0c;用于将数据展示为环形图表。 LoadingProgress#xff1a;用于显示加载… 文章目录 前言一、Gauge环形图表1.1 子组件1.2 接口参数介绍 1.2 属性1.3 示例代码二、LoadingProgress2.1 子组件2.2 接口2.3 属性2.4 示例代码 总结 前言
Gauge数据量规图表组件用于将数据展示为环形图表。 LoadingProgress用于显示加载动效的组件。 一、Gauge环形图表
1.1 子组件
无
1.2 接口
Gauge的接口函数原型如下
Gauge(options:{value: number, min?: number, max?: number})从API version 9开始该接口支持在ArkTS卡片中使用。
参数介绍
下面分别为参数名参数类型是否必填参数描述
参数valuenumber是量规图的当前数据值即图中指针指向位置。用于组件创建时量规图初始值的预置。 说明value不在min和max范围内时使用min作为默认值。
参数minnumber否当前数据段最小值。默认值0
参数maxnumber否当前数据段最大值。默认值100 说明max小于min时使用默认值0和100。max和min支持负数。
1.2 属性
除支持通用属性外还支持以下属性 他们属性分别是名称参数类型描述 valuenumber设置量规图的数据值可用于动态修改量规图的数据值。默认值0(要注意的是参数和属性都是可以设置value属性值的)从API version 9开始该接口支持在ArkTS卡片中使用。
startAnglenumber设置起始角度位置时钟0点为0度顺时针方向为正角度。默认值0从API version 9开始该接口支持在ArkTS卡片中使用。
endAnglenumber设置终止角度位置时钟0点为0度顺时针方向为正角度。默认值360。从API version 9开始该接口支持在ArkTS卡片中使用。
colorsArray设置量规图的颜色支持分段颜色设置。默认值Color.Black从API version 9开始该接口支持在ArkTS卡片中使用。
strokeWidthLength设置环形量规图的环形厚度。默认值4单位vp 从API version 9开始该接口支持在ArkTS卡片中使用。 说明设置小于0的值时按默认值显示。不支持百分比。
1.3 示例代码
// xxx.ets
Entry
Component
struct GaugeExample {build() {Column({ space: 20 }) {// 使用默认的min和max为0-100角度范围默认0-360value值设置// 参数中设置当前值为75Gauge({ 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 })}
}效果图如下
二、LoadingProgress
用于显示加载动效的组件。
说明 该组件从API Version 8开始支持。后续版本如有新增内容则采用上角标单独标记该内容的起始版本。
2.1 子组件
无
2.2 接口
该函数原型非常简单无参数
LoadingProgress()创建加载进展组件。
从API version 9开始该接口支持在ArkTS卡片中使用。
2.3 属性
他只有一个color属性其类型为ResourceColor 他用于设置加载进度条前景色。
看下面对比 1、无color属性 2、有前景属性颜色为Blue
上面便是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 })}
}总结
Gauge数据量规图表组件用于将数据展示为环形图表。 LoadingProgress用于显示加载动效的组件。 我们需要掌握这些开发出更好的鸿蒙ArkTS界面效果。
