Flutter中如何基于动态数据实现自定义圆形进度指示器？

以下是两种实用的实现方式，可根据需求选择：

方法一：CSS + JavaScript 基础实现 #

通过拆分左右半环的方式控制进度，兼容性好，适合简单场景。

结构布局 #

<div class="progress-container">
  <img src="https://i.sstatic.net/l3Q5P.jpg" alt="目标图片" class="progress-img">
  <div class="progress-ring progress-ring-left"></div>
  <div class="progress-ring progress-ring-right"></div>
</div>
<button onclick="updateProgress(30)">设置30%进度</button>
<button onclick="updateProgress(75)">设置75%进度</button>
<button onclick="updateProgress(100)">设置100%进度</button>

样式设置 #

.progress-container {
  position: relative;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  overflow: hidden;
}

.progress-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.progress-ring {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 8px solid #007bff;
  border-radius: 50%;
  box-sizing: border-box;
}

.progress-ring-left {
  clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%);
  transform: rotate(-180deg);
  opacity: 0;
}

.progress-ring-right {
  clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% 100%);
}

动态更新逻辑 #

function updateProgress(percent) {
  const leftRing = document.querySelector('.progress-ring-left');
  const rightRing = document.querySelector('.progress-ring-right');
  
  if (percent <= 50) {
    const rotateDeg = (percent / 50) * 180 - 180;
    rightRing.style.transform = `rotate(${rotateDeg}deg)`;
    leftRing.style.opacity = 0;
  } else {
    rightRing.style.transform = 'rotate(0deg)';
    leftRing.style.opacity = 1;
    const rotateDeg = ((percent - 50) / 50) * 180 - 180;
    leftRing.style.transform = `rotate(${rotateDeg}deg)`;
  }
}

// 初始化进度为0
updateProgress(0);

方法二：SVG 灵活实现 #

用SVG矢量图形实现，支持圆角、渐变等复杂样式，动画更流畅。

结构布局 #

<div class="svg-progress-container">
  <svg class="progress-svg" viewBox="0 0 200 200">
    <!-- 背景环 -->
    <circle cx="100" cy="100" r="92" fill="none" stroke="#eee" stroke-width="8"/>
    <!-- 进度环 -->
    <circle class="progress-circle" cx="100" cy="100" r="92" fill="none" stroke="#007bff" stroke-width="8" stroke-linecap="round" transform="rotate(-90 100 100)"/>
  </svg>
  <img src="https://i.sstatic.net/l3Q5P.jpg" alt="目标图片" class="svg-progress-img">
</div>
<button onclick="updateSVGProgress(40)">设置40%进度</button>
<button onclick="updateSVGProgress(85)">设置85%进度</button>

样式设置 #

.svg-progress-container {
  position: relative;
  width: 200px;
  height: 200px;
}

.progress-svg {
  width: 100%;
  height: 100%;
}

.svg-progress-img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 184px;
  height: 184px;
  object-fit: cover;
  border-radius: 50%;
}

.progress-circle {
  stroke-dasharray: 580; /* 2*π*r ≈ 2*3.14*92 ≈ 580 */
  stroke-dashoffset: 580;
  transition: stroke-dashoffset 0.3s ease;
}

动态更新逻辑 #

function updateSVGProgress(percent) {
  const circle = document.querySelector('.progress-circle');
  const circumference = 2 * Math.PI * 92;
  const offset = circumference - (percent / 100) * circumference;
  circle.style.strokeDashoffset = offset;
}

// 初始化
updateSVGProgress(0);

内容的提问来源于stack exchange，提问作者wolfsoft Developer