建筑室内设计主要学什么_app下载应用_大连网络推广公司哪家好_怎么做公司网页

1 主要内容说明

本文源码1实现了一个漂亮且功能齐全的进度条展示组件，通过使用 ProgressType 来实现不同类型的进度条，包含线性进度条、环形进度条、椭圆进度条、刻度环形进度条和胶囊进度条。对于未来的扩展，可以考虑增加进度动态更新、响应式布局、交互动画等功能，提升用户体验。

2 例子

2.1 进度条（progress）

源码1中，一个包含多种进度条类型（线性、环形、椭圆、刻度环形、胶囊）的组件。它使用 Column 布局垂直排列多个 Row，每个 Row 展示一种进度条。进度条设置了进度值、宽度、高度以及颜色。使用 Progress 组件的不同 ProgressType 来展示不同类型的进度条。

2.1.1 源码1 （进度条）

@Entry
@Component
struct PageProgressBar {build() {// 使用 Column 布局，设置子组件之间的间距为 10Column({ space: 10 }) {// 第一行：线性进度条Row({ space: 10 }) {Text("线性")  // 显示文本 "线性进度条"Progress({ total: 100, value: 60, type: ProgressType.Linear })  // 设置线性进度条，当前进度为 60.width("80%")  // 设置进度条宽度为 80%}.backgroundColor("#fcc")  // 设置背景色为淡粉色.width("90%")              // 设置 Row 宽度为 90%.height(50)                // 设置 Row 高度为 50// 第二行：环形进度条Row({ space: 10 }) {Text("环形")  // 显示文本 "环形进度条"Progress({ total: 100, value: 15, type: ProgressType.Ring })  // 设置环形进度条，当前进度为 15.width(100)    // 设置进度条的宽度为 100Text("环形")    // 显示文本 "环形进度条"Progress({ total: 100, value: 75, type: ProgressType.Ring })  // 设置环形进度条，当前进度为 75.width(100)    // 设置进度条的宽度为 100}.backgroundColor("#fcc").width("90%").height(150)// 第三行：椭圆形进度条Row({ space: 10 }) {Text("椭圆")  // 显示文本 "椭圆形进度条"Progress({ total: 100, value: 36, type: ProgressType.Eclipse })  // 设置椭圆形进度条，当前进度为 36.width(100)    // 设置进度条宽度为 100Text("椭圆")    // 显示文本 "椭圆形进度条"Progress({ total: 100, value: 76, type: ProgressType.Eclipse })  // 设置椭圆形进度条，当前进度为 76.width(100)    // 设置进度条宽度为 100.color("green")  // 设置进度条颜色为绿色.backgroundColor("white")  // 设置进度条背景颜色为白色}.backgroundColor("#fcc").width("90%").height(150)// 第四行：刻度环形进度条Row({ space: 10 }) {Text("刻度环")  // 显示文本 "刻度环形进度条"Progress({ total: 100, value: 20, type: ProgressType.ScaleRing })  // 设置刻度环形进度条，当前进度为 20.width(90)    // 设置进度条宽度为 90Progress({ total: 100, value: 70, type: ProgressType.ScaleRing })  // 设置刻度环形进度条，当前进度为 70.width(150)    // 设置进度条宽度为 150.color("red")  // 设置进度条颜色为红色}.backgroundColor("#fcc").width("90%").height(150)// 第五行：胶囊进度条Row({ space: 10 }) {Text("胶囊")  // 显示文本 "胶囊进度条"Progress({ total: 100, value: 60, type: ProgressType.Capsule })  // 设置胶囊进度条，当前进度为 60.width("80%")  // 设置进度条宽度为 80%.height(40)    // 设置进度条高度为 40.color("#ffcc67e3")  // 设置进度条颜色为指定的颜色.backgroundColor("white")  // 设置进度条背景颜色为白色}.backgroundColor("#fcc").width("90%").height(150)}.height("100%")  // 设置 Column 容器的高度为 100%.width("100%")   // 设置 Column 容器的宽度为 100%.backgroundColor("#ffa")  // 设置背景颜色为浅黄色}
}

2.1.2 源码1运行效果

3.结语

arkUI相对当前端的css呀。进度条用到的地方有很多，基本上很多电子软件、游戏上都有。
先简单记录下有这么个东西，若后面需要拓展，如增加动画效果，可以回顾参考。
由于笔者的能力有限，创作的内容有所不足在所难免，也敬请读者包涵和指出，万分感谢！

4.定位日期

2024-11-6；
19:50；