在 QML 中,ProgressBar
是一个常用的进度条控件,用于显示任务的完成进度。以下是 ProgressBar
的详细用法,包括基本用法、自定义样式、动态绑定数据等。
1. 基本用法
1.1 最简单的 ProgressBar
import QtQuick.Controls 2.15
ProgressBar {
width: 200
height: 20
from: 0 // 最小值
to: 100 // 最大值
value: 50 // 当前值(0~100)
}
from
:最小值(默认0
)。to
:最大值(默认1
)。value
:当前进度值(范围[from, to]
)。
1.2 绑定动态数据
ProgressBar {
value: slider.value // 绑定 Slider 的值
from: 0
to: 100
}
Slider {
id: slider
from: 0
to: 100
value: 30
}
这样 ProgressBar
会随着 Slider
的变化而更新。
2. 自定义样式
ProgressBar
主要由两个部分组成:
background
:背景样式。contentItem
:进度条填充部分。
2.1 修改背景和进度条颜色
ProgressBar {
value: 75
from: 0
to: 100
// 背景样式
background: Rectangle {
implicitWidth: 200
implicitHeight: 20
color: "#e0e0e0" // 背景色
radius: 5 // 圆角
}
// 进度条填充部分
contentItem: Rectangle {
width: parent.visualPosition * parent.width // 计算宽度
height: parent.height
radius: 5
color: "#4CAF50" // 进度条颜色
}
}
visualPosition
:value
的归一化值((value - from) / (to - from)
)。
2.2 添加文字显示进度百分比
ProgressBar {
id: progressBar
value: 75
from: 0
to: 100
background: Rectangle {
color: "#e0e0e0"
radius: 5
}
contentItem: Item {
Rectangle {
width: parent.visualPosition * parent.width
height: parent.height
radius: 5
color: "#4CAF50"
}
// 显示进度百分比
Text {
anchors.centerIn: parent
text: Math.round(progressBar.value) + "%"
color: "white"
font.bold: true
}
}
}
3. 动态数据绑定(结合 ListView
或 Model
)
3.1 在 ListView
中使用 ProgressBar
ListView {
width: 300
height: 200
model: ListModel {
ListElement { name: "CPU"; value: 60 }
ListElement { name: "RAM"; value: 80 }
ListElement { name: "GPU"; value: 40 }
}
delegate: Row {
spacing: 10
width: parent.width
Text {
text: name
width: 50
}
ProgressBar {
width: 200
value: model.value
from: 0
to: 100
contentItem: Rectangle {
width: parent.visualPosition * parent.width
height: parent.height
color: value < 50 ? "#4CAF50" : (value < 80 ? "#FFC107" : "#F44336")
}
}
}
}
- 根据
value
不同,进度条颜色变化(绿色→黄色→红色)。
3.2 结合 C++ 数据模型
如果数据来自 C++(如 QAbstractListModel
),确保:
value
是动态绑定的(Q_PROPERTY
+NOTIFY
信号)。ListView
的cacheBuffer
足够大,避免滚动时数据丢失。
// C++ Model
class ResourceModel : public QAbstractListModel {
Q_OBJECT
Q_PROPERTY(int cpuUsage READ cpuUsage NOTIFY cpuUsageChanged)
// ...
};
// QML
ListView {
model: resourceModel
delegate: ProgressBar {
value: model.cpuUsage
from: 0
to: 100
}
}
4. 常见问题
4.1 进度问题
- 确保
value
是动态绑定的(model)。 - visualPosition 在滚动后没有正确更新的问题。在 QML 中,当使用 ListView 和自定义进度条时,有时会出现渲染问题,特别是在滚动后。
- 确保 ListView 有足够的缓存。
ListView {
// ...
cacheBuffer: 2000 // 根据需要调整这个值
//强制 contentItem 重新计算宽度
ProgressBar {
id: progressBar
value: System_cpu_percent
from: 0
to: 100
onValueChanged: {
contentItem.width = (value / to) * width;
}
// ...
}
}
4.2 如何让进度条动画更平滑?
contentItem: Rectangle {
width: parent.visualPosition * parent.width
Behavior on width { NumberAnimation { duration: 200 } } // 200ms 动画
}
5. 完整示例
import QtQuick 2.15
import QtQuick.Controls 2.15
ProgressBar {
id: progressBar
width: 200
height: 20
value: 75
from: 0
to: 100
background: Rectangle {
implicitWidth: 200
implicitHeight: 20
color: "#e0e0e0"
radius: 5
border.color: "#999999"
}
contentItem: Rectangle {
width: parent.visualPosition * parent.width
height: parent.height
radius: 5
color: {
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: parent
text: 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 } |