如何实现对错状态对应不同颜色的Progressbar进度条效果

原生进度条本身不支持多段异色的渲染逻辑，你可以通过以下几种方案快速实现需求：

通用实现思路 #

核心是放弃原生进度条的单一进度值逻辑，自己维护进度段集合：

• 每个进度段存储两个属性：进度占比、展示颜色
• 渲染时从左到右依次绘制每个进度段，总进度为所有段的占比之和
• 用户提交答案后，直接往集合末尾追加对应颜色的新增进度段即可，不需要修改已渲染的历史段

Web前端实现 #

直接用HTML+CSS手写，不需要依赖任何组件库：

<!-- 进度条容器 -->
<div class="progress-track" style="width: 100%; height: 12px; background: #e5e7eb; border-radius: 6px; overflow: hidden;">
  <!-- 进度段示例：20%正确（绿色）、10%错误（红色） -->
  <div class="segment" style="float: left; height: 100%; width: 20%; background: #22c55e;"></div>
  <div class="segment" style="float: left; height: 100%; width: 10%; background: #ef4444;"></div>
</div>

• 每次提交答案后计算新增进度占总满进度的百分比，动态创建对应颜色的DOM元素追加到容器中即可
• 用React/Vue等框架的场景下，把进度段集合维护为响应式数据，模板循环渲染即可

安卓端实现 #

自定义View重写绘制逻辑即可：

• 继承ProgressBar自定义控件，内部维护List<Segment>集合存储每个进度段的占比和颜色
• 重写onDraw方法，遍历集合调用canvas.drawRect依次绘制每个色块
• 对外暴露addSegment(float progress, int color)方法，提交答案时调用该方法刷新视图即可

iOS端实现 #

两种实现方式可选：

• 轻量实现：用UIStackView作为容器，设置axis = .horizontal、spacing = 0，每次新增进度段时添加对应背景色的UIView，设置宽度约束为总宽度*新增进度占比
• 高性能实现：自定义UIView重写draw方法，和安卓端逻辑一致，遍历进度段集合用CGContext绘制色块

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