鸿蒙Harmony应用开发—ArkTS声明式开发（基础手势：Progress）

2024-03-12 03:28
文章标签 基础 应用 开发 声明 手势 鸿蒙 arkts harmony progress

本文主要是介绍鸿蒙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学习资料

总结

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

这篇关于鸿蒙Harmony应用开发—ArkTS声明式开发（基础手势：Progress）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/800002。

相关文章

SpringBoot3应用中集成和使用Spring Retry的实践记录

SpringBoot3应用中集成和使用Spring Retry的实践记录

《SpringBoot3应用中集成和使用SpringRetry的实践记录》SpringRetry为SpringBoot3提供重试机制,支持注解和编程式两种方式,可配置重试策略与监听器,适用于临时性故... 目录1. 简介2. 环境准备3. 使用方式3.1 注解方式 基础使用自定义重试策略失败恢复机制注意事项
阅读更多...
Python实例题之pygame开发打飞机游戏实例代码

Python实例题之pygame开发打飞机游戏实例代码

《Python实例题之pygame开发打飞机游戏实例代码》对于python的学习者,能够写出一个飞机大战的程序代码,是不是感觉到非常的开心,：本文主要介绍Python实例题之pygame开发打飞机... 目录题目pygame-aircraft-game使用 Pygame 开发的打飞机游戏脚本代码解释初始化部
阅读更多...
使用Python开发一个现代化屏幕取色器

使用Python开发一个现代化屏幕取色器

《使用Python开发一个现代化屏幕取色器》在UI设计、网页开发等场景中,颜色拾取是高频需求,：本文主要介绍如何使用Python开发一个现代化屏幕取色器,有需要的小伙伴可以参考一下... 目录一、项目概述二、核心功能解析2.1 实时颜色追踪2.2 智能颜色显示三、效果展示四、实现步骤详解4.1 环境配置4.
阅读更多...
华为鸿蒙HarmonyOS 5.1官宣7月开启升级! 首批支持名单公布

华为鸿蒙HarmonyOS 5.1官宣7月开启升级! 首批支持名单公布

《华为鸿蒙HarmonyOS5.1官宣7月开启升级!首批支持名单公布》在刚刚结束的华为Pura80系列及全场景新品发布会上，除了众多新品的发布，还有一个消息也点燃了所有鸿蒙用户的期待，那就是Ha... 在今日的华为 Pura 80 系列及全场景新品发布会上，华为宣布鸿蒙 HarmonyOS 5.1 将于 7
阅读更多...
从基础到进阶详解Pandas时间数据处理指南

从基础到进阶详解Pandas时间数据处理指南

《从基础到进阶详解Pandas时间数据处理指南》Pandas构建了完整的时间数据处理生态,核心由四个基础类构成,Timestamp,DatetimeIndex,Period和Timedelta,下面我... 目录1. 时间数据类型与基础操作1.1 核心时间对象体系1.2 时间数据生成技巧2. 时间索引与数据
阅读更多...
Python使用smtplib库开发一个邮件自动发送工具

Python使用smtplib库开发一个邮件自动发送工具

《Python使用smtplib库开发一个邮件自动发送工具》在现代软件开发中,自动化邮件发送是一个非常实用的功能,无论是系统通知、营销邮件、还是日常工作报告,Python的smtplib库都能帮助我们... 目录代码实现与知识点解析1. 导入必要的库2. 配置邮件服务器参数3. 创建邮件发送类4. 实现邮件
阅读更多...
安装centos8设置基础软件仓库时出错的解决方案

安装centos8设置基础软件仓库时出错的解决方案

《安装centos8设置基础软件仓库时出错的解决方案》：本文主要介绍安装centos8设置基础软件仓库时出错的解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐... 目录安装Centos8设置基础软件仓库时出错版本 8版本 8.2.200android4版本 javas
阅读更多...
Python使用Tkinter打造一个完整的桌面应用

Python使用Tkinter打造一个完整的桌面应用

《Python使用Tkinter打造一个完整的桌面应用》在Python生态中,Tkinter就像一把瑞士军刀,它没有花哨的特效,却能快速搭建出实用的图形界面,作为Python自带的标准库,无需安装即可... 目录一、界面搭建：像搭积木一样组合控件二、菜单系统：给应用装上“控制中枢”三、事件驱动：让界面“活”
阅读更多...
基于Python开发一个有趣的工作时长计算器

基于Python开发一个有趣的工作时长计算器

《基于Python开发一个有趣的工作时长计算器》随着远程办公和弹性工作制的兴起,个人及团队对于工作时长的准确统计需求日益增长,本文将使用Python和PyQt5打造一个工作时长计算器,感兴趣的小伙伴可... 目录概述功能介绍界面展示php软件使用步骤说明代码详解1.窗口初始化与布局2.工作时长计算核心逻辑3
阅读更多...
Linux基础命令@grep、wc、管道符的使用详解

Linux基础命令@grep、wc、管道符的使用详解

《Linux基础命令@grep、wc、管道符的使用详解》：本文主要介绍Linux基础命令@grep、wc、管道符的使用,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐... 目录grep概念语法作用演示一演示二演示三，带选项 -nwc概念语法作用wc，不带选项-c，统计字节数-
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2