qml ProgressBar详解

1、概述

ProgressBar是QML中用于表示操作进度的一个控件，通常用于显示文件上传、下载、计算或其他长时间任务的进度。ProgressBar的进度由value属性定期更新，范围由from和to属性定义。此外，ProgressBar还支持indeterminate模式，用于表示无法确定进度的操作。

2、重要属性

• value：表示进度条的当前值，范围是从from到to，默认值是0。
• from：表示进度条的最小值，范围是任意实数，默认值是0。
• to：表示进度条的最大值，范围是任意实数，默认值是1。
• indeterminate：表示进度条是否处于不确定模式，不确定模式下的进度条显示操作正在进行，但未显示已经进行了多少进度，默认值是false。
• position：只读属性，控制进度条的逻辑位置，范围0.0~1.0。
• visualPosition：只读属性，控制进度条的视觉位置，范围0.0~1.0。

ApplicationWindow {
    visible: true
    width: 640
    height: 480
    title: "ProgressBar 示例"

    ProgressBar {
        id: progressBar
        width: 400
        height: 30
        anchors.centerIn: parent
        from: 0
        to: 100
        value: 0
        indeterminate: false

        background: Rectangle {
            implicitWidth: 400
            implicitHeight: 30
            color: "#d3d3d3"
            radius: height / 2
        }

        contentItem: Item {
            Rectangle {
                width: progressBar.visualPosition * parent.width
                height: parent.height
                radius: parent.height / 2
                color: "#4CAF50"
            }
        }
    }

    Button {
        text: "开始"
        anchors.top: progressBar.bottom
        anchors.horizontalCenter: progressBar.horizontalCenter
        onClicked: {
            progressBar.indeterminate = false
            progressBar.value = 0
            timer.start()
        }
    }

    Timer {
        id: timer
        interval: 100
        repeat: true
        onTriggered: {
            if (progressBar.value < progressBar.to) {
                progressBar.value += 1
            } else {
                timer.stop()
                console.log("任务完成！")
            }
        }
    }
}

觉得有帮助的话，打赏一下呗。。

           

需要商务合作（定制程序）的欢迎私信！！