运用QML制作圆形进度条效果

QML中原声的进度条为水平或垂直的直线型进度条,可以用ProgressBar配合style: ProgressBarStyle{}进行实现,要显示圆形或扇形进度,就要用画布进行实现,代码如上。
摘要由CSDN通过智能技术生成

在QML中原声的进度条为水平或垂直的直线型进度条,可以用ProgressBar配合style: ProgressBarStyle{}进行实现,代码如下:

import QtQuick 2.4
import QtQuick.Controls 1.3
import QtQuick.Controls.Styles 1.2
import QtGraphicalEffects 1.0
import QtQml 2.2

Rectangle {
    id:root;
    color: "white";
    visible: true;
    width: 600;
    height: 600;

    Timer{
        interval: 300;
        running: true;
        repeat: true;
        onTriggered: {
            if(progressBar3.value >= 1)
                progressBar3.value = 0;
            progressBar3.value += 0.05;

            if(progressBar4.value >= 1)
                progressBar4.value = 0;
            progressBar4.value += 0.05;
        }

    }

    ProgressBar {
        id: progressBar3
        x: 83
        y: 226
        width: 397
        height: 23
        value: 0.01;
        style: ProgressBarStyle{
            id:progressBar3Style;
            background: Rectangle{
                border.width: 1;
                border.color: control.hovered?"green":"#25b1e8";
                color:"lightgray";
                Text {
                    anchors.right: parent.right;
                    anchors.rightMargin: 5;
                    anchors.verticalCenter: parent.verticalCenter;
                    text: Math.round(currentProgress*100) + "%";
                    color: "#25b1e8"
                }
            }

            progress: Rectangle{
                color: "#25b1e8";//
                clip: true;
                Rectangle{
                    anchors.left: parent.left;
                    //anchors.top: parent.top;
                    //anchors.bottom: parent.bottom;
                    height: progressBar3.width;
                    width: progressBar3.width;
                    LinearGradient{
                        anchors.fill: par
  • 4
    点赞
  • 17
    收藏
    觉得还不错? 一键收藏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值