Progress组件起点与终点样式重叠及白边问题
========================

#### 问题现象

采用Progress组件设置环形进度条，运行时存在以下问题：

1.  进度值为100时起点与终点样式重叠形成一个点，如何使该点消失。
2.  进度条已经走过的边上有一点白边，如何去掉该白边？

问题代码示例参考如下：

@Entry
@Component
export struct Index {
  @State remainingTime: number \= 0; _//_ _剩余时间（默认10秒）_

  aboutToAppear(): void {
    let timer: number
    timer \= setInterval(() \=\> {
      this.remainingTime += 1
      if (this.remainingTime \== 100) {
        clearInterval(timer)
      }
    }, 50)
  }

  build() {
    Column() {
      Stack() { _// 创建垂直布局容器_
        Column() {
          Progress({
            value: this.remainingTime, _// 设置进度_
            total: 100, _// 最大进度为100_
            type: ProgressType.Ring, _// 使用环形进度条_
          })
            .style({ strokeWidth: 20 })
            .rotate({ angle: 90 })
            .color('#800a59f7')
            .backgroundColor('#fff')
            .width(300)
            .aspectRatio(1)
            .animation({ duration: 10 })
        }
        .justifyContent(FlexAlign.Center)
        .borderRadius(200)
        .backgroundColor(\`rgba('10, 89, 247, 0.5')\`)
      }
      .width(350)
      .aspectRatio(1)
      .borderRadius(200)
      .backgroundColor('#800a59f7')
      .alignContent(Alignment.Center)
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}

问题效果预览：

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/d2/v3/pn35qMjmShaL6gd9Tq9bpw/zh-cn_image_0000002658790419.png?HW-CC-KV=V1&HW-CC-Date=20260709T134051Z&HW-CC-Expire=86400&HW-CC-Sign=230883C941EC792F6C086C17B875C08A9A934B224270DBC2866AC66EBB60B2E6 "点击放大")

#### 效果预览

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/29/v3/iw3bZYZqTsy6d0u-npmOoA/zh-cn_image_0000002628551060.png?HW-CC-KV=V1&HW-CC-Date=20260709T134051Z&HW-CC-Expire=86400&HW-CC-Sign=E7AD76EF979B8DC8F56645AC4E8C2CB51A6FC842FB7B71CCD01E2F0D6E3D9F16 "点击放大")

#### 背景知识

[Progress](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-progress)进度条组件，用于显示内容加载或操作处理等进度。Progress组件的[backgroundColor](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-universal-attributes-background#backgroundcolor)属性是直接添加在Progress组件上，生效进度条的底色。如需设置整个Progress组件的背景色，需要在外层容器上设置backgroundColor，并将Progress组件嵌入到容器中。

#### 解决方案

1.  针对问题一的解决方案：外层Stack容器的backgroundColor和Progress组件进度条颜色设置了透明度，颜色叠加导致进度值为100时起点与终点样式重叠形成一个点。建议将外层Stack容器的backgroundColor和Progress组件底色设置成相同且不透明的颜色。
2.  针对问题二的解决方案：设置进度条前景色为白色，Progress组件底色设置与外层容器相同，进度值改为从100到0，由此解决白边的问题。此时进度条旋转方向与原代码相反，设置direction(Direction.Rtl)翻转Progress组件，实现与原效果一致。

完整示例参考如下：

@Entry
@Component
struct ProgressIndex {
  @State remainingTime: number \= 100;

  aboutToAppear(): void {
    let timer: number;
    timer \= setInterval(() \=\> {
      this.remainingTime\--;
      if (this.remainingTime \=== 0) {
        clearInterval(timer);
      }
    }, 50);
  }

  build() {
    Column() {
      Stack() { _// 创建垂直布局容器_
        Column() {
          Progress({
            value: this.remainingTime, _// 设置进度_
            total: 100, _// 最大进度为100_
            type: ProgressType.Ring, _// 使用环形进度条_
          })
            .style({ strokeWidth: 20 })
            .rotate({ angle: 90 })
           _ // 设置进度条前景色为白色_
            .color('#fff')
          _  // 1、问题一，将外层容器backgroundColor和Progress组件底色设置成相同且不透明的颜色_
            _// 2、Progress组件底色设置与外层容器相同_
            .backgroundColor('#0a59f7')
           _ // 设置翻转_
            .direction(Direction.Rtl)
            .width(300)
            .aspectRatio(1)
            .animation({ duration: 10 });
        }
        .justifyContent(FlexAlign.Center)
        .borderRadius(200);
      }
      .width(350)
      .aspectRatio(1)
      .borderRadius(200)
    _  // 问题一与问题二都需将外层容器backgroundColor修改为不透明相同颜色_
      .backgroundColor('#0a59f7')
      .alignContent(Alignment.Center);
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center);
  }
}