四、动画图表（01）：进度条
视频介绍了线形和圆形进度条的不同应用场景及属性设置。线形进度条适用于文件下载、视频播放等场景，直观显示任务进度；圆形进度条则更适合仪表盘数据可视化。详细说明了两种进度条的各项属性配置，包括类型、数值范围、颜色样式等参数设置，帮助开发者根据不同需求选择合适的进度条样式。
·
视频链接：哔哩哔哩
进度条分为线形和圆形。线形进度条用于显示加载进度、文件传输进度、任务执行进度等；圆形进度条适用于仪表盘、数据可视化、任务完成度展示等场景。方便用户更直观地了解当前进度。
应用场景
- 文件下载：在下载文件时，线形进度条可以显示文件的下载进度，让用户了解下载任务的完成情况。
- 视频播放：在视频播放器中，线形进度条可以显示视频的播放进度，让用户了解视频的播放位置。
- 数据处理：在处理数据时，线形进度条可以显示数据处理的进度，让用户了解数据处理任务的完成情况。
- 仪表盘：在仪表盘中，圆形进度条可以用于显示各种指标的进度，例如速度、温度、湿度、心率、血压、血氧等。与传统的进度条相比，圆形进度条可以提供更好的视觉效果和用户体验。
常用属性
进度条属性
| 属性 | 作用 | 默认值 |
|---|---|---|
| 进度条类型 | 设置进度条的类型，可选值有 圆形、线形 |
圆形 |
| 进度数值 | 设置进度条的数值，支持 变量绑定（需要绑定double类型的变量） | |
| 起始值 | 设置进度条的起始值 | 0 |
| 终点值 | 设置进度条的终点值 | 100 |
| 背景颜色 | 设置进度条的背景颜色 | #FFE0E0E0 |
| 进度条颜色 | 设置进度条的颜色 | #FF42A5F5 |
圆形进度条
| 属性 | 作用 | 默认值 |
|---|---|---|
| 背景渐变 | 设置圆形进度条的背景渐变，参考容器 | |
| 进度条渐变 | 设置圆形进度条的颜色渐变，参考容器 | |
| 直径 | 设置圆形进度条的直径大小 | |
| 笔画宽度 | 设置圆形进度条的宽度 | |
| 开口方向 | 设置圆形进度条的开口方向 | 向下 |
| 开口大小 | 设置圆形进度条的开口大小 | 0 |
| 圆形线帽 | 设置圆形进度条两端是否为圆形 | true |
| 进度条满时线帽重合 | 当开启圆形线帽后，该属性有效，设置圆形进度条满时线帽是否重合 | true |
| 刻度 | 设置圆形进度条是否显示刻度，存在长刻度和短刻度，刻度属性如下
|
false |
| 指针 | 设置圆形进度条是否显示指针，指针属性如下
|
false |
| 中间文本 | 设置圆形进度条中间显示的文本，支持 变量绑定 | true |
| 圆环顶部组件 | 设置圆形进度条顶部是否显示组件，适用于顶部展示logo图片，参考容器 | false |
线形进度条
| 属性 | 作用 | 默认值 |
|---|---|---|
| 宽 | 设置线形进度条的宽度 | 200 |
| 高 | 设置线形进度条的高度 | 10 |
| 多段进度值 | 开启后，用于设置在不同区间内进度条的颜色，
|
0 |
腾讯云面向开发者汇聚海量精品云计算使用和开发经验，营造开放的云计算技术生态圈。
更多推荐
21
0- 0
已为社区贡献18条内容
所有评论(0)