鸿蒙Harmony应用开发—ArkTS声明式开发(基础手势:Progress)

进度条组件,用于显示内容加载或操作处理等进度。

说明:

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

子组件

接口

Progress(options: ProgressOptions<Type>)

创建进度组件,用于显示内容加载或操作处理进度。

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

参数:

参数名参数类型必填参数描述
optionsProgressOptions<Type>进度条组件参数。

ProgressOptions<Type>对象说明

参数名参数类型必填参数描述
valuenumber指定当前进度值。设置小于0的数值时置为0,设置大于total的数值时置为total。
从API version 9开始,该接口支持在ArkTS卡片中使用。
totalnumber指定进度总长。
默认值:100
从API version 9开始,该接口支持在ArkTS卡片中使用。
type8+ProgressType指定进度条类型。
默认值:ProgressType.Linear
从API version 9开始,该接口支持在ArkTS卡片中使用。
style(deprecated)ProgressStyle指定进度条样式。
该参数从API version8开始废弃,建议使用type替代。
默认值:ProgressStyle.Linear

ProgressType8+枚举说明

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

名称描述
Linear线性样式。从API version9开始,高度大于宽度的时候自适应垂直显示。
Ring环形无刻度样式,环形圆环逐渐显示至完全填充效果。
Eclipse圆形样式,显示类似月圆月缺的进度展示效果,从月牙逐渐变化至满月。
ScaleRing环形有刻度样式,显示类似时钟刻度形式的进度展示效果。从API version9开始,刻度外圈出现重叠的时候自动转换为环形无刻度进度条。
Capsule胶囊样式,头尾两端圆弧处的进度展示效果与Eclipse相同;中段处的进度展示效果与Linear相同。高度大于宽度的时候自适应垂直显示。

ProgressStyle枚举说明

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

名称描述
Linear线性样式。
Ring8+环形无刻度样式,环形圆环逐渐显示至完全填充效果。
Eclipse圆形样式,显示类似月圆月缺的进度展示效果,从月牙逐渐变化至满月。
ScaleRing8+环形有刻度样式,显示类似时钟刻度形式的进度展示效果。
Capsule8+胶囊样式,头尾两端圆弧处的进度展示效果与Eclipse相同;中段处的进度展示效果与Linear相同。高度大于宽度的时候自适应垂直显示。

属性

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

名称参数类型描述
valuenumber设置当前进度值。设置小于0的数值时置为0,设置大于total的数值时置为total。非法数值不生效。
从API version 9开始,该接口支持在ArkTS卡片中使用。
colorResourceColor | LinearGradient10+设置进度条前景色。
从API version 10开始支持利用LinearGradient设置Ring样式的渐变色。
默认值(API version 9):'#ff007dff'
默认值(API version 10):
- Capsule:'#33006cde'
- Ring:起始端:'#ff86c1ff',结束端:'#ff254ff7'
- 其他样式:'#ff007dff'
从API version 9开始,该接口支持在ArkTS卡片中使用,暂不支持LinearGradient。
backgroundColorResourceColor设置进度条底色。
默认值(API version 9):'#19182431'
默认值(API version 10):
- Capsule:'#33ffffff'
- Ring:'#08182431'
- 其他样式:'#19182431'
从API version 9开始,该接口支持在ArkTS卡片中使用。
说明:
当设置通用属性backgroundColor时,生效的是进度条的底色,而不是整个Progress组件的背景色。
style8+ProgressStyleOptions8+ | CapsuleStyleOptions10+ | RingStyleOptions10+ | LinearStyleOptions10+ | ScaleRingStyleOptions10+ | EclipseStyleOptions10+定义组件的样式。
从API version 10开始支持以下类型:
- CapsuleStyleOptions:设置Capsule的样式。
- RingStyleOptions:设置Ring的样式。
- LinearStyleOptions:设置Linear的样式。
- ScaleRingStyleOptions:设置ScaleRing的样式。
- EclipseStyleOptions:设置Eclipse的样式。
- ProgressStyleOptions:仅可设置各类型进度条的基本样式。
从API version 9开始,该接口支持在ArkTS卡片中设置ProgressStyleOptions,暂不支持其它的参数类型。

ProgressStyleOptions8+

名称参数类型必填描述
strokeWidthLength设置进度条宽度(不支持百分比设置)。
默认值:4.0vp
scaleCountnumber设置环形进度条总刻度数。
默认值:120
scaleWidthLength设置环形进度条刻度粗细(不支持百分比设置),刻度粗细大于进度条宽度时,为系统默认粗细。
默认值:2.0vp
enableSmoothEffect10+boolean进度平滑动效的开关。开启平滑动效后设置进度,进度会从当前值渐变至设定值,否则进度从当前值突变至设定值。
默认值:true

CapsuleStyleOptions10+

名称参数类型必填描述
borderColorResourceColor内描边颜色。
默认值:'#33006cde'
borderWidthLength内描边宽度(不支持百分比设置)。
默认值:1vp
contentstring文本内容,应用可自定义。
fontFont文本样式。
默认值:
- 文本大小(不支持百分比设置):12fp
其他文本参数跟随text组件的主题值。
fontColorResourceColor文本颜色。
默认值:'#ff182431'
enableScanEffectboolean扫光效果的开关。
默认值:false
showDefaultPercentageboolean显示百分比文本的开关,开启后会在进度条上显示当前进度的百分比。设置了content属性时该属性不生效。
默认值:false
enableSmoothEffectboolean进度平滑动效的开关。开启平滑动效后设置进度,进度会从当前值渐变至设定值,否则进度从当前值突变至设定值。
默认值:true

RingStyleOptions10+

名称参数类型必填描述
strokeWidthLength设置进度条宽度(不支持百分比设置),宽度大于等于半径时,默认修改宽度至半径值的二分之一。
默认值:4.0vp
shadowboolean进度条阴影开关。
默认值:false
statusProgressStatus10+进度条状态,当设置为LOADING时会开启检查更新动效,此时设置进度值不生效。当从LOADING设置为PROGRESSING,检查更新动效会执行到终点再停止。
默认值: ProgressStatus.PROGRESSING
enableScanEffectboolean进度条扫光效果的开关。
默认值: false
enableSmoothEffectboolean进度平滑动效的开关。开启平滑动效后设置进度,进度会从当前值渐变至设定值,否则进度从当前值突变至设定值。
默认值:true

LinearStyleOptions10+

名称参数类型必填描述
strokeWidthLength设置进度条宽度(不支持百分比设置)。
默认值:4.0vp
strokeRadiusPX | VP | LPX | Resource设置线性进度条圆角半径。
取值范围[0, strokeWidth / 2]。默认值:strokeWidth / 2。
enableScanEffectboolean进度条扫光效果的开关。
默认值: false
enableSmoothEffectboolean进度平滑动效的开关。开启平滑动效后设置进度,进度会从当前值渐变至设定值,否则进度从当前值突变至设定值。
默认值:true

ScaleRingStyleOptions10+

名称参数类型必填描述
strokeWidthLength设置进度条宽度(不支持百分比设置)。
默认值:4.0vp
scaleCountnumber设置环形进度条总刻度数。
默认值:120
scaleWidthLength设置环形进度条刻度粗细(不支持百分比设置),刻度粗细大于进度条宽度时,为系统默认粗细。
默认值:2.0vp
enableSmoothEffectboolean进度平滑动效的开关。开启平滑动效后设置进度,进度会从当前值渐变至设定值,否则进度从当前值突变至设定值。
默认值:true

EclipseStyleOptions10+

名称参数类型必填描述
enableSmoothEffectboolean进度平滑动效的开关。开启平滑动效后设置进度,进度会从当前值渐变至设定值,否则进度从当前值突变至设定值。
默认值:true

ProgressStatus10+枚举说明

名称描述
LOADING加载中。
PROGRESSING进度更新中。

事件

支持通用事件。

示例

示例1

各进度条基础属性效果。

// xxx.ets
@Entry
@Component
struct ProgressExample {build() {Column({ space: 15 }) {Text('Linear Progress').fontSize(9).fontColor(0xCCCCCC).width('90%')Progress({ value: 10, type: ProgressType.Linear }).width(200)Progress({ value: 20, total: 150, type: ProgressType.Linear }).color(Color.Grey).value(50).width(200)Text('Eclipse Progress').fontSize(9).fontColor(0xCCCCCC).width('90%')Row({ space: 40 }) {Progress({ value: 10, type: ProgressType.Eclipse }).width(100)Progress({ value: 20, total: 150, type: ProgressType.Eclipse }).color(Color.Grey).value(50).width(100)}Text('ScaleRing Progress').fontSize(9).fontColor(0xCCCCCC).width('90%')Row({ space: 40 }) {Progress({ value: 10, type: ProgressType.ScaleRing }).width(100)Progress({ value: 20, total: 150, type: ProgressType.ScaleRing }).color(Color.Grey).value(50).width(100).style({ strokeWidth: 15, scaleCount: 15, scaleWidth: 5 })}// scaleCount和scaleWidth效果对比Row({ space: 40 }) {Progress({ value: 20, total: 150, type: ProgressType.ScaleRing }).color(Color.Grey).value(50).width(100).style({ strokeWidth: 20, scaleCount: 20, scaleWidth: 5 })Progress({ value: 20, total: 150, type: ProgressType.ScaleRing }).color(Color.Grey).value(50).width(100).style({ strokeWidth: 20, scaleCount: 30, scaleWidth: 3 })}Text('Ring Progress').fontSize(9).fontColor(0xCCCCCC).width('90%')Row({ space: 40 }) {Progress({ value: 10, type: ProgressType.Ring }).width(100)Progress({ value: 20, total: 150, type: ProgressType.Ring }).color(Color.Grey).value(50).width(100).style({ strokeWidth: 20 })}Text('Capsule Progress').fontSize(9).fontColor(0xCCCCCC).width('90%')Row({ space: 40 }) {Progress({ value: 10, type: ProgressType.Capsule }).width(100).height(50)Progress({ value: 20, total: 150, type: ProgressType.Capsule }).color(Color.Grey).value(50).width(100).height(50)}}.width('100%').margin({ top: 30 })}
}

progress

示例2

环形进度条视觉属性。

// xxx.ets
@Entry
@Component
struct ProgressExample {private gradientColor: LinearGradient = new LinearGradient([{ color: Color.Yellow, offset: 0.5 },{ color: Color.Orange, offset: 1.0 }])build() {Column({ space: 15 }) {Text('Gradient Color').fontSize(9).fontColor(0xCCCCCC).width('90%')Progress({ value: 70, total: 100, type: ProgressType.Ring }).width(100).style({ strokeWidth: 20 }).color(this.gradientColor)Text('Shadow').fontSize(9).fontColor(0xCCCCCC).width('90%')Progress({ value: 70, total: 100, type: ProgressType.Ring }).width(120).color(Color.Orange).style({ strokeWidth: 20, shadow: true })}.width('100%').padding({ top: 5 })}
}

ringProgressStyleEffect

示例3

环形进度条动效。

// xxx.ets
@Entry
@Component
struct ProgressExample {private gradientColor: LinearGradient = new LinearGradient([{ color: Color.Yellow, offset: 0.5 },{ color: Color.Orange, offset: 1.0 }])build() {Column({ space: 15 }) {Text('Loading Effect').fontSize(9).fontColor(0xCCCCCC).width('90%')Progress({ value: 0, total: 100, type: ProgressType.Ring }).width(100).color(Color.Blue).style({ strokeWidth: 20, status: ProgressStatus.LOADING })Text('Scan Effect').fontSize(9).fontColor(0xCCCCCC).width('90%')Progress({ value: 30, total: 100, type: ProgressType.Ring }).width(100).color(Color.Orange).style({ strokeWidth: 20, enableScanEffect: true })}.width('100%').padding({ top: 5 })}
}

ringProgressAnimation

示例4

胶囊形进度条视觉属性。

// xxx.ets
@Entry
@Component
struct ProgressExample {build() {Column({ space: 15 }) {Row({ space: 40 }) {Progress({ value: 100, total: 100,type: ProgressType.Capsule }).width(100).height(50).style({borderColor: Color.Blue, borderWidth: 1, content: 'Installing...',font: {size: 13, style: FontStyle.Normal}, fontColor: Color.Gray,enableScanEffect: false, showDefaultPercentage: false})}}.width('100%').padding({ top: 5 })}
}

capsuleProgressStyleEffect

示例5

进度平滑动效。

// xxx.ets
@Entry
@Component
struct Index {@State value: number = 0build() {Column({space: 10}) {Text('enableSmoothEffect: true').fontSize(9).fontColor(0xCCCCCC).width('90%').margin(5).margin({top: 20})Progress({value: this.value, total: 100, type:ProgressType.Linear}).style({strokeWidth: 10, enableSmoothEffect: true})Text('enableSmoothEffect: false').fontSize(9).fontColor(0xCCCCCC).width('90%').margin(5)Progress({value: this.value, total: 100, type:ProgressType.Linear}).style({strokeWidth: 10, enableSmoothEffect: false})Button('value +10').onClick(() => {this.value += 10}).width(75).height(15).fontSize(9)}.width('50%').height('100%').margin({left:20})}
}

progressSmoothEffect

最后,有很多小伙伴不知道学习哪些鸿蒙开发技术?不知道需要重点掌握哪些鸿蒙应用开发知识点?而且学习时频繁踩坑,最终浪费大量时间。所以有一份实用的鸿蒙(Harmony NEXT)资料用来跟着学习是非常有必要的。 

这份鸿蒙(Harmony NEXT)资料包含了鸿蒙开发必掌握的核心知识要点,内容包含了ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战等等)鸿蒙(Harmony NEXT)技术知识点。

希望这一份鸿蒙学习资料能够给大家带来帮助,有需要的小伙伴自行领取,限时开源,先到先得~无套路领取!!

获取这份完整版高清学习路线,请点击→纯血版全套鸿蒙HarmonyOS学习资料

腾讯T10级高工技术,安卓全套VIP内容 →Android全套学习资料

腾讯T10级高工技术,安卓全套VIP课程

鸿蒙(Harmony NEXT)最新学习路线

  •  HarmonOS基础技能

  • HarmonOS就业必备技能 
  •  HarmonOS多媒体技术

  • 鸿蒙NaPi组件进阶

  • HarmonOS高级技能

  • 初识HarmonOS内核 
  • 实战就业级设备开发

有了路线图,怎么能没有学习资料呢,小编也准备了一份联合鸿蒙官方发布笔记整理收纳的一套系统性的鸿蒙(OpenHarmony )学习手册(共计1236页)鸿蒙(OpenHarmony )开发入门教学视频,内容包含:ArkTS、ArkUI、Web开发、应用模型、资源分类…等知识点。

获取以上完整版高清学习路线,请点击→纯血版全套鸿蒙HarmonyOS学习资料

《鸿蒙 (OpenHarmony)开发入门教学视频》

《鸿蒙生态应用开发V2.0白皮书》

图片

《鸿蒙 (OpenHarmony)开发基础到实战手册》

OpenHarmony北向、南向开发环境搭建

图片

 《鸿蒙开发基础》

  • ArkTS语言
  • 安装DevEco Studio
  • 运用你的第一个ArkTS应用
  • ArkUI声明式UI开发
  • .……

图片

 《鸿蒙开发进阶》

  • Stage模型入门
  • 网络管理
  • 数据管理
  • 电话服务
  • 分布式应用开发
  • 通知与窗口管理
  • 多媒体技术
  • 安全技能
  • 任务管理
  • WebGL
  • 国际化开发
  • 应用测试
  • DFX面向未来设计
  • 鸿蒙系统移植和裁剪定制
  • ……

图片

《鸿蒙进阶实战》

  • ArkTS实践
  • UIAbility应用
  • 网络案例
  • ……

图片

 获取以上完整鸿蒙HarmonyOS学习资料,请点击→纯血版全套鸿蒙HarmonyOS学习资料

总结

总的来说,华为鸿蒙不再兼容安卓,对中年程序员来说是一个挑战,也是一个机会。只有积极应对变化,不断学习和提升自己,他们才能在这个变革的时代中立于不败之地。 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/737813.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【好书推荐-第十一期】《Java面试八股文:高频面试题与求职攻略一本通(视频解说版)》(博文视点出品)

&#x1f60e; 作者介绍&#xff1a;我是程序员洲洲&#xff0c;一个热爱写作的非著名程序员。CSDN全栈优质领域创作者、华为云博客社区云享专家、阿里云博客社区专家博主、前后端开发、人工智能研究生。公众号&#xff1a;洲与AI。 &#x1f388; 本文专栏&#xff1a;本文收录…

ARM/Linux嵌入式面试专栏前言

Perface 实在是没有想到也会准备面试&#xff0c;毕业的时候想着找一个大厂&#xff0c;好好的一辈子都干下去。 如果把工作比作对象&#xff0c;那我年轻的时候曾认真对她许诺&#xff1a; 你若不离&#xff0c;我定不弃 然而我们最后也不是谁变了心&#xff0c;只是经历了…

二,几何相交---4,BO算法---(2)比较和排序

在某一时刻xt&#xff0c;扫描线从左到右时&#xff0c;一部分线段会与扫描线相交&#xff0c;此时此刻&#xff0c;线段可以分成高低顺序&#xff0c; 那么对于给定两条线段&#xff0c;是如何变化的呢&#xff1f;有两个端点&#xff0c;左端点和右端点&#xff0c; 三种情况…

追寻工作与生活的和谐之道

在现代社会&#xff0c;人们往往被快节奏的工作和生活所困扰&#xff0c;如何在这两者之间找到平衡点&#xff0c;成为许多人关注的焦点。本文将为您介绍一些实用的方法和建议&#xff0c;帮助您实现工作与生活的和谐共处。 一、合理规划时间&#xff0c;提高工作效率 时间是实…

嵌入式学习 Day 31

网络: 数据传输,数据共享 1.网络协议模型: OSI协议模型 应用层 实际发送的数据 表示层 发送的数据是否加密 会话层 是否建立会话连接 传输层 数据传输的方式&#xff08;数据报、流式&#xff0…

2024年,人工智能技术在各个领域的应用

2024年&#xff0c;人工智能技术在各个领域的应用愈发普遍&#xff0c;其中之一就是AI在研发领域的辅助应用。随着AI技术不断进步和普及&#xff0c;越来越多的研发团队开始利用AI来加快创新和提高效率。以下是关于2024年AI辅助研发趋势的文章。 在2024年&#xff0c;AI在研发…

WorkPlus Meet提供高效、安全视频会议解决方案

WorkPlus Meet是一款私有部署和定制化的视频会议解决方案&#xff0c;为企业提供高效、安全的远程协作平台。随着全球数字化转型的加速&#xff0c;视频会议已成为企业必不可少的工作工具&#xff0c;而WorkPlus Meet的私有部署和定制化功能&#xff0c;为企业提供了更大的控制…

什么叫聊天中信息传达的框架效应framing effect,或展望理论Prospect theory

什么叫聊天中信息传达的框架效应&#xff0c;或展望理论 设计不能为产品带来良好体验&#xff1f;可能是你不懂心理学 框架效应- 维基百科&#xff0c;自由的百科全书 框架(社会科学)-展望理论 - 经济百科 jingjibaike 3 Answer 框架效应The theory of framing effects…

【MySQL系列 05】Schema 与数据类型优化

良好的数据库 schema 设计和合理的数据类型选择是 SQL 获得高性能的基石。 一、选择优化的数据类型 MySQL 支持的数据类型非常多&#xff0c;选择正确的数据类型对于获得高性能至关重要。不管存储哪种类型的数据&#xff0c;下面几个简单的原则都有助于做出更好的选择。 1. …

并发容器介绍(一)

并发容器介绍&#xff08;一&#xff09; 文章目录 并发容器介绍&#xff08;一&#xff09;ConcurrentHashMapCopyOnWriteArrayListConcurrentLinkedQueue 文章来自Java Guide 用于学习如有侵权&#xff0c;立即删除 ConcurrentHashMap 我们知道 HashMap 不是线程安全的&…

C语言学习-day19-函数2

自定义函数&#xff1a;自己定义的函数 以strcpy为例子&#xff1a; 自定义函数一样&#xff0c;需要函数名&#xff0c;返回值类型&#xff0c;函数参数。 函数的组成&#xff1a; ret_type fun_name(para1, *) { statement;//语句项 } ret_type 返回类型 fun_name 函数…

weiphp5.0存在远程代码执行漏洞

@[toc] 免责声明:请勿利用文章内的相关技术从事非法测试,由于传播、利用此文所提供的信息或者工具而造成的任何直接或者间接的后果及损失,均由使用者本人负责,所产生的一切不良后果与文章作者无关。该文章仅供学习用途使用。 1. weiphp5.0简介 微信公众号搜索:南风漏洞复…

通过pidin观察线程信息

通过pidin观察线程信息 pidin在qnx里是一个非常有用的命令&#xff0c;该命令提供了多个选项来获取关于进程的详细信息&#xff0c;包括进程ID&#xff08;PID&#xff09;、进程状态、CPU使用情况、内存使用情况、线程信息等。 pidin通过threads参数可以观察进程ID&#xff…

在并发场景如何正确的使用锁机制呢?

Java提供了多种锁机制来保证线程安全&#xff0c;包括synchronized关键字、Lock接口、ReadWriteLock接口等等。在日常并发场景中&#xff0c;正确使用锁机制是非常重要的&#xff0c;因为不恰当的锁使用会导致死锁、饥饿等问题&#xff0c;影响程序的性能和可靠性。 首先&…

c++ 开发环境 LNK1104: 无法打开文件“carve.lib” 已解决

别人分享&#xff0c; 和自己最近遇到问题一摸一样。以为没什么用的静态资源&#xff0c;结果 无法编译。 昨天安装配置了&#xff0c;结果今天早上打开电脑&#xff0c;所以dll的工程全部报错&#xff1a; 1>------ 已启动全部重新生成: 项目: Dll_test, 配置: Debug x64…

[Python]`threading.local`创建线程本地数据

在Python中&#xff0c;threading.local是一个用于创建线程本地数据的工具。它允许每个线程拥有自己独立的变量副本&#xff0c;这样可以在多线程程序中避免共享变量带来的问题。 通过使用threading.local&#xff0c;你可以为每个线程创建一个独立的变量空间&#xff0c;这样…

2024.02.09 校招 实习 内推 面经

绿*泡*泡VX&#xff1a; neituijunsir 交流*裙 &#xff0c;内推/实习/校招汇总表格 1、校招 | 中国电信江苏分公司2024年春季校园招聘 校招 | 中国电信江苏分公司2024年春季校园招聘 2、校招 | 国机集团2024届总部管培生春季招聘全面启动&#xff01; 校招 | 国机集团202…

pycharm中连接远程服务器

文章目录 概要文件进行映射将本地的project和远程的project进行映射&#xff0c;一定要使用sftp本地文件和远程的位置配置不想将远程的文件同步时候&#xff0c;可以进行下面设置 配置远程服务器的python解释器需要setting-->python interpreter-->add---> on ssh选择…

《Vue3 基础知识》事件总线 bus(与Vue2 有差异,使用 mitt 库)

前言 Vue2 与 Vue3 事件总线区别 Vue2 使用 $on&#xff0c;$off 和 $once 实例方法&#xff0c;创建一个事件总线&#xff0c;可在整个应用中做全局事件监听&#xff1b;Vue3 移除 $on&#xff0c;$off 和 $once 实例方法 &#xff0c;但提供了解决方案&#xff0c;使用库 m…

crossover玩不了qq游戏大厅怎么办 仍有五亿人坚持用QQ crossover玩游戏 Mac电脑玩QQ游戏

从1999年2月&#xff0c;QQ首个版本QICQ&#xff08;OPEN-ICQ&#xff09;上线。到2024年&#xff0c;靠着5亿月活用户&#xff0c;守住社交领域TOP2位置。你还记得QQ经典的铃声吗&#xff1f; 根据月狐数据2023年12月的统计&#xff0c;QQ月活跃账户数比微博和知乎加在一起还要…