鸿蒙HarmonyOS实战-ArkUI组件(Progress)
一、Progress
Progress组件是一种用户界面(UI)元素,用于向用户显示某些任务的进度。它通常以进度条的形式出现,显示任务完成的百分比。Progress组件可以在确定任务持续时间未知的情况下提供有用的反馈,帮助用户了解任务的状态和进度。
在Web应用程序中,Progress组件通常是使用HTML5的元素来实现的。元素必须至少包含一个value属性来指定进度的百分比,以及一个max属性来指定任务的预期完成时间。可以使用CSS样式来自定义元素的外观。
在Android应用程序中,Progress组件通常是使用ProgressBar控件来实现的。ProgressBar控件可以在水平或垂直方向上显示进度条,还可以使用自定义颜色和样式。
在iOS应用程序中,Progress组件通常是使用UIProgressView控件来实现的。UIProgressView控件可以在水平或垂直方向上显示进度条,还可以使用自定义颜色和样式。
在HarmonyOS应用程序中,Progress组件通常是使用Progress控件来实现的。Progress控件可以在水平或垂直方向上显示进度条,还可以使用自定义颜色和样式。
1.创建进度条
语法说明:
Progress(options: {value: number, total?: number, type?: ProgressType})
使用:
// xxx.ets
import promptAction from '@ohos.promptAction';
@Entry
@Component
struct Index {
build() {
Column() {
Row() {
Progress({ value: 24, total: 100, type: ProgressType.Linear })
}
Row() {
}
.backgroundColor(0xFFFFFF)
}
.padding(10)
.backgroundColor(0xDCDCDC)
.width('100%')
.height('100%')
}
}
2.设置进度条样式
2.1 线性样式
@Entry
@Component
struct Index {
build() {
Column() {
Progress({ value: 20, total: 100, type: ProgressType.Linear }).width(200).height(50)
Progress({ value: 20, total: 100, type: ProgressType.Linear }).width(50).height(200)
}
.padding(10)
.backgroundColor(0xDCDCDC)
.width('100%')
.height('100%')
}
}
2.2 环形无刻度样式
@Entry
@Component
struct Index {
build() {
Column() {
// 从左往右,1号环形进度条,默认前景色为蓝色,默认strokeWidth进度条宽度为2.0vp
Progress({ value: 40, total: 150, type: ProgressType.Ring }).width(100).height(100)
// 从左往右,2号环形进度条
Progress({ value: 40, total: 150, type: ProgressType.Ring }).width(100).height(100)
.color(Color.Grey) // 进度条前景色为灰色
.style({ strokeWidth: 15}) // 设置strokeWidth进度条宽度为15.0vp
}
.padding(10)
.backgroundColor(0xDCDCDC)
.width('100%')
.height('100%')
}
}
2.3 环形有刻度样式
@Entry
@Component
struct Index {
build() {
Column() {
Progress({ value: 20, total: 150, type: ProgressType.ScaleRing }).width(100).height(100)
.backgroundColor(Color.Black)
.style({ scaleCount: 20, scaleWidth: 5 }) // 设置环形有刻度进度条总刻度数为20,刻度宽度为5vp
Progress({ value: 20, total: 150, type: ProgressType.ScaleRing }).width(100).height(100)
.backgroundColor(Color.Black)
.style({ strokeWidth: 15, scaleCount: 20, scaleWidth: 5 }) // 设置环形有刻度进度条宽度15,总刻度数为20,刻度宽度为5vp
Progress({ value: 20, total: 150, type: ProgressType.ScaleRing }).width(100).height(100)
.backgroundColor(Color.Black)
.style({ strokeWidth: 15, scaleCount: 20, scaleWidth: 3 }) // 设置环形有刻度进度条宽度15,总刻度数为20,刻度宽度为3vp
}
.padding(10)
.backgroundColor(0xDCDCDC)
.width('100%')
.height('100%')
}
}
2.4 圆形样式
@Entry
@Component
struct Index {
build() {
Column() {
// 从左往右,1号圆形进度条,默认前景色为蓝色
Progress({ value: 10, total: 150, type: ProgressType.Eclipse }).width(100).height(100)
// 从左往右,2号圆形进度条,指定前景色为灰色
Progress({ value: 20, total: 150, type: ProgressType.Eclipse }).color(Color.Grey).width(100).height(100)
}
.padding(10)
.backgroundColor(0xDCDCDC)
.width('100%')
.height('100%')
}
}
2.5 胶囊样式
@Entry
@Component
struct Index {
build() {
Column() {
Progress({ value: 10, total: 150, type: ProgressType.Capsule }).width(100).height(50)
Progress({ value: 20, total: 150, type: ProgressType.Capsule }).width(50).height(100).color(Color.Grey)
Progress({ value: 50, total: 150, type: ProgressType.Capsule }).width(50).height(100).backgroundColor(Color.Black)
}
.padding(10)
.backgroundColor(0xDCDCDC)
.width('100%')
.height('100%')
}
}
3.案例
Progress组件通常用于展示某个任务或者进程的进度,可以向用户传达当前操作的进展情况。以下是Progress组件的一些实际应用场景:
- 文件上传或下载的进度条展示
- 音视频播放器中的播放进度条
- 游戏中的加载进度条
- 网页加载进度条
- 软件安装或更新的进度条展示
- 数据库操作的进度条展示
- 任务管理系统中的进度展示
- 项目管理系统中的任务进度展示
Progress组件可以直观地展示某个任务的完成情况,帮助用户了解任务的进度及剩余时间,提高用户体验和操作效率。
案例:
@Entry
@Component
struct Index {
@State progressValue: number = 0 // 设置进度条初始值为0
build() {
Column() {
Column() {
Progress({value:0, total:100, type:ProgressType.Capsule}).width(200).height(50)
.style({strokeWidth:50}).value(this.progressValue)
Row().width('100%').height(5)
Button("进度条+5")
.onClick(()=>{
this.progressValue += 5
if (this.progressValue > 100){
this.progressValue = 0
}
})
}
}.width('100%').height('100%')
}
}
写在最后
- 如果你觉得这篇内容对你还蛮有帮助,我想邀请你帮我三个小忙:
- 点赞,转发,有你们的 『点赞和评论』,才是我创造的动力。
- 关注小编,同时可以期待后续文章ing,不定期分享原创知识。
- 更多鸿蒙最新技术知识点,请关注作者博客:https://t.doruo.cn/14DjR1rEY
鸿蒙HarmonyOS实战-ArkUI组件(Progress)的更多相关文章
- 鸿蒙的远程交互组件应用及微信小程序的远程交互组件应用
注:鸿蒙的远程交互组件应用相对复杂 ,访问网络时,首先要配置网络权限,华为官方文档有问题,在此引用我老师配置的模板,见附件 过程:1.导入鸿蒙的网络请求模块fetch 2.发起对服务器的请求(在这过程 ...
- 微信小程序入门与实战 常用组件API开发技巧项目实战*全
第1章 什么是微信小程序? 第2章 小程序环境搭建与开发工具介绍 第3章 从一个简单的“欢迎“页面开始小程序之旅 第4章 第二个页面:新闻阅读列表 第5章 小程序的模板化与模块化 第6章 构建新闻详情 ...
- 手把手带你体验鸿蒙 harmonyOS
wNlRGd.png 前言 本文已经收录到我的 Github 个人博客,欢迎大佬们光临寒舍: 我的 GIthub 博客 学习导图 image.png 一.为什么要尝鲜 harmonyos? wNlfx ...
- 最全华为鸿蒙 HarmonyOS 开发资料汇总
开发 本示例基于 OpenHarmony 下的 JavaScript UI 框架,进行项目目录解读,JS FA.常用和自定义组件.用户交互.JS 动画的实现,通过本示例可以基本了解和学习到 JavaS ...
- 鸿蒙HarmonyOS应用开发落地实践,Harmony Go 技术沙龙落地北京
12月26日,华为消费者BG软件部开源中心与51CTO Harmony OS技术社区携手,共同主办了主题为"Harmony OS 应用开发落地实践"的 Harmony Go 技术沙 ...
- 鸿蒙开源第三方件组件——轮播组件Banner
目录: 1.功能展示 2.Sample解析 3.Library解析 4.<鸿蒙开源第三方组件>系列文章合集 前言 基于安卓平台的轮播组件Banner(https://github.com/ ...
- 微信小程序组件progress
基础内容progress:官方文档 Demo Code: Page({ data:{ percent:0 }, onReady:function(){ this.percentAdd(); }, pe ...
- 14-Flutter移动电商实战-ADBanner组件的编写
拨打电话的功能在app里也很常见,比如一般的外卖app都会有这个才做.其实Flutter本身是没给我们提供拨打电话的能力的,那我们如何来拨打电话那? 1.编写店长电话模块 这个小伙伴们一定轻车熟路了, ...
- 13-Flutter移动电商实战-ADBanner组件的编写
1.AdBanner组件的编写 我们还是把这部分单独出来,需要说明的是,这个Class你也是可以完全独立成一个dart文件的.代码如下: 广告图片class AdBanner extends Stat ...
- iview实战 : 树形组件自定义
Tree树形组件是 iview 中相对复杂的一个组件. 自定义节点内容 使用强大的 Render 函数可以自定义节点显示内容和交互,比如添加图标,按钮等. ——官方文档 但官方的 example 只有 ...
随机推荐
- python利用random模块随机生成MAC地址和IP地址
import random def randomMac(): macstring = "0123456789abcdef"*12 macstringlist=random. ...
- 【Android 逆向】【攻防世界】黑客精神
1. apk 安装到手机,提示输入注册码 2. jadx打开apk MainActivity.java @Override // android.app.Activity public void on ...
- [超实用插件]在Visual Studio中查看EF Core查询计划
前言 EF Core是我们.NET开发中比较常用的一款ORM框架,今天我们分享一款可以直接在Visual Studio中查看EF Core查询计划调试器可视化工具(帮助开发者分析和优化数据库查询性能) ...
- Xilinx GTH 简介 ,CoaXpress FPGA PHY 部分
什么是GTH GTH 是Xilinx UltraScale系列FPGA上高速收发器的一种类型,本质上和其它名称如GTP, GTX等只是器件类型不同.速率有差异:GTH 最低速率在500Mbps,最高在 ...
- Cocos Creator 2.x升级至Cocos Creator 3.x
1.导入类时,批量导入 2.导入 override...关键字时,批量导入 3.this.node.scale = 0.6-->this.node.setScale(0.6, 0.6); 4.n ...
- [杂项] 抢单可能需要的API
淘宝时间戳 http://api.m.taobao.com/rest/api3.do?api=mtop.common.getTimestamp 京东库存查询 http://c0.3.cn/stock? ...
- FolkMQ 作个简单的消息中间件(最简单的那种), v1.3.1 发布
功能简介 角色 功能 生产端(或发起端) 发布消息.定时消息(或叫延时).顺序消息.可过期消息.事务消息.发送消息(rpc)支持 Qos0.Qos1 消费端(或接收端) 订阅.取消订阅.消费-ACK( ...
- C++ //常用算术生成算法 //#include<numeric> accumulate //fill //向容器中填充指定的元素
1 //常用算术生成算法 //#include<numeric> accumulate 2 //fill //向容器中填充指定的元素 3 #include<iostream> ...
- chatGPT初体验
chatGPT NLP技术,通过统计的手段模拟出更正确的答案. 他与以前的NLP不一样,他有上下文语义,他能够模拟场景,能够总结很多文章信息. 因此对于谷歌等搜索引擎就很有攻击性了,因为chatGPT ...
- vue配置scss全局样式
安装插件 npm install sass --save-dev 在src文件夹下创建styles文件夹,并创建以下文件 index.scss: scss的入口文件 // 引入清除默认样式 @impo ...