如何在Flutter中实现如图所示的带动画百分比圆形进度条？

下面是一套可直接复用的实现方案，完全匹配你需要的圆形进度条效果，包含平滑动画和百分比显示功能：

1. HTML结构 #

<div class="circular-progress">
  <div class="progress-ring">
    <div class="progress-left">
      <div class="progress-bar"></div>
    </div>
    <div class="progress-right">
      <div class="progress-bar"></div>
    </div>
  </div>
  <div class="progress-text">0%</div>
</div>

2. CSS样式 #

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

.progress-ring {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #e0e0e0;
  position: relative;
  overflow: hidden;
}

.progress-left, .progress-right {
  position: absolute;
  width: 50%;
  height: 100%;
  overflow: hidden;
}

.progress-left {
  left: 0;
}

.progress-right {
  right: 0;
}

.progress-bar {
  width: 100%;
  height: 100%;
  background-color: #4CAF50;
  transition: transform 0.5s ease-in-out;
}

.progress-left .progress-bar {
  transform-origin: right center;
}

.progress-right .progress-bar {
  transform-origin: left center;
}

.progress-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 24px;
  font-weight: bold;
  color: #333;
}

3. JavaScript逻辑 #

function setProgress(percent) {
  const progressText = document.querySelector('.progress-text');
  const leftBar = document.querySelector('.progress-left .progress-bar');
  const rightBar = document.querySelector('.progress-right .progress-bar');
  
  if (percent <= 50) {
    rightBar.style.transform = `rotate(${percent * 3.6}deg)`;
    leftBar.style.transform = 'rotate(0deg)';
  } else {
    rightBar.style.transform = 'rotate(180deg)';
    leftBar.style.transform = `rotate(${(percent - 50) * 3.6}deg)`;
  }
  
  progressText.textContent = `${percent}%`;
}

// 示例：设置75%进度
setProgress(75);

关键说明 #

• 动画实现：通过CSS的transition属性给进度条旋转添加平滑过渡，修改transform的旋转角度即可触发动画
• 百分比控制：圆形一圈为360度，1%对应3.6度，通过计算角度控制左右半圆的旋转状态，实现0-100%的进度覆盖
• 样式自定义：可修改.progress-bar背景色、.circular-progress宽高、字体样式等，快速适配你的UI需求

内容的提问来源于stack exchange，提问作者Mohammad Faizan