QML ProgressBar控件详解

在 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 主要由两个部分组成：

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

2.1 修改背景和进度条颜色

ProgressBar {
    value: 75
    from: 0
    to: 100

    // 背景样式
    background: Rectangle {
        implicitWidth: 200
        implicitHeight: 20
        color: