如何在Jetpack Compose中基于百分比绘制圆形的部分边框？

效果展示：

需求是让圆形边框的着色占比可动态变化，以下是完整可运行的实现方案：

完整代码 #

HTML 结构

<div class="sk-progress" style="--bg-color: #f0f0f0; --main-color-1: #2196F3; --target: 128;">
  <svg viewBox="0 0 150 150">
    <circle cx="75" cy="75" r="68" />
  </svg>
</div>

CSS 样式

.sk-progress {
  width: 150px;
  height: 150px;
  position: relative;
}
.sk-progress svg {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-90deg);
}
.sk-progress svg circle {
  fill: var(--bg-color);
  stroke-width: 5px;
  stroke: var(--main-color-1);
  stroke-dasharray: 427;
  stroke-dashoffset: 427;
  stroke-linecap: round;
  animation: progress 1s ease forwards;
}
@keyframes progress {
  to {
    stroke-dashoffset: var(--target);
  }
}

关键逻辑说明 #

• 核心依赖SVG的stroke-dasharray和stroke-dashoffset属性控制边框显示长度：
  • stroke-dasharray: 427是圆形的周长（计算公式：2×π×68≈427，68为圆形半径）
  • stroke-dashoffset初始值等于周长，此时边框完全隐藏；通过--target变量设置目标偏移值，偏移值越小，显示的边框长度越长
• 动态调整着色占比只需修改容器上的--target变量：比如要显示70%进度，目标偏移值为427×(1-0.7)=128，即示例中使用的值
• 可通过--bg-color和--main-color-1变量自定义背景色与进度条颜色

内容的提问来源于stack exchange，提问作者laxus clive