QML ProgressBar控件详解

在 QML 中，ProgressBar 是一个常用的进度条控件，用于显示任务的完成进度。以下是 ProgressBar 的详细用法，包括基本用法、自定义样式、动态绑定数据等。

---

1. 基本用法

1.1 最简单的 ProgressBar

import QtQuick.Controls 2.15ProgressBar {width: 200height: 20from: 0    // 最小值to: 100    // 最大值value: 50  // 当前值（0~100）
}

• from：最小值（默认 0）。
• to：最大值（默认 1）。
• value：当前进度值（范围 [from, to]）。

---

1.2 绑定动态数据

ProgressBar {value: slider.value  // 绑定 Slider 的值from: 0to: 100
}Slider {id: sliderfrom: 0to: 100value: 30
}

这样 ProgressBar 会随着 Slider 的变化而更新。

---

2. 自定义样式

ProgressBar 主要由两个部分组成：

1. background：背景样式。
2. contentItem：进度条填充部分。

2.1 修改背景和进度条颜色

ProgressBar {value: 75from: 0to: 100// 背景样式background: Rectangle {implicitWidth: 200implicitHeight: 20color: "#e0e0e0"  // 背景色radius: 5         // 圆角}// 进度条填充部分contentItem: Rectangle {width: parent.visualPosition * parent.width  // 计算宽度height: parent.heightradius: 5color: "#4CAF50"  // 进度条颜色}
}

• visualPosition：value 的归一化值（(value - from) / (to - from)）。

---

2.2 添加文字显示进度百分比

ProgressBar {id: progressBarvalue: 75from: 0to: 100background: Rectangle {color: "#e0e0e0"radius: 5}contentItem: Item {Rectangle {width: parent.visualPosition * parent.widthheight: parent.heightradius: 5color: "#4CAF50"}// 显示进度百分比Text {anchors.centerIn: parenttext: Math.round(progressBar.value) + "%"color: "white"font.bold: true}}
}

---

3. 动态数据绑定（结合 ListView 或 Model）

3.1 在 ListView 中使用 ProgressBar

ListView {width: 300height: 200model: ListModel {ListElement { name: "CPU"; value: 60 }ListElement { name: "RAM"; value: 80 }ListElement { name: "GPU"; value: 40 }}delegate: Row {spacing: 10width: parent.widthText {text: namewidth: 50}ProgressBar {width: 200value: model.valuefrom: 0to: 100contentItem: Rectangle {width: parent.visualPosition * parent.widthheight: parent.heightcolor: value < 50 ? "#4CAF50" : (value < 80 ? "#FFC107" : "#F44336")}}}
}

• 根据 value 不同，进度条颜色变化（绿色→黄色→红色）。

---

3.2 结合 C++ 数据模型

如果数据来自 C++（如 QAbstractListModel），确保：

1. value 是动态绑定的（Q_PROPERTY + NOTIFY 信号）。
2. ListView 的 cacheBuffer 足够大，避免滚动时数据丢失。

// C++ Model
class ResourceModel : public QAbstractListModel {Q_OBJECTQ_PROPERTY(int cpuUsage READ cpuUsage NOTIFY cpuUsageChanged)// ...
};

// QML
ListView {model: resourceModeldelegate: ProgressBar {value: model.cpuUsagefrom: 0to: 100}
}

---

4. 常见问题

4.1 进度问题

• 确保 value 是动态绑定的（model）。
• visualPosition 在滚动后没有正确更新的问题。在 QML 中，当使用 ListView 和自定义进度条时，有时会出现渲染问题，特别是在滚动后。
• 确保 ListView 有足够的缓存。

ListView {// ...cacheBuffer: 2000 // 根据需要调整这个值//强制 contentItem 重新计算宽度ProgressBar {id: progressBarvalue: System_cpu_percentfrom: 0to: 100onValueChanged: {contentItem.width = (value / to) * width;}// ...
}
}

4.2 如何让进度条动画更平滑？

contentItem: Rectangle {width: parent.visualPosition * parent.widthBehavior on width { NumberAnimation { duration: 200 } }  // 200ms 动画
}

---

5. 完整示例

import QtQuick 2.15
import QtQuick.Controls 2.15ProgressBar {id: progressBarwidth: 200height: 20value: 75from: 0to: 100background: Rectangle {implicitWidth: 200implicitHeight: 20color: "#e0e0e0"radius: 5border.color: "#999999"}contentItem: Rectangle {width: parent.visualPosition * parent.widthheight: parent.heightradius: 5color: {if (progressBar.value < 30) return "#4CAF50";  // 绿色else if (progressBar.value < 70) return "#FFC107";  // 黄色else return "#F44336";  // 红色}Behavior on width { NumberAnimation { duration: 200 } }  // 动画效果}Text {anchors.centerIn: parenttext: Math.round(progressBar.value) + "%"color: "white"font.bold: true}
}

---

总结

功能	实现方式
基本进度条	ProgressBar { value: 50; from: 0; to: 100 }
自定义样式	修改 background 和 contentItem
动态绑定	value: model.value 或 value: slider.value
动画效果	Behavior on width { NumberAnimation }