如何使用QML（QT）实现下载进度条？

根据你提供的样式需求，这里实现了一个圆角样式、随进度填充并显示百分比的下载进度条，完整QML代码如下：

核心进度条组件 #

import QtQuick 2.15
import QtQuick.Controls 2.15

Rectangle {
    width: 300
    height: 40
    color: "#f0f0f0"
    radius: 20

    // 进度属性，范围0~1，可绑定外部下载进度数据
    property real progress: 0.0

    // 进度填充条
    Rectangle {
        height: parent.height
        width: parent.width * parent.progress
        color: "#2196F3"
        radius: 20
    }

    // 百分比文本
    Text {
        anchors.centerIn: parent
        text: Math.round(parent.progress * 100) + "%"
        color: "white"
        font.pixelSize: 16
        font.bold: true
    }

    // 进度平滑过渡动画
    Behavior on progress {
        NumberAnimation { duration: 200 }
    }
}

使用示例（模拟下载进度） #

将上述组件保存为DownloadProgressBar.qml后，可在主窗口中引用并模拟进度变化：

import QtQuick 2.15
import QtQuick.Window 2.15

Window {
    visible: true
    width: 400
    height: 200
    title: "下载进度演示"

    DownloadProgressBar {
        anchors.centerIn: parent
        id: downloadBar
    }

    // 模拟进度递增
    Timer {
        interval: 1000
        running: true
        repeat: true
        onTriggered: {
            if (downloadBar.progress < 1.0) {
                downloadBar.progress += 0.1
            } else {
                stop()
            }
        }
    }
}

关键细节说明 #

• 样式匹配：外层灰色圆角容器与蓝色填充条均设置20px圆角，与示例样式一致
• 进度绑定：通过progress属性可直接绑定C++端传递的下载进度（如网络请求的已下载字节/总字节）
• 平滑动画：Behavior确保进度变化时填充条平滑过渡，避免生硬跳转
• 百分比计算：通过Math.round(progress * 100)将0~1的进度值转为整数百分比，显示更直观

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