如何在Kotlin中通过XML实现随API数据值变化的进度条？

核心思路 #

先确定数据的最小值和最大值，通过公式 (当前值 - 最小值) / (最大值 - 最小值) * 100% 计算出当前值对应的百分比，再用这个百分比控制进度条填充部分的宽度。

具体实现示例 #

1. HTML结构

<!-- 进度条列表容器 -->
<div id="progress-list"></div>

2. CSS样式

/* 单个进度条项布局 */
.progress-item {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  gap: 10px;
}

/* 进度条容器 */
.progress-container {
  flex: 1;
  height: 14px;
  background-color: #e0e0e0;
  border-radius: 7px;
  overflow: hidden;
}

/* 进度条填充部分 */
.progress-fill {
  height: 100%;
  background-color: #2196F3;
  width: 0;
  transition: width 0.3s ease; /* 可选：添加平滑过渡动画 */
}

/* 标签和数值样式 */
.label, .value {
  width: 60px;
  text-align: center;
}

3. JavaScript逻辑（适配API数据场景）

// 模拟从API获取的统计数据
const apiStats = [
  { label: "用户活跃度", value: 85 },
  { label: "转化率", value: 30 },
  { label: "留存率", value: 65 },
  { label: "点击率", value: 15 }
];

// 提取所有数值，计算最大、最小值
const allValues = apiStats.map(item => item.value);
const maxVal = Math.max(...allValues);
const minVal = Math.min(...allValues);

// 渲染进度条
const listContainer = document.getElementById("progress-list");
apiStats.forEach(stat => {
  // 计算百分比：避免max和min相等时出现除以0的情况
  const progressPercent = maxVal === minVal 
    ? 100 
    : ((stat.value - minVal) / (maxVal - minVal)) * 100;

  // 创建进度条元素
  const itemEl = document.createElement("div");
  itemEl.className = "progress-item";
  itemEl.innerHTML = `
    <span class="label">${stat.label}</span>
    <div class="progress-container">
      <div class="progress-fill" style="width: ${progressPercent}%"></div>
    </div>
    <span class="value">${stat.value}</span>
  `;
  listContainer.appendChild(itemEl);
});

适配特殊场景的调整 #

• 如果数据有固定范围（比如0-100），直接用 (当前值 / 100) * 100% 计算百分比即可，无需找最大最小值
• 若需要反向效果（数值越高填充越少），将百分比公式改为 100 - 计算出的百分比
• Vue/React等框架项目可通过绑定样式属性+计算属性实现，逻辑完全一致

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