鸿蒙5.0版开发：ArkTS基础组件（进展）

往期鸿蒙全套实战文章必看：

• 鸿蒙开发核心知识点，看这篇文章就够了

• 最新版！鸿蒙HarmonyOS Next应用开发实战学习路线

• 鸿蒙HarmonyOS NEXT开发技术最全学习路线指南

• 鸿蒙应用开发实战项目，看这一篇文章就够了（部分项目附源码）

---

进展

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

说明：

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

子组件

无

接口

进度（选项： ProgressOptions<Type>）

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

卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

参数：

参数名	参数类型	必填	参数描述
选项	ProgressOptions<Type>	是	进度条组件参数。

ProgressOptions<Type>对象说明

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

参数名	参数类型	必填	参数描述
价值	数	是	指定当前进度值。设置小于0的数值时置为0，设置大于total的数值时置为total。 默认值：0 卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。
总	数	否	指定进度总长。设置小于等于0的数值时置为100。 默认值：100 卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。
类型8+	ProgressType	否	指定进度条类型。 默认值：ProgressType.Linear 卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。
style（已弃用）	ProgressStyle	否	指定进度条样式。 该参数从API version8开始废弃，建议使用type替代。 默认值：ProgressStyle.Linear

ProgressType8+枚举说明

卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

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

ProgressStyle枚举说明

卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

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

属性

除支持通用属性外，还支持以下属性：

价值

value（值：数字）

设置当前进度值。设置小于0的数值时置为0，设置大于total的数值时置为total。非法数值不生效。

卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

系统能力：SystemCapability.ArkUI.ArkUI.Full

参数：

参数名	类型	必填	说明
价值	数	是	当前进度值。 默认值：0

颜色

color（值： ResourceColor |LinearGradient）

设置进度条前景色。

从API version 10开始支持利用LinearGradient设置Ring样式的渐变色。

卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用，暂不支持LinearGradient。

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

系统能力：SystemCapability.ArkUI.ArkUI.Full

参数：

参数名	类型	必填	说明
价值	资源颜色 |线性梯度10+	是	进度条前景色。 默认值： - 胶囊： API 版本 9及以下：'#ff007dff' API版本 10：'#33006cde' API 版本 11及以上：'#33007dff' - 环： API 版本 9及以下：'#ff007dff' API 版本 10及以上：起始端：'#ff86c1ff'，结束端：'#ff254ff7' - 其他样式：'#ff007dff'

背景颜色

backgroundColor（值：ResourceColor）

设置进度条底色。当设置通用属性backgroundColor时，生效的是进度条的底色，而不是整个Progress组件的背景色。

卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。

系统能力：SystemCapability.ArkUI.ArkUI.Full

参数：

参数名	类型	必填	说明
价值	资源颜色	是	进度条底色。 默认值： - 胶囊： API 版本 9及以下：'#19182431' API 版本 10及以上：'#33ffffff'- 环： API 版本 9及以下：'#19182431' API 版本 10：'#08182431' API 版本 11及以上：'#0c182431' - 其他样式：'#19182431'

款式8+

style（value： ProgressStyleOptions |胶囊样式选项 |RingStyleOptions |LinearStyleOptions |ScaleRingStyleOptions |EclipseStyleOptions）

设置组件的样式。

卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

系统能力：SystemCapability.ArkUI.ArkUI.Full

参数：

参数名	类型	必填	说明
value	ProgressStyleOptions8+ | CapsuleStyleOptions10+ |  RingStyleOptions10+ | LinearStyleOptions10+ |  ScaleRingStyleOptions10+ | EclipseStyleOptions10+	是	组件的样式。 - CapsuleStyleOptions：设置Capsule的样式。 - RingStyleOptions：设置Ring的样式。 - LinearStyleOptions：设置Linear的样式。 - ScaleRingStyleOptions：设置ScaleRing的样式。 - EclipseStyleOptions：设置Eclipse的样式。 - ProgressStyleOptions：仅可设置各类型进度条的基本样式。 ProgressStyleOptions，暂不支持其它的参数类型。

contentModifier12+

contentModifier(modifier:ContentModifier<ProgressConfiguration>)

定制progress内容区的方法。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名	类型	必填	说明
修饰语	ContentModifier<ProgressConfiguration>	是	在progress组件上，定制内容区的方法。 modifier： 内容修改器，开发者需要自定义class实现ContentModifier接口。

隐私敏感12+

privacySensitive（isPrivacySensitiveMode： 可选<boolean>）

设置隐私敏感。

系统能力：SystemCapability.ArkUI.ArkUI.Full

参数：

参数名	类型	必填	说明
isPrivacySensitiveMode	[可选<boolean>]	是	设置隐私敏感，隐私模式下进度清零，文字将被遮罩。 说明： 设置null则不敏感。 需要卡片框架支持。

进度配置12+

名称	参数类型	描述
价值	数	当前进度值。
总	数	进度总长。

ProgressStyleOptions8+

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

名称	参数类型	必填	描述
strokeWidth 的	长度	否	设置进度条宽度（不支持百分比设置）。 默认值：4.0vp
scaleCount	数	否	设置环形进度条总刻度数。 默认值：120
scaleWidth	长度	否	设置环形进度条刻度粗细（不支持百分比设置），刻度粗细大于进度条宽度时，为系统默认粗细。 默认值：2.0vp
启用SmoothEffect10+	布尔	否	进度平滑动效的开关。开启平滑动效后设置进度，进度会从当前值渐变至设定值，否则进度从当前值突变至设定值。 默认值：true

胶囊式选项10+

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

名称	参数类型	必填	描述
borderColor （边框颜色）	资源颜色	否	内描边颜色。 默认值： API version 10：'#33006cde'API version 11及以上：'#33007dff'
borderWidth 的宽度	长度	否	内描边宽度（不支持百分比设置）。 默认值：1vp
内容	字符串	否	文本内容，应用可自定义。
字体	字体	否	文本样式。 默认值： - 文本大小（不支持百分比设置）：12fp 其他文本参数跟随text组件的主题值。
字体颜色	资源颜色	否	文本颜色。 默认值：'#ff182431'
enableScanEffect	布尔	否	扫光效果的开关。 默认值：false
showDefaultPercentage 显示默认百分比	布尔	否	显示百分比文本的开关，开启后会在进度条上显示当前进度的百分比。设置了content属性时该属性不生效。 默认值：false
enableSmoothEffect	布尔	否	进度平滑动效的开关。开启平滑动效后设置进度，进度会从当前值渐变至设定值，否则进度从当前值突变至设定值。 默认值：true

RingStyleOptions10+ 戒指样式选项

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

名称	参数类型	必填	描述
strokeWidth 的	长度	否	设置进度条宽度（不支持百分比设置），宽度大于等于半径时，默认修改宽度至半径值的二分之一。 默认值：4.0vp
影子	布尔	否	进度条阴影开关。 默认值：false
地位	进度状态10+	否	进度条状态，当设置为LOADING时会开启检查更新动效，此时设置进度值不生效。当从LOADING设置为PROGRESSING，检查更新动效会执行到终点再停止。 默认值： ProgressStatus.PROGRESSING
enableScanEffect	布尔	否	进度条扫光效果的开关。 默认值： false
enableSmoothEffect	布尔	否	进度平滑动效的开关。开启平滑动效后设置进度，进度会从当前值渐变至设定值，否则进度从当前值突变至设定值。 默认值：true

LinearStyleOptions10+

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

名称	参数类型	必填	描述
strokeWidth 的	长度	否	设置进度条宽度（不支持百分比设置）。 默认值：4.0vp
strokeRadius - 笔画半径	PX |副总裁 |LPX |资源	否	设置线性进度条圆角半径。 取值范围[0， strokeWidth / 2]。默认值：strokeWidth / 2。
enableScanEffect	布尔	否	进度条扫光效果的开关。 默认值： false
enableSmoothEffect	布尔	否	进度平滑动效的开关。开启平滑动效后设置进度，进度会从当前值渐变至设定值，否则进度从当前值突变至设定值。 默认值：true

ScaleRingStyleOptions10+

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

名称	参数类型	必填	描述
strokeWidth 的	长度	否	设置进度条宽度（不支持百分比设置）。 默认值：4.0vp
scaleCount	数	否	设置环形进度条总刻度数。 默认值：120
scaleWidth	长度	否	设置环形进度条刻度粗细（不支持百分比设置），刻度粗细大于进度条宽度时，为系统默认粗细。 默认值：2.0vp
enableSmoothEffect	布尔	否	进度平滑动效的开关。开启平滑动效后设置进度，进度会从当前值渐变至设定值，否则进度从当前值突变至设定值。 默认值：true

EclipseStyleOptions10+

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

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

ProgressStatus10+枚举说明

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

名称	描述
装载	加载中。
进展	进度更新中。

事件

支持通用事件。

示例

示例1

各进度条基础属性效果。

<span style="background-color:#f6f8fa"><span style="color:#000000"><code><img data-cke-saved-src="https://docs.openharmony.cn/copy.png" src="https://docs.openharmony.cn/copy.png" alt="" width="20" height="20" class="copy-img" /><span style="color:green">// xxx.ets</span>
<span style="color:green">@Entry</span>
<span style="color:green">@Component</span>
struct <span style="color:#0055af">ProgressExample</span> {
  <span style="color:#000000">build</span>() {
    <span style="color:#0055af">Column</span>({ space: <span style="color:navy">15</span> }) {
      <span style="color:#0055af">Text</span>(<span style="color:green">'Linear Progress'</span>).<span style="color:#000000">fontSize</span>(<span style="color:navy">9</span>).<span style="color:#000000">fontColor</span>(<span style="color:navy">0xCCCCCC</span>).<span style="color:#000000">width</span>(<span style="color:green">'90%'</span>)
      <span style="color:#0055af">Progress</span>({ value: <span style="color:navy">10</span>, type: <span style="color:#0055af">ProgressType</span>.Linear }).<span style="color:#000000">width</span>(<span style="color:navy">200</span>)
      <span style="color:#0055af">Progress</span>({ value: <span style="color:navy">20</span>, total: <span style="color:navy">150</span>, type: <span style="color:#0055af">ProgressType</span>.Linear }).<span style="color:#000000">color</span>(<span style="color:#0055af">Color</span>.Grey).<span style="color:#000000">value</span>(<span style="color:navy">50</span>).<span style="color:#000000">width</span>(<span style="color:navy">200</span>)


      <span style="color:#0055af">Text</span>(<span style="color:green">'Eclipse Progress'</span>).<span style="color:#000000">fontSize</span>(<span style="color:navy">9</span>).<span style="color:#000000">fontColor</span>(<span style="color:navy">0xCCCCCC</span>).<span style="color:#000000">width</span>(<span style="color:green">'90%'</span>)
      <span style="color:#0055af">Row</span>({ space: <span style="color:navy">40</span> }) {
        <span style="color:#0055af">Progress</span>({ value: <span style="color:navy">10</span>, type: <span style="color:#0055af">ProgressType</span>.Eclipse }).<span style="color:#000000">width</span>(<span style="color:navy">100</span>)
        <span style="color:#0055af">Progress</span>({ value: <span style="color:navy">20</span>, total: <span style="color:navy">150</span>, type: <span style="color:#0055af">ProgressType</span>.Eclipse }).<span style="color:#000000">color</span>(<span style="color:#0055af">Color</span>.Grey).<span style="color:#000000">value</span>(<span style="color:navy">50</span>).<span style="color:#000000">width</span>(<span style="color:navy">100</span>)
      }

      <span style="color:#0055af">Text</span>(<span style="color:green">'ScaleRing Progress'</span>).<span style="color:#000000">fontSize</span>(<span style="color:navy">9</span>).<span style="color:#000000">fontColor</span>(<span style="color:navy">0xCCCCCC</span>).<span style="color:#000000">width</span>(<span style="color:green">'90%'</span>)
      <span style="color:#0055af">Row</span>({ space: <span style="color:navy">40</span> }) {
        <span style="color:#0055af">Progress</span>({ value: <span style="color:navy">10</span>, type: <span style="color:#0055af">ProgressType</span>.ScaleRing }).<span style="color:#000000">width</span>(<span style="color:navy">100</span>)
        <span style="color:#0055af">Progress</span>({ value: <span style="color:navy">20</span>, total: <span style="color:navy">150</span>, type: <span style="color:#0055af">ProgressType</span>.ScaleRing })
          .<span style="color:#000000">color</span>(<span style="color:#0055af">Color</span>.Grey).<span style="color:#000000">value</span>(<span style="color:navy">50</span>).<span style="color:#000000">width</span>(<span style="color:navy">100</span>)
          .<span style="color:#000000">style</span>({ strokeWidth: <span style="color:navy">15</span>, scaleCount: <span style="color:navy">15</span>, scaleWidth: <span style="color:navy">5</span> })
      }

      <span style="color:green">// scaleCount和scaleWidth效果对比</span>
      <span style="color:#0055af">Row</span>({ space: <span style="color:navy">40</span> }) {
        <span style="color:#0055af">Progress</span>({ value: <span style="color:navy">20</span>, total: <span style="color:navy">150</span>, type: <span style="color:#0055af">ProgressType</span>.ScaleRing })
          .<span style="color:#000000">color</span>(<span style="color:#0055af">Color</span>.Grey).<span style="color:#000000">value</span>(<span style="color:navy">50</span>).<span style="color:#000000">width</span>(<span style="color:navy">100</span>)
          .<span style="color:#000000">style</span>({ strokeWidth: <span style="color:navy">20</span>, scaleCount: <span style="color:navy">20</span>, scaleWidth: <span style="color:navy">5</span> })
        <span style="color:#0055af">Progress</span>({ value: <span style="color:navy">20</span>, total: <span style="color:navy">150</span>, type: <span style="color:#0055af">ProgressType</span>.ScaleRing })
          .<span style="color:#000000">color</span>(<span style="color:#0055af">Color</span>.Grey).<span style="color:#000000">value</span>(<span style="color:navy">50</span>).<span style="color:#000000">width</span>(<span style="color:navy">100</span>)
          .<span style="color:#000000">style</span>({ strokeWidth: <span style="color:navy">20</span>, scaleCount: <span style="color:navy">30</span>, scaleWidth: <span style="color:navy">3</span> })
      }

      <span style="color:#0055af">Text</span>(<span style="color:green">'Ring Progress'</span>).<span style="color:#000000">fontSize</span>(<span style="color:navy">9</span>).<span style="color:#000000">fontColor</span>(<span style="color:navy">0xCCCCCC</span>).<span style="color:#000000">width</span>(<span style="color:green">'90%'</span>)
      <span style="color:#0055af">Row</span>({ space: <span style="color:navy">40</span> }) {
        <span style="color:#0055af">Progress</span>({ value: <span style="color:navy">10</span>, type: <span style="color:#0055af">ProgressType</span>.Ring }).<span style="color:#000000">width</span>(<span style="color:navy">100</span>)
        <span style="color:#0055af">Progress</span>({ value: <span style="color:navy">20</span>, total: <span style="color:navy">150</span>, type: <span style="color:#0055af">ProgressType</span>.Ring })
          .<span style="color:#000000">color</span>(<span style="color:#0055af">Color</span>.Grey).<span style="color:#000000">value</span>(<span style="color:navy">50</span>).<span style="color:#000000">width</span>(<span style="color:navy">100</span>)
          .<span style="color:#000000">style</span>({ strokeWidth: <span style="color:navy">20</span> })
      }

      <span style="color:#0055af">Text</span>(<span style="color:green">'Capsule Progress'</span>).<span style="color:#000000">fontSize</span>(<span style="color:navy">9</span>).<span style="color:#000000">fontColor</span>(<span style="color:navy">0xCCCCCC</span>).<span style="color:#000000">width</span>(<span style="color:green">'90%'</span>)
      <span style="color:#0055af">Row</span>({ space: <span style="color:navy">40</span> }) {
        <span style="color:#0055af">Progress</span>({ value: <span style="color:navy">10</span>, type: <span style="color:#0055af">ProgressType</span>.Capsule }).<span style="color:#000000">width</span>(<span style="color:navy">100</span>).<span style="color:#000000">height</span>(<span style="color:navy">50</span>)
        <span style="color:#0055af">Progress</span>({ value: <span style="color:navy">20</span>, total: <span style="color:navy">150</span>, type: <span style="color:#0055af">ProgressType</span>.Capsule })
          .<span style="color:#000000">color</span>(<span style="color:#0055af">Color</span>.Grey)
          .<span style="color:#000000">value</span>(<span style="color:navy">50</span>)
          .<span style="color:#000000">width</span>(<span style="color:navy">100</span>)
          .<span style="color:#000000">height</span>(<span style="color:navy">50</span>)
      }
    }.<span style="color:#000000">width</span>(<span style="color:green">'100%'</span>).<span style="color:#000000">margin</span>({ top: <span style="color:navy">30</span> })
  }
}
<strong>ts</strong></code></span></span>

示例2

环形进度条视觉属性。

<span style="background-color:#f6f8fa"><span style="color:#000000"><code><img data-cke-saved-src="https://docs.openharmony.cn/copy.png" src="https://docs.openharmony.cn/copy.png" alt="" width="20" height="20" class="copy-img" /><span style="color:green">// xxx.ets</span>
<span style="color:green">@Entry</span>
<span style="color:green">@Component</span>
struct <span style="color:#0055af">ProgressExample</span> {
  <span style="color:olive">private</span> gradientColor: <span style="color:#0055af">LinearGradient</span> = <span style="color:olive">new</span> <span style="color:#0055af">LinearGradient</span>([{ color: <span style="color:#0055af">Color</span>.Yellow, offset: <span style="color:navy">0.5</span> },
                                                              { color: <span style="color:#0055af">Color</span>.Orange, offset: <span style="color:navy">1.0</span> }])
  <span style="color:#000000">build</span>() {
    <span style="color:#0055af">Column</span>({ space: <span style="color:navy">15</span> }) {
      <span style="color:#0055af">Text</span>(<span style="color:green">'Gradient Color'</span>).<span style="color:#000000">fontSize</span>(<span style="color:navy">9</span>).<span style="color:#000000">fontColor</span>(<span style="color:navy">0xCCCCCC</span>).<span style="color:#000000">width</span>(<span style="color:green">'90%'</span>)
      <span style="color:#0055af">Progress</span>({ value: <span style="color:navy">70</span>, total: <span style="color:navy">100</span>, type: <span style="color:#0055af">ProgressType</span>.Ring })
        .<span style="color:#000000">width</span>(<span style="color:navy">100</span>).<span style="color:#000000">style</span>({ strokeWidth: <span style="color:navy">20</span> })
        .<span style="color:#000000">color</span>(<span style="color:#0055af">this</span>.gradientColor)

      <span style="color:#0055af">Text</span>(<span style="color:green">'Shadow'</span>).<span style="color:#000000">fontSize</span>(<span style="color:navy">9</span>).<span style="color:#000000">fontColor</span>(<span style="color:navy">0xCCCCCC</span>).<span style="color:#000000">width</span>(<span style="color:green">'90%'</span>)
      <span style="color:#0055af">Progress</span>({ value: <span style="color:navy">70</span>, total: <span style="color:navy">100</span>, type: <span style="color:#0055af">ProgressType</span>.Ring })
        .<span style="color:#000000">width</span>(<span style="color:navy">120</span>).<span style="color:#000000">color</span>(<span style="color:#0055af">Color</span>.Orange)
        .<span style="color:#000000">style</span>({ strokeWidth: <span style="color:navy">20</span>, shadow: <span style="color:navy">true</span> })
    }.<span style="color:#000000">width</span>(<span style="color:green">'100%'</span>).<span style="color:#000000">padding</span>({ top: <span style="color:navy">5</span> })
  }
}
<strong>ts</strong></code></span></span>

示例3

环形进度条动效。

<span style="background-color:#f6f8fa"><span style="color:#000000"><code><img data-cke-saved-src="https://docs.openharmony.cn/copy.png" src="https://docs.openharmony.cn/copy.png" alt="" width="20" height="20" class="copy-img" /><span style="color:green">// xxx.ets</span>
<span style="color:green">@Entry</span>
<span style="color:green">@Component</span>
struct <span style="color:#0055af">ProgressExample</span> {
  <span style="color:olive">private</span> gradientColor: <span style="color:#0055af">LinearGradient</span> = <span style="color:olive">new</span> <span style="color:#0055af">LinearGradient</span>([{ color: <span style="color:#0055af">Color</span>.Yellow, offset: <span style="color:navy">0.5</span> },
                                                              { color: <span style="color:#0055af">Color</span>.Orange, offset: <span style="color:navy">1.0</span> }])
  <span style="color:#000000">build</span>() {
    <span style="color:#0055af">Column</span>({ space: <span style="color:navy">15</span> }) {
      <span style="color:#0055af">Text</span>(<span style="color:green">'Loading Effect'</span>).<span style="color:#000000">fontSize</span>(<span style="color:navy">9</span>).<span style="color:#000000">fontColor</span>(<span style="color:navy">0xCCCCCC</span>).<span style="color:#000000">width</span>(<span style="color:green">'90%'</span>)
      <span style="color:#0055af">Progress</span>({ value: <span style="color:navy">0</span>, total: <span style="color:navy">100</span>, type: <span style="color:#0055af">ProgressType</span>.Ring })
        .<span style="color:#000000">width</span>(<span style="color:navy">100</span>).<span style="color:#000000">color</span>(<span style="color:#0055af">Color</span>.Blue)
        .<span style="color:#000000">style</span>({ strokeWidth: <span style="color:navy">20</span>, status: <span style="color:#0055af">ProgressStatus</span>.LOADING })

      <span style="color:#0055af">Text</span>(<span style="color:green">'Scan Effect'</span>).<span style="color:#000000">fontSize</span>(<span style="color:navy">9</span>).<span style="color:#000000">fontColor</span>(<span style="color:navy">0xCCCCCC</span>).<span style="color:#000000">width</span>(<span style="color:green">'90%'</span>)
      <span style="color:#0055af">Progress</span>({ value: <span style="color:navy">30</span>, total: <span style="color:navy">100</span>, type: <span style="color:#0055af">ProgressType</span>.Ring })
        .<span style="color:#000000">width</span>(<span style="color:navy">100</span>).<span style="color:#000000">color</span>(<span style="color:#0055af">Color</span>.Orange)
        .<span style="color:#000000">style</span>({ strokeWidth: <span style="color:navy">20</span>, enableScanEffect: <span style="color:navy">true</span> })
    }.<span style="color:#000000">width</span>(<span style="color:green">'100%'</span>).<span style="color:#000000">padding</span>({ top: <span style="color:navy">5</span> })
  }
}
<strong>ts</strong></code></span></span>

示例4

胶囊形进度条视觉属性。

<span style="background-color:#f6f8fa"><span style="color:#000000"><code><img data-cke-saved-src="https://docs.openharmony.cn/copy.png" src="https://docs.openharmony.cn/copy.png" alt="" width="20" height="20" class="copy-img" /><span style="color:green">// xxx.ets</span>
<span style="color:green">@Entry</span>
<span style="color:green">@Component</span>
struct <span style="color:#0055af">ProgressExample</span> {

  <span style="color:#000000">build</span>() {
    <span style="color:#0055af">Column</span>({ space: <span style="color:navy">15</span> }) {
      <span style="color:#0055af">Row</span>({ space: <span style="color:navy">40</span> }) {
        <span style="color:#0055af">Progress</span>({ value: <span style="color:navy">100</span>, total: <span style="color:navy">100</span>,type: <span style="color:#0055af">ProgressType</span>.Capsule }).<span style="color:#000000">width</span>(<span style="color:navy">100</span>).<span style="color:#000000">height</span>(<span style="color:navy">50</span>)
          .<span style="color:#000000">style</span>({borderColor: <span style="color:#0055af">Color</span>.Blue, borderWidth: <span style="color:navy">1</span>, content: <span style="color:green">'Installing...'</span>,
                  font: {size: <span style="color:navy">13</span>, style: <span style="color:#0055af">FontStyle</span>.Normal}, fontColor: <span style="color:#0055af">Color</span>.Gray,
                  enableScanEffect: <span style="color:navy">false</span>, showDefaultPercentage: <span style="color:navy">false</span>})
      }
    }.<span style="color:#000000">width</span>(<span style="color:green">'100%'</span>).<span style="color:#000000">padding</span>({ top: <span style="color:navy">5</span> })
  }
}
<strong>ts</strong></code></span></span>

示例5

进度平滑动效。

<span style="background-color:#f6f8fa"><span style="color:#000000"><code><img data-cke-saved-src="https://docs.openharmony.cn/copy.png" src="https://docs.openharmony.cn/copy.png" alt="" width="20" height="20" class="copy-img" /><span style="color:green">// xxx.ets</span>
<span style="color:green">@Entry</span>
<span style="color:green">@Component</span>
struct <span style="color:#0055af">Index</span> {
  <span style="color:green">@State</span> value: <span style="color:green">number</span> = <span style="color:navy">0</span>

  <span style="color:#000000">build</span>() {
    <span style="color:#0055af">Column</span>({space: <span style="color:navy">10</span>}) {
      <span style="color:#0055af">Text</span>(<span style="color:green">'enableSmoothEffect: true'</span>).<span style="color:#000000">fontSize</span>(<span style="color:navy">9</span>).<span style="color:#000000">fontColor</span>(<span style="color:navy">0xCCCCCC</span>).<span style="color:#000000">width</span>(<span style="color:green">'90%'</span>).<span style="color:#000000">margin</span>(<span style="color:navy">5</span>)
        .<span style="color:#000000">margin</span>({top: <span style="color:navy">20</span>})
      <span style="color:#0055af">Progress</span>({value: <span style="color:#0055af">this</span>.value, total: <span style="color:navy">100</span>, type:<span style="color:#0055af">ProgressType</span>.Linear})
        .<span style="color:#000000">style</span>({strokeWidth: <span style="color:navy">10</span>, enableSmoothEffect: <span style="color:navy">true</span>})

      <span style="color:#0055af">Text</span>(<span style="color:green">'enableSmoothEffect: false'</span>).<span style="color:#000000">fontSize</span>(<span style="color:navy">9</span>).<span style="color:#000000">fontColor</span>(<span style="color:navy">0xCCCCCC</span>).<span style="color:#000000">width</span>(<span style="color:green">'90%'</span>).<span style="color:#000000">margin</span>(<span style="color:navy">5</span>)
      <span style="color:#0055af">Progress</span>({value: <span style="color:#0055af">this</span>.value, total: <span style="color:navy">100</span>, type:<span style="color:#0055af">ProgressType</span>.Linear})
        .<span style="color:#000000">style</span>({strokeWidth: <span style="color:navy">10</span>, enableSmoothEffect: <span style="color:navy">false</span>})

      <span style="color:#0055af">Button</span>(<span style="color:green">'value +10'</span>).<span style="color:#000000">onClick</span>(<span style="color:olive">() =></span> {
        <span style="color:#0055af">this</span>.value += <span style="color:navy">10</span>
      })
        .<span style="color:#000000">width</span>(<span style="color:navy">75</span>)
        .<span style="color:#000000">height</span>(<span style="color:navy">15</span>)
        .<span style="color:#000000">fontSize</span>(<span style="color:navy">9</span>)
    }
    .<span style="color:#000000">width</span>(<span style="color:green">'50%'</span>)
    .<span style="color:#000000">height</span>(<span style="color:green">'100%'</span>)
    .<span style="color:#000000">margin</span>({left:<span style="color:navy">20</span>})
  }
}

<strong>ts</strong></code></span></span>

示例6

该示例实现了自定义进度条的功能，自定义实现星形，其中总进度为3，且当前值可通过按钮进行增减，达到的进度被填充自定义颜色。

<span style="background-color:#f6f8fa"><span style="color:#000000"><code><img data-cke-saved-src="https://docs.openharmony.cn/copy.png" src="https://docs.openharmony.cn/copy.png" alt="" width="20" height="20" class="copy-img" /><span style="color:green">// xxx.ets</span>
<span style="color:olive">class</span> <span style="color:#0055af">MyProgressModifier</span> <span style="color:olive">implements</span> <span style="color:#0055af">ContentModifier</span><<span style="color:#0055af">ProgressConfiguration</span>> {
  color: <span style="color:#0055af">Color</span> = <span style="color:#0055af">Color</span>.White


  <span style="color:#000000">constructor</span>(<span style="color:#0055af">color:Color</span>) {
    <span style="color:#0055af">this</span>.color = color
  }
  <span style="color:#000000">applyContent</span>() : <span style="color:#0055af">WrappedBuilder</span><[<span style="color:#0055af">ProgressConfiguration</span>]>
  {
    <span style="color:olive">return</span> <span style="color:#000000">wrapBuilder</span>(myProgress)
  }
}

<span style="color:green">@Builder</span> <span style="color:olive">function</span> <span style="color:#000000">myProgress</span>(<span style="color:#0055af">config: ProgressConfiguration </span>) {

  <span style="color:#0055af">Column</span>({space:<span style="color:navy">30</span>}) {
    <span style="color:#0055af">Text</span>(<span style="color:green">"当前进度："</span> + config.value + <span style="color:green">"/"</span> + config.total).<span style="color:#000000">fontSize</span>(<span style="color:navy">20</span>)
    <span style="color:#0055af">Row</span>() {
      <span style="color:#0055af">Flex</span>({ justifyContent: <span style="color:#0055af">FlexAlign</span>.SpaceBetween }) {
        <span style="color:#0055af">Path</span>()
          .<span style="color:#000000">width</span>(<span style="color:green">'30%'</span>)
          .<span style="color:#000000">height</span>(<span style="color:green">'30%'</span>)
          .<span style="color:#000000">commands</span>(<span style="color:green">'M108 0 L141 70 L218 78.3 L162 131 L175 205 L108 170 L41.2 205 L55 131 L1 78 L75 68 L108 0 Z'</span>)
          .<span style="color:#000000">fill</span>(config.enabled && config.value >=<span style="color:navy">1</span> ? (config.contentModifier <span style="color:olive">as</span> <span style="color:#0055af">MyProgressModifier</span>).color : <span style="color:#0055af">Color</span>.White)
          .<span style="color:#000000">stroke</span>(<span style="color:#0055af">Color</span>.Black)
          .<span style="color:#000000">strokeWidth</span>(<span style="color:navy">3</span>)
        <span style="color:#0055af">Path</span>()
          .<span style="color:#000000">width</span>(<span style="color:green">'30%'</span>)
          .<span style="color:#000000">height</span>(<span style="color:green">'30%'</span>)
          .<span style="color:#000000">commands</span>(<span style="color:green">'M108 0 L141 70 L218 78.3 L162 131 L175 205 L108 170 L41.2 205 L55 131 L1 78 L75 68 L108 0 Z'</span>)
          .<span style="color:#000000">fill</span>(config.enabled && config.value >=<span style="color:navy">2</span> ? (config.contentModifier <span style="color:olive">as</span> <span style="color:#0055af">MyProgressModifier</span>).color : <span style="color:#0055af">Color</span>.White)
          .<span style="color:#000000">stroke</span>(<span style="color:#0055af">Color</span>.Black)
          .<span style="color:#000000">strokeWidth</span>(<span style="color:navy">3</span>)
        <span style="color:#0055af">Path</span>()
          .<span style="color:#000000">width</span>(<span style="color:green">'30%'</span>)
          .<span style="color:#000000">height</span>(<span style="color:green">'30%'</span>)
          .<span style="color:#000000">commands</span>(<span style="color:green">'M108 0 L141 70 L218 78.3 L162 131 L175 205 L108 170 L41.2 205 L55 131 L1 78 L75 68 L108 0 Z'</span>)
          .<span style="color:#000000">fill</span>(config.enabled && config.value >=<span style="color:navy">3</span> ? (config.contentModifier <span style="color:olive">as</span> <span style="color:#0055af">MyProgressModifier</span>).color : <span style="color:#0055af">Color</span>.White)
          .<span style="color:#000000">stroke</span>(<span style="color:#0055af">Color</span>.Black)
          .<span style="color:#000000">strokeWidth</span>(<span style="color:navy">3</span>)
      }.<span style="color:#000000">width</span>(<span style="color:green">'100%'</span>)
    }
  }.<span style="color:#000000">margin</span>({bottom:<span style="color:navy">100</span>})
}

<span style="color:green">@Entry</span>
<span style="color:green">@Component</span>
struct <span style="color:#0055af">Index</span> {
  <span style="color:green">@State</span> currentValue: <span style="color:green">number</span> = <span style="color:navy">0</span>
  modifier = <span style="color:olive">new</span> <span style="color:#0055af">MyProgressModifier</span>(<span style="color:#0055af">Color</span>.Red)
  <span style="color:green">@State</span> myModifier:(<span style="color:#0055af">MyProgressModifier</span> | <span style="color:navy">undefined</span>)  = <span style="color:#0055af">this</span>.modifier
  <span style="color:#000000">build</span>() {
    <span style="color:#0055af">Column</span>() {
        <span style="color:#0055af">Progress</span>({ value: <span style="color:#0055af">this</span>.currentValue, total: <span style="color:navy">3</span>, type: <span style="color:#0055af">ProgressType</span>.Ring}).<span style="color:#000000">contentModifier</span>(<span style="color:#0055af">this</span>.modifier)
        <span style="color:#0055af">Button</span>(<span style="color:green">'Progress++'</span>).<span style="color:#000000">onClick</span>(<span style="color:olive">()=></span>{
          <span style="color:olive">if</span> (<span style="color:#0055af">this</span>.currentValue < <span style="color:navy">3</span>) {
            <span style="color:#0055af">this</span>.currentValue += <span style="color:navy">1</span>
          }
        }).<span style="color:#000000">width</span>(<span style="color:green">'30%'</span>)
        <span style="color:#0055af">Button</span>(<span style="color:green">'addProgress--'</span>).<span style="color:#000000">onClick</span>(<span style="color:olive">()=></span>{
          <span style="color:olive">if</span> (<span style="color:#0055af">this</span>.currentValue > <span style="color:navy">0</span>) {
            <span style="color:#0055af">this</span>.currentValue -= <span style="color:navy">1</span>
          }
        }).<span style="color:#000000">width</span>(<span style="color:green">'30%'</span>)
    }.<span style="color:#000000">width</span>(<span style="color:green">'100%'</span>).<span style="color:#000000">height</span>(<span style="color:green">'100%'</span>)
  }
}

<strong>ts</strong></code></span></span>

示例7

该示例展示了如何配置隐私隐藏，效果展示需要卡片框架支持

<span style="background-color:#f6f8fa"><span style="color:#000000"><code><img data-cke-saved-src="https://docs.openharmony.cn/copy.png" src="https://docs.openharmony.cn/copy.png" alt="" width="20" height="20" class="copy-img" /><span style="color:green">@Entry</span>
<span style="color:green">@Component</span>
struct <span style="color:#0055af">ProgressExample</span> {
  <span style="color:#000000">build</span>() {
    <span style="color:#0055af">Scroll</span>() {
      <span style="color:#0055af">Column</span>({ space: <span style="color:navy">15</span> }) {
        <span style="color:#0055af">Row</span>() {
          <span style="color:#0055af">Progress</span>({ value: <span style="color:navy">50</span>, total: <span style="color:navy">100</span>, type: <span style="color:#0055af">ProgressType</span>.Capsule }).<span style="color:#000000">width</span>(<span style="color:navy">100</span>).<span style="color:#000000">height</span>(<span style="color:navy">50</span>)
            .<span style="color:#000000">style</span>({
              borderColor: <span style="color:#0055af">Color</span>.Blue,
              borderWidth: <span style="color:navy">1</span>,
              content: <span style="color:green">'Installing...'</span>,
              font: { size: <span style="color:navy">13</span>, style: <span style="color:#0055af">FontStyle</span>.Normal },
              fontColor: <span style="color:#0055af">Color</span>.Gray,
              enableScanEffect: <span style="color:navy">false</span>,
              showDefaultPercentage: <span style="color:navy">true</span>
            })
            .<span style="color:#000000">privacySensitive</span>(<span style="color:navy">true</span>)
        }
      }
    }
  }
}
<strong>ts</strong></code></span></span>

看完三件事❤️

• 如果你觉得这篇内容对你还蛮有帮助，我想邀请你帮我三个小忙：
• 点赞，转发，有你们的 『点赞和评论』，才是我创造的动力。
• 关注作者，不定期分享原创知识。
• 同时可以期待后续文章ing🚀。