鸿蒙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。

相关文章

Java中的Lambda表达式及其应用小结

Java中的Lambda表达式及其应用小结

《Java中的Lambda表达式及其应用小结》Java中的Lambda表达式是一项极具创新性的特性,它使得Java代码更加简洁和高效,尤其是在集合操作和并行处理方面,：本文主要介绍Java中的La... 目录前言1. 什么是Lambda表达式？2. Lambda表达式的基本语法例子1：最简单的Lambda表
阅读更多...
Python结合PyWebView库打造跨平台桌面应用

Python结合PyWebView库打造跨平台桌面应用

《Python结合PyWebView库打造跨平台桌面应用》随着Web技术的发展,将HTML/CSS/JavaScript与Python结合构建桌面应用成为可能,本文将系统讲解如何使用PyWebView... 目录一、技术原理与优势分析1.1 架构原理1.2 核心优势二、开发环境搭建2.1 安装依赖2.2 验
阅读更多...
Java字符串操作技巧之语法、示例与应用场景分析

Java字符串操作技巧之语法、示例与应用场景分析

《Java字符串操作技巧之语法、示例与应用场景分析》在Java算法题和日常开发中,字符串处理是必备的核心技能,本文全面梳理Java中字符串的常用操作语法,结合代码示例、应用场景和避坑指南,可快速掌握字... 目录引言1. 基础操作1.1 创建字符串1.2 获取长度1.3 访问字符2. 字符串处理2.1 子字
阅读更多...
Android Mainline基础简介

Android Mainline基础简介

《AndroidMainline基础简介》AndroidMainline是通过模块化更新Android核心组件的框架,可能提高安全性,本文给大家介绍AndroidMainline基础简介,感兴趣的朋... 目录关键要点什么是 android Mainline？Android Mainline 的工作原理关键
阅读更多...
使用Python开发一个带EPUB转换功能的Markdown编辑器

使用Python开发一个带EPUB转换功能的Markdown编辑器

《使用Python开发一个带EPUB转换功能的Markdown编辑器》Markdown因其简单易用和强大的格式支持,成为了写作者、开发者及内容创作者的首选格式,本文将通过Python开发一个Markd... 目录应用概览代码结构与核心组件1. 初始化与布局 (__init__)2. 工具栏 (setup_t
阅读更多...
SpringShell命令行之交互式Shell应用开发方式

SpringShell命令行之交互式Shell应用开发方式

《SpringShell命令行之交互式Shell应用开发方式》本文将深入探讨SpringShell的核心特性、实现方式及应用场景,帮助开发者掌握这一强大工具,具有很好的参考价值,希望对大家有所帮助,如... 目录引言一、Spring Shell概述二、创建命令类三、命令参数处理四、命令分组与帮助系统五、自定
阅读更多...
SpringBoot应用中出现的Full GC问题的场景与解决

SpringBoot应用中出现的Full GC问题的场景与解决

《SpringBoot应用中出现的FullGC问题的场景与解决》这篇文章主要为大家详细介绍了SpringBoot应用中出现的FullGC问题的场景与解决方法,文中的示例代码讲解详细,感兴趣的小伙伴可... 目录Full GC的原理与触发条件原理触发条件对Spring Boot应用的影响示例代码优化建议结论F
阅读更多...
MySQL 分区与分库分表策略应用小结

MySQL 分区与分库分表策略应用小结

《MySQL分区与分库分表策略应用小结》在大数据量、复杂查询和高并发的应用场景下,单一数据库往往难以满足性能和扩展性的要求,本文将详细介绍这两种策略的基本概念、实现方法及优缺点,并通过实际案例展示如... 目录mysql 分区与分库分表策略1. 数据库水平拆分的背景2. MySQL 分区策略2.1 分区概念
阅读更多...
Spring Shell 命令行实现交互式Shell应用开发

Spring Shell 命令行实现交互式Shell应用开发

《SpringShell命令行实现交互式Shell应用开发》本文主要介绍了SpringShell命令行实现交互式Shell应用开发,能够帮助开发者快速构建功能丰富的命令行应用程序,具有一定的参考价... 目录引言一、Spring Shell概述二、创建命令类三、命令参数处理四、命令分组与帮助系统五、自定义S
阅读更多...
mysql的基础语句和外键查询及其语句详解(推荐)

mysql的基础语句和外键查询及其语句详解(推荐)

《mysql的基础语句和外键查询及其语句详解(推荐)》：本文主要介绍mysql的基础语句和外键查询及其语句详解(推荐),本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋... 目录一、mysql 基础语句1. 数据库操作 创建数据库2. 表操作 创建表3. CRUD 操作二、外键
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2