harmony 鸿蒙Progress

2025-06-12
浏览 (7)

Progress

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

说明：

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

子组件

无

接口

Progress(options: ProgressOptions)

创建进度条组件。

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

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

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

参数：

参数名	类型	必填	说明
options	ProgressOptions	是	按进度条类型不同，设置不同属性的进度条组件参数。

ProgressOptions<Type>对象说明

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

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

名称	类型	必填	说明
value	number	是	指定当前进度值。设置小于0的数值时置为0，设置大于total的数值时置为total。默认值：0 取值范围：[0, total] 卡片能力：从API version 9开始，该接口支持在ArkTS卡片中使用。
total	number	否	指定进度总长。设置小于等于0的数值时置为100。默认值：100 取值范围：[0, 2147483647] 卡片能力：从API version 9开始，该接口支持在ArkTS卡片中使用。
type⁸⁺	ProgressType	否	指定进度条类型。默认值：ProgressType.Linear 卡片能力：从API version 9开始，该接口支持在ArkTS卡片中使用。
style^(deprecated)	ProgressStyle	否	指定进度条样式。该参数从API version8开始废弃，建议使用type替代。默认值：ProgressStyle.Linear

ProgressType⁸⁺枚举说明

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

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

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

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

ProgressStyle枚举说明

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

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

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

名称	说明
Linear	线性样式。
Ring⁸⁺	环形无刻度样式，环形圆环逐渐显示至完全填充效果。
Eclipse	圆形样式，显示类似月圆月缺的进度展示效果，从月牙逐渐变化至满月。
ScaleRing⁸⁺	环形有刻度样式，显示类似时钟刻度形式的进度展示效果。
Capsule⁸⁺	胶囊样式，头尾两端圆弧处的进度展示效果与Eclipse相同；中段处的进度展示效果与Linear相同。高度大于宽度的时候自适应垂直显示。

ProgressStyleMap对象说明

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

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

名称	类型
ProgressType.Linear	LinearStyleOptions¹⁰⁺  \| ProgressStyleOptions⁸⁺
ProgressType.Ring	RingStyleOptions¹⁰⁺  \| ProgressStyleOptions⁸⁺
ProgressType.Eclipse	EclipseStyleOptions¹⁰⁺  \| ProgressStyleOptions⁸⁺
ProgressType.ScaleRing	ScaleRingStyleOptions¹⁰⁺  \| ProgressStyleOptions⁸⁺
ProgressType.Capsule	CapsuleStyleOptions¹⁰⁺  \| ProgressStyleOptions⁸⁺

属性

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

说明：

该组件重写了通用属性backgroundColor，直接添加在Progress组件上，设置进度条的底色。如需设置整个Progress组件的背景色，需要在外层容器上添加backgroundColor，并用该容器包裹Progress组件。

value

value(value: number)

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

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

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

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

参数：

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

color

color(value: ResourceColor|LinearGradient)

设置进度条前景色。

从API version 10开始支持利用LinearGradient设置Ring样式的渐变色。Ring类型不建议设置透明度，如需设置透明度，建议使用DataPanel。

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

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

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

参数：

参数名	类型	必填	说明
value	ResourceColor \| LinearGradient¹⁰⁺	是	进度条前景色。默认值： - Capsule：    API version 9及以下：’#ff007dff’    API version 10：’#33006cde’    API version 11及以上：’#33007dff’ - Ring：    API version 9及以下：’#ff007dff’    API version 10及以上：起始端：’#ff86c1ff’，结束端：’#ff254ff7’ - 其他样式：’#ff007dff’

style⁸⁺

设置组件的样式。

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

参数：

参数名	类型	必填	说明
value	ProgressStyleOptions⁸⁺ \| CapsuleStyleOptions¹⁰⁺ \|  RingStyleOptions¹⁰⁺ \| LinearStyleOptions¹⁰⁺ \|  ScaleRingStyleOptions¹⁰⁺ \| EclipseStyleOptions¹⁰⁺	是	组件的样式。 - CapsuleStyleOptions：设置Capsule的样式。 - RingStyleOptions：设置Ring的样式。 - LinearStyleOptions：设置Linear的样式。 - ScaleRingStyleOptions：设置ScaleRing的样式。 - EclipseStyleOptions：设置Eclipse的样式。 - ProgressStyleOptions：仅可设置各类型进度条的strokeWidth、scaleCount、scaleWidth，仅对支持这些样式设置的进度条生效。

contentModifier¹²⁺

contentModifier(modifier:ContentModifier<ProgressConfiguration>)

定制progress内容区的方法。

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

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

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

privacySensitive¹²⁺

privacySensitive(isPrivacySensitiveMode: Optional<boolean>)

设置隐私敏感。

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

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

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

参数：

参数名	类型	必填	说明
isPrivacySensitiveMode	[Optional<boolean>]	是	设置隐私敏感，隐私模式下进度清零，文字将被遮罩。true表示打开隐私敏感，false表示关闭隐私敏感。说明：设置null表示不敏感。需要在卡片中使用Progress，并用FormComponent组件设置隐私遮罩属性，显示卡片时才有隐私遮罩效果。

ProgressConfiguration¹²⁺

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

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

名称	类型	必填	说明
value	number	是	当前进度值。当设置的数值小于0时，将其置为0。当设置的数值大于total时，将其置为total。默认值：0 取值范围：[0, total]
total	number	是	进度总长。取值范围：[0, 2147483647]

CommonProgressStyleOptions¹⁰⁺

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

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

名称	类型	必填	说明
enableSmoothEffect	boolean	否	进度平滑动效的开关。开启平滑动效后设置进度，进度会从当前值渐变至设定值，页面会有进度变化的动效；否则进度从当前值突变至设定值，页面无动效。默认值：true，true表示开启进度平滑动效，false表示关闭进度平滑动效。

ScanEffectOptions¹⁰⁺

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

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

名称	类型	必填	说明
enableScanEffect	boolean	否	扫光效果的开关。默认值：false，false表示关闭扫光效果，true表示开启扫光效果。仅支持Linear、Ring、Capsule类型的进度条。

ProgressStyleOptions⁸⁺

继承自CommonProgressStyleOptions。

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

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

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

名称	类型	必填	说明
strokeWidth	Length	否	设置进度条宽度（不支持百分比设置）。默认值：4.0vp
scaleCount	number	否	设置环形进度条总刻度数。默认值：120 取值范围：[2, min(width, height)/scaleWidth/2/π]，超出取值范围时，样式显示为环形无刻度进度条。默认情况下宽高最小为77vp。
scaleWidth	Length	否	设置环形进度条刻度粗细（不支持百分比设置）。刻度粗细大于进度条宽度时，为系统默认粗细。默认值：2.0vp

CapsuleStyleOptions¹⁰⁺

继承自ScanEffectOptions和CommonProgressStyleOptions。

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

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

名称	类型	必填	说明
borderColor	ResourceColor	否	内描边颜色。默认值： API version 10：’#33006cde’ API version 11及以上：’#33007dff’
borderWidth	Length	否	内描边宽度（不支持百分比设置）。默认值：1vp
content	ResourceStr	否	文本内容，应用可自定义。从API version 20开始，支持Resource类型。
font	Font	否	文本样式。默认值： - 文本大小（不支持百分比设置）：12fp 其他文本参数跟随text组件的主题值。
fontColor	ResourceColor	否	文本颜色。默认值：’#ff182431’
showDefaultPercentage	boolean	否	显示百分比文本的开关。开启后，进度条上显示当前进度的百分比。设置了content属性时该属性不生效。默认值：false，false表示不显示百分比文本，true表示显示百分比文本。
borderRadius¹⁸⁺	LengthMetrics	否	Capsule进度条圆角半径（不支持百分比设置）。取值范围：[0, height/2]。默认值：height / 2。设置非法数值时，按照默认值处理。

RingStyleOptions¹⁰⁺

继承自ScanEffectOptions和CommonProgressStyleOptions。

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

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

名称	类型	必填	说明
strokeWidth	Length	否	设置进度条宽度（不支持百分比设置）。当宽度大于等于半径时，宽度默认修改为半径值的二分之一。默认值：4.0vp
shadow	boolean	否	进度条阴影开关。默认值：false，false表示关闭进度条阴影，true表示打开进度条阴影。
status	ProgressStatus¹⁰⁺	否	设置进度条状态。当设置为ProgressStatus.LOADING时会开启检查更新动效，此时设置进度值不生效。当从ProgressStatus.LOADING设置为ProgressStatus.PROGRESSING时，检查更新动效会执行到终点再停止。默认值：ProgressStatus.PROGRESSING

LinearStyleOptions¹⁰⁺

继承自ScanEffectOptions和CommonProgressStyleOptions。

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

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

名称	类型	必填	说明
strokeWidth	Length	否	设置进度条宽度（不支持百分比设置）。默认值：4.0vp
strokeRadius	PX \|VP \|LPX \|Resource	否	设置线性进度条的圆角半径。取值范围[0, strokeWidth / 2]。默认值：strokeWidth / 2。

ScaleRingStyleOptions¹⁰⁺

继承自CommonProgressStyleOptions。

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

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

名称	类型	必填	说明
strokeWidth	Length	否	设置进度条宽度（不支持百分比设置）。默认值：4.0vp
scaleCount	number	否	设置环形进度条总刻度数。默认值：120 取值范围：[2, min(width, height)/scaleWidth/2/π]，超出取值范围时，样式显示为环形无刻度进度条。
scaleWidth	Length	否	设置环形进度条刻度粗细（不支持百分比设置）。刻度粗细大于进度条宽度时，为系统默认粗细。默认值：2.0vp

EclipseStyleOptions¹⁰⁺

继承自CommonProgressStyleOptions。

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

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

ProgressStatus¹⁰⁺枚举说明

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

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

名称	说明
LOADING	加载中。
PROGRESSING	进度更新中。

事件

支持通用事件。

示例

示例1（设置进度条的类型）

该示例通过type属性，实现了设置进度条类型的功能。

// 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（设置环形进度条属性）

该示例通过style接口的strokeWidth和shadow属性，实现了环形进度条视觉属性设置功能。

// 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（设置环形进度条动画）

该示例通过style接口的status和enableScanEffect属性，实现了环形进度条动效的开关功能。

// xxx.ets
@Entry
@Component
struct ProgressExample {
  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（设置胶囊形进度条属性）

该示例通过style接口的borderColor、borderWidth、content、font、fontColor、enableScanEffect、showDefaultPercentage属性，实现胶囊形进度条的视觉属性设置。

// 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（设置进度平滑动效）

该示例通过style接口的enableSmoothEffect属性，实现了进度平滑动效开关的功能。

// xxx.ets
@Entry
@Component
struct Index {
  @State value: number = 0;

  build() {
    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

示例6（设置定制内容区）

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

// xxx.ets
class MyProgressModifier implements ContentModifier<ProgressConfiguration> {
  color: Color = Color.White;

  constructor(color: Color) {
    this.color = color;
  }

  applyContent(): WrappedBuilder<[ProgressConfiguration]> {
    return wrapBuilder(myProgress);
  }
}

@Builder
function myProgress(config: ProgressConfiguration) {

  Column({ space: 30 }) {
    Text("当前进度：" + config.value + "/" + config.total).fontSize(20)
    Row() {
      Flex({ justifyContent: FlexAlign.SpaceBetween }) {
        Path()
          .width('30%')
          .height('30%')
          .commands('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')
          .fill(config.enabled && config.value >= 1 ? (config.contentModifier as MyProgressModifier).color :
          Color.White)
          .stroke(Color.Black)
          .strokeWidth(3)
        Path()
          .width('30%')
          .height('30%')
          .commands('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')
          .fill(config.enabled && config.value >= 2 ? (config.contentModifier as MyProgressModifier).color :
          Color.White)
          .stroke(Color.Black)
          .strokeWidth(3)
        Path()
          .width('30%')
          .height('30%')
          .commands('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')
          .fill(config.enabled && config.value >= 3 ? (config.contentModifier as MyProgressModifier).color :
          Color.White)
          .stroke(Color.Black)
          .strokeWidth(3)
      }.width('100%')
    }
  }.margin({ bottom: 100 })
}

@Entry
@Component
struct Index {
  @State currentValue: number = 0;
  modifier = new MyProgressModifier(Color.Red);
  @State myModifier: (MyProgressModifier|undefined) = this.modifier;

  build() {
    Column() {
      Progress({ value: this.currentValue, total: 3, type: ProgressType.Ring }).contentModifier(this.modifier)
      Button('Progress++').onClick(() => {
        if (this.currentValue < 3) {
          this.currentValue += 1;
        }
      }).width('30%')
      Button('Progress--').onClick(() => {
        if (this.currentValue > 0) {
          this.currentValue -= 1;
        }
      }).width('30%')
    }.width('100%').height('100%')
  }
}

progressCustom

示例7（设置隐私隐藏）

该示例通过privacySensitive属性，实现了隐私隐藏效果。效果展示需要卡片框架支持。

@Entry
@Component
struct ProgressExample {
  build() {
    Row() {
      Column({ space: 15 }) {
        Progress({ value: 33, total: 100, type: ProgressType.Capsule }).width(300).height(50)
          .color(Color.Blue)
          .style({
            borderWidth: 5,
            font: { size: 13, style: FontStyle.Normal },
            enableScanEffect: false,
            showDefaultPercentage: true
          })
          .privacySensitive(true)
        Progress({ value: 33, total: 100, type: ProgressType.Capsule }).width(300).height(50)
          .color(Color.Blue)
          .style({
            borderWidth: 5,
            content: 'Installing...',
            font: { size: 13, style: FontStyle.Normal },
            enableScanEffect: false,
          })
          .privacySensitive(true)
      }
    }
  }
}

progressSensitive

示例8（设置capsule进度条圆角半径）

该示例通过borderRadius属性，实现了capsule类型进度条圆角半径设置。

import { LengthMetrics } from '@kit.ArkUI';

@Entry
@Component
struct ProgressExample {
  build() {
    Column({ space: 15 }) {
      Text('Capsule Progress').fontSize(9).width('90%')
      Row({ space: 15 }) {
        Progress({ value: 30, total: 100, type: ProgressType.Capsule })
          .style({ content: "默认圆角", borderWidth: 5 })
          .width(100)
          .height(60)
      }

      Row({ space: 15 }) {
        Progress({ value: 30, total: 100, type: ProgressType.Capsule })
          .style({ content: "圆角为20vp", borderWidth: 5, borderRadius: LengthMetrics.vp(20) })
          .width(100)
          .height(60)
      }
    }
    .width('100%')
    .margin({ top: 30 })
  }
}

capsuleProgressBorderRadius

你可能感兴趣的鸿蒙文章

harmony 鸿蒙ComposeListItem

harmony 鸿蒙ComposeTitleBar

harmony 鸿蒙advanced.Counter

harmony 鸿蒙弹出框 (Dialog)

harmony 鸿蒙DialogV2

0 赞

所属分类： 后端技术
本文标签：
版权声明： 原创文章如转载，请注明本文链接: https://www.seaxiang.com/blog/ts6m6u

harmony 鸿蒙Progress

Progress

子组件

接口

ProgressOptions<Type>对象说明

ProgressType⁸⁺枚举说明

ProgressStyle枚举说明

ProgressStyleMap对象说明

属性

value

color

style⁸⁺

contentModifier¹²⁺

privacySensitive¹²⁺

ProgressConfiguration¹²⁺

CommonProgressStyleOptions¹⁰⁺

ScanEffectOptions¹⁰⁺

ProgressStyleOptions⁸⁺

CapsuleStyleOptions¹⁰⁺

RingStyleOptions¹⁰⁺

LinearStyleOptions¹⁰⁺

ScaleRingStyleOptions¹⁰⁺

EclipseStyleOptions¹⁰⁺

ProgressStatus¹⁰⁺枚举说明

事件

示例

示例1（设置进度条的类型）

示例2（设置环形进度条属性）

示例3（设置环形进度条动画）

示例4（设置胶囊形进度条属性）

示例5（设置进度平滑动效）

示例6（设置定制内容区）

示例7（设置隐私隐藏）

示例8（设置capsule进度条圆角半径）

你可能感兴趣的鸿蒙文章

热门推荐

标签云

最新文章

本文目录

harmony 鸿蒙Progress

Progress

子组件

接口

ProgressOptions<Type>对象说明

ProgressType8+枚举说明

ProgressStyle枚举说明

ProgressStyleMap对象说明

属性

value

color

style8+

contentModifier12+

privacySensitive12+

ProgressConfiguration12+

CommonProgressStyleOptions10+

ScanEffectOptions10+

ProgressStyleOptions8+

CapsuleStyleOptions10+

RingStyleOptions10+

LinearStyleOptions10+

ScaleRingStyleOptions10+

EclipseStyleOptions10+

ProgressStatus10+枚举说明

事件

示例

示例1（设置进度条的类型）

示例2（设置环形进度条属性）

示例3（设置环形进度条动画）

示例4（设置胶囊形进度条属性）

示例5（设置进度平滑动效）

示例6（设置定制内容区）

示例7（设置隐私隐藏）

示例8（设置capsule进度条圆角半径）

你可能感兴趣的鸿蒙文章

热门推荐

标签云

最新文章

本文目录

ProgressType⁸⁺枚举说明

style⁸⁺

contentModifier¹²⁺

privacySensitive¹²⁺

ProgressConfiguration¹²⁺

CommonProgressStyleOptions¹⁰⁺

ScanEffectOptions¹⁰⁺

ProgressStyleOptions⁸⁺

CapsuleStyleOptions¹⁰⁺

RingStyleOptions¹⁰⁺

LinearStyleOptions¹⁰⁺

ScaleRingStyleOptions¹⁰⁺

EclipseStyleOptions¹⁰⁺

ProgressStatus¹⁰⁺枚举说明