QML ProgressBar控件详解

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


1. 基本用法

1.1 最简单的 ProgressBar

qml 复制代码
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 绑定动态数据

qml 复制代码
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 修改背景和进度条颜色

qml 复制代码
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"  // 进度条颜色
    }
}
  • visualPositionvalue 的归一化值((value - from) / (to - from))。

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

qml 复制代码
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. 动态数据绑定(结合 ListViewModel

3.1 在 ListView 中使用 ProgressBar

qml 复制代码
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),确保:

  1. value 是动态绑定的Q_PROPERTY + NOTIFY 信号)。
  2. ListViewcacheBuffer 足够大,避免滚动时数据丢失。
cpp 复制代码
// C++ Model
class ResourceModel : public QAbstractListModel {
    Q_OBJECT
    Q_PROPERTY(int cpuUsage READ cpuUsage NOTIFY cpuUsageChanged)
    // ...
};
qml 复制代码
// QML
ListView {
    model: resourceModel
    delegate: ProgressBar {
        value: model.cpuUsage
        from: 0
        to: 100
    }
}

4. 常见问题

4.1 进度问题

  • 确保 value 是动态绑定的(model)。
  • visualPosition 在滚动后没有正确更新的问题。在 QML 中,当使用 ListView 和自定义进度条时,有时会出现渲染问题,特别是在滚动后。
  • 确保 ListView 有足够的缓存。
qml 复制代码
ListView {
    // ...
    cacheBuffer: 2000 // 根据需要调整这个值
    //强制 contentItem 重新计算宽度
    ProgressBar {
    id: progressBar
    value: System_cpu_percent
    from: 0
    to: 100
    onValueChanged: {
        contentItem.width = (value / to) * width;
    }
    // ...
}
}

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

qml 复制代码
contentItem: Rectangle {
    width: parent.visualPosition * parent.width
    Behavior on width { NumberAnimation { duration: 200 } }  // 200ms 动画
}

5. 完整示例

qml 复制代码
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 }
自定义样式 修改 backgroundcontentItem
动态绑定 value: model.valuevalue: slider.value
动画效果 Behavior on width { NumberAnimation }
相关推荐
前端小巷子12 分钟前
Webpack 5模块联邦
前端·javascript·面试
玲小珑15 分钟前
Next.js 教程系列(十九)图像优化:next/image 与高级技巧
前端·next.js
晓得迷路了16 分钟前
栗子前端技术周刊第 91 期 - 新版 React Compiler 文档、2025 HTML 状态调查、Bun v1.2.19...
前端·javascript·react.js
江城开朗的豌豆22 分钟前
Vue和React中的key:为什么列表渲染必须加这玩意儿?
前端·vue.js·面试
江城开朗的豌豆28 分钟前
前端路由傻傻分不清?route和router的区别,看完这篇别再搞混了!
前端·javascript·vue.js
pengzhuofan31 分钟前
Web开发系列-第0章 Web介绍
前端
小鱼人爱编程40 分钟前
Java基石--反射让你直捣黄龙
前端·spring boot·后端
JosieBook2 小时前
【web应用】如何进行前后端调试Debug? + 前端JavaScript调试Debug?
前端·chrome·debug
LBJ辉2 小时前
2. Webpack 高级配置
前端·javascript·webpack
灵感__idea9 小时前
JavaScript高级程序设计(第5版):好的编程就是掌控感
前端·javascript·程序员