QML 分享各种 BusyIndicator loading 加载中...

老菜鸟的每一天

已于 2022-04-30 11:11:34 修改

阅读量1k

点赞数 1

分类专栏： # Qt 经典demo学习文章标签： QML 进度条加载中

于 2022-04-30 11:07:37 首次发布

本文链接：https://blog.csdn.net/u011942101/article/details/124510043

版权

QML 圆形进度条动画效果 Canvas NumberAnimation

关键词由CSDN通过智能技术生成

Qt 经典demo学习专栏收录该内容

8 篇文章 6 订阅

订阅专栏

文章目录

1. 各种加载状态...
2. 圆形进度条

动画效果还是要好好学习啊。

1. 各种加载状态…

demo 来自 https://github.com/Furkanzmc/QML-Loaders
csdn 地址： https://download.csdn.net/download/u011942101/85248536
效果如下：
在这里插入图片描述

2. 圆形进度条

效果如下：
在这里插入图片描述

代码如下

import QtQuick 2.9

Item {
    id: root

    property int size: 150
    property int lineWidth: 5
    property real value: 0

    property color primaryColor: "#29b6f6"
    property color secondaryColor: "#e0e0e0"

    property int animationDuration: 1000

    width: size
    height: size


    onValueChanged: {
        canvas.degree = value * 360;
    }


    Canvas {
        id: canvas

        property real degree: 0

        anchors.fill: parent
        antialiasing: true

        onDegreeChanged: {
            requestPaint();
        }

        onPaint: {
            var ctx = getContext("2d");

            var x = root.width/2;
            var y = root.height/2;

            var radius = root.size/2 - root.lineWidth
            var startAngle = (Math.PI/180) * 270;
            var fullAngle = (Math.PI/180) * (270 + 360);
            var progressAngle = (Math.PI/180) * (270 + degree);

            ctx.reset()

            ctx.lineCap = 'round';
            ctx.lineWidth = root.lineWidth;

            ctx.beginPath();
            ctx.arc(x, y, radius, startAngle, fullAngle);
            ctx.strokeStyle = root.secondaryColor;
            ctx.stroke();

            ctx.beginPath();
            ctx.arc(x, y, radius, startAngle, progressAngle);
            ctx.strokeStyle = root.primaryColor;
            ctx.stroke();
        }

        Behavior on degree {
            NumberAnimation {
                duration: root.animationDuration
            }
        }
    }
}

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.4

Window {
    visible: true
    width: 1280
    height: 800
    title: qsTr("CircularProgressBar - Demo")

    Row {
        anchors.centerIn: parent
        spacing: 20

        CircularProgressBar {
            id: progress1
            lineWidth: 10
            value: 0.1
            size: 150
            secondaryColor: "#e0e0e0"
            primaryColor: "#29b6f6"

            Text {
                text: parseInt(progress1.value * 100) + "%"
                anchors.centerIn: parent
                font.pointSize: 20
                color: progress1.primaryColor
            }
        }

        CircularProgressBar {
            id: progress2
            lineWidth: 10
            value: 0.33
            size: 150
            secondaryColor: "#e0e0e0"
            primaryColor: "#ab47bc"

            Text {
                text: parseInt(progress2.value * 100) + "%"
                anchors.centerIn: parent
                font.pointSize: 20
                color: progress2.primaryColor
            }
        }

        CircularProgressBar {
            id: progress3
            lineWidth: 10
            value: 0.50
            size: 150
            secondaryColor: "#e0e0e0"
            primaryColor: "#9ccc65"

            Text {
                text: parseInt(progress3.value * 100) + "%"
                anchors.centerIn: parent
                font.pointSize: 20
                color: progress3.primaryColor
            }
        }

        CircularProgressBar {
            id: progress4
            lineWidth: 10
            value: 0.75
            size: 150
            secondaryColor: "#e0e0e0"
            primaryColor: "#f44336"

            Text {
                text: parseInt(progress4.value * 100) + "%"
                anchors.centerIn: parent
                font.pointSize: 20
                color: progress4.primaryColor
            }
        }

        CircularProgressBar {
            id: progress5
            lineWidth: 10
            value: 1
            size: 150
            secondaryColor: "#e0e0e0"
            primaryColor: "#4db6ac"

            Text {
                text: parseInt(progress5.value * 100) + "%"
                anchors.centerIn: parent
                font.pointSize: 20
                color: progress5.primaryColor
            }
        }

        CircularProgressBar {
            id: progress6
            lineWidth: 10
            value: 0.4
            size: 150
            secondaryColor: "#e0e0e0"
            primaryColor: "#4db6ac"

            Text {
                text: parseInt(progress5.value * 100) + "%"
                anchors.centerIn: parent
                font.pointSize: 20
                color: progress5.primaryColor
            }
        }
    }
}