OpenHarmony进度条为何不显示

在 OpenHarmony（ArkUI）里“进度条不显示” usually 不是组件坏了，而是使用方式或布局条件不满足。下面按最常见原因给你排查清单，基本能覆盖 90% 的情况。

一、最常见原因

1️⃣ Progress 没有设置宽高

Progress 默认是没有尺寸的，必须显式给宽高。

❌ 错误示例：

Progress({ value: 50, total: 100, type: ProgressType.Linear })

✅ 正确示例：

Progress({ value: 50, total: 100, type: ProgressType.Linear })
  .width('80%')
  .height(10)

不写 width/height，进度条直接“看不见”。

2️⃣ 父容器没有尺寸（被压缩成 0）

常见于：

• Row / Column 没有宽高
• 在 Scroll / List 里没约束尺寸

示例：

Column() {
  Progress({ value: 30, total: 100 })
}

如果 Column 是 0 高度，Progress 也显示不出来。

✅ 建议：

Column() {
  Progress({ value: 30, total: 100 })
    .width('100%')
    .height(8)
}
.width('100%')

3️⃣ value / total 设置错误

• value > total → 不显示或异常
• total <= 0 → 不显示

✅ 正确：

Progress({ value: 40, total: 100 })

4️⃣ 使用了 Circular 但没给尺寸

ProgressType.Circular 必须有宽高，否则不显示。

Progress({ value: 60, total: 100, type: ProgressType.Circular })
  .width(50)
  .height(50)

二、样式相关原因

5️⃣ 颜色和背景一样

比如：

• 背景白
• 进度条也是白

可以显式设置：

Progress({ value: 50, total: 100 })
  .width('80%')
  .height(10)
  .backgroundColor('#EEEEEE')
  .color('#007DFF')

6️⃣ 被其他组件遮挡

检查：

• Stack 层级
• zIndex
• 是否有全屏遮罩

三、ArkTS 示例（可直接用）

@Entry
@Component
struct ProgressDemo {
  build() {
    Column({ space: 20 }) {
      Text('线性进度条')
      Progress({ value: 50, total: 100, type: ProgressType.Linear })
        .width('80%')
        .height(10)
        .color('#007DFF')

      Text('环形进度条')
      Progress({ value: 70, total: 100, type: ProgressType.Circular })
        .width(80)
        .height(80)
    }
    .width('100%')
    .padding(20)
  }
}

四、快速自查清单 ✅

• [ ] 是否设置了 width / height
• [ ] 父容器是否有尺寸
• [ ] value <= total
• [ ] 是否 Circular 没给尺寸
• [ ] 颜色是否可见
• [ ] 是否被遮挡

如果你愿意，可以把你的代码片段贴出来，我可以直接帮你定位是哪一条原因。