QML QT6进度条和示忙器 BusyIndicator

如下是常用的进度显示和示忙器的自定义实现，效果如下，源码如下，相互学习，谢谢。

import QtQuick.Controls 2.15

import QtQuick.Layouts 1.15

ApplicationWindow {

    visible: true

    width: 1920

    height: 1080

    title: "Custom Progress Indicator"

    property real progressValue: 0

    ColumnLayout {

        spacing: 60

        anchors.centerIn: parent  // 使 ColumnLayout 居中

        Row {

            spacing: 12

            padding: 20

            Text {

                id: loadingText

                text: "正在玩命加载中"

                font.family: "Arial"  // 使用专业字体

                font.bold: true

                font.pixelSize: 24

                color: "#333333"  // 深灰色

                smooth: true  // 平滑字体

            }

            Text {

                id: dots

                text: ""

                font.family: "Arial"  // 使用专业字体

                font.bold: true

                font.pixelSize: 30

                color: "#0078d4"  // 蓝色，增加对比度

                smooth: true  // 平滑字体

                SequentialAnimation {

                    running: true

                    loops: Animation.Infinite

                    PropertyAnimation {

                        target: dots

                        property: "text"

                        from: ""

                        to: "."

                        duration: 500

                    }

                    PropertyAnimation {

                        target: dots

                        property: "text"

                        from: "."

                        to: ".."

                        duration: 500

                    }

                    PropertyAnimation {

                        target: dots

                        property: "text"

                        from: ".."

                        to: "..."

                        duration: 500

                    }

                    PropertyAnimation {

                        target: dots

                        property: "text"

                        from: "..."

                        to: ""

                        duration: 500

                    }

                }

            }

        }

        // 自定义圆形进度指示器

        Item {

            id: customCircularIndicator

            width: 150

            height: 150

            Layout.alignment: Qt.AlignHCenter

            // 定义进度数值

            property real progressValue: 0

            // 使用Canvas来绘制进度圆

            Canvas {

                id: canvas

                width: 150

                height: 150

                onPaint: {

                    var ctx = canvas.getContext("2d")

                    ctx.clearRect(0, 0, canvas.width, canvas.height)

                    var centerX = canvas.width / 2

                    var centerY = canvas.height / 2

                    var radius = 60

                    var lineWidth = 10

                    var percent = customCircularIndicator.progressValue // 使用正确的属性

                    // 绘制背景圆圈

                    ctx.beginPath()

                    ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI)

                    ctx.lineWidth = lineWidth

                    ctx.strokeStyle = "#d3d3d3" // 灰色背景

                    ctx.stroke()

                    // 绘制进度圆弧

                    ctx.beginPath()

                    ctx.arc(centerX, centerY, radius, -Math.PI / 2, (2 * Math.PI * (percent / 100)) - Math.PI / 2)

                    ctx.lineWidth = lineWidth

                    ctx.strokeStyle = "#4CAF50" // 绿色进度

                    ctx.stroke()

                }

                // 使用 Connections 监听 progressValue 的变化

                Connections {

                    target: customCircularIndicator

                    function onProgressValueChanged() {

                        canvas.requestPaint()

                    }

                }

                Component.onCompleted: {

                    canvas.requestPaint()

                }

            }

            // 显示进度百分比的文本

            Text {

                id: percentageText

                text: Math.round(customCircularIndicator.progressValue) + "%"

                color: "#4CAF50" // 绿色文本

                font.pixelSize: 30

                anchors.centerIn: parent

            }

            // 模拟进度更新

            Timer {

                interval: 100

                running: true

                repeat: true

                onTriggered: {

                    if (customCircularIndicator.progressValue < 100) {

                        customCircularIndicator.progressValue += 1

                    } else {

                        stop()

                    }

                }

            }

        }

        // 自定义进度条

        Item {

            width: 300

            height: 30

            Layout.alignment: Qt.AlignHCenter  // 使用 Layout 对齐

            Rectangle {

                width: parent.width

                height: parent.height

                color: "#e0e0e0"  // 背景颜色

                border.color: "#b0b0b0"

                radius: 15

                border.width: 1

                Rectangle {

                    width: (parent.width * progressValue) / 100

                    height: parent.height

                    color: "#4CAF50"  // 进度条颜色

                    radius: 15

                    anchors.left: parent.left

                }

            }

            // 显示百分比的文本

            Text {

                id: progressText

                text: Math.round(progressValue) + "%"

                color: "#FFFFFF"  // 白色文本

                font.pixelSize: 20

                anchors.centerIn: parent

                z: 1  // 确保文本在进度条上层

            }

            // 模拟进度更新

            Timer {

                interval: 100

                running: true

                repeat: true

                onTriggered: {

                    if (progressValue < 100) {

                        progressValue += 1

                    } else {

                        progressValue = 0  // 重置进度

                    }

                }

            }

        }

        BusyIndicator {

            id: busyIndicator

            width: 300

            height: 300

            running: true

            Layout.alignment: Qt.AlignHCenter

        }

        Image {

            id: image1

            width: 128

            height: 128

            source: "file:///C:/Users/86155/Documents/untitled22/grayBusy.png"

            Layout.alignment: Qt.AlignHCenter

            // 图片加载完成后，自动开始旋转

            onStatusChanged: {

                if (image1.status === Image.Ready) {

                    imageRotation.start()  // 开始旋转动画

                }

            }

            // 定义旋转动画

            RotationAnimation {

                id: imageRotation

                target: image1

                property: "rotation"

                from: 0

                to: 360

                duration: 2000  // 每次旋转的时间，单位毫秒

                loops: Animation.Infinite  // 无限循环旋转

            }

        }

        Image {

            id: image2

            width: 128

            height: 128

            source: "file:///C:/Users/86155/Documents/untitled22/BlueBusy.png"

            Layout.alignment: Qt.AlignHCenter

            // 图片加载完成后，自动开始旋转

            onStatusChanged: {

                if (image2.status === Image.Ready) {

                    imageRotation2.start()  // 开始旋转动画

                }

            }

            // 定义旋转动画

            RotationAnimation {

                id: imageRotation2

                target: image2

                property: "rotation"

                from: 0

                to: 360

                duration: 2000  // 每次旋转的时间，单位毫秒

                loops: Animation.Infinite  // 无限循环旋转

            }

        }

    }

}