QML 自定义进度条样式_lys211的博客-程序员宅基地_qml进度条样式

技术标签: QML  qml progressbar 自定义  


QML 自定义进度条样式


此博客始创于:http://blog.csdn.net/lys211

转载请注明出处



修改的进度条样式,可以在此基础上根据期望改成自己喜欢的样子。


效果如下:


(应该是动态图,如果不是,那就奇怪了)



代码比较长,这里粘贴一份,同时会上传一份.

ProgressBarStyleView.qml
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;

    ProgressBar {
        id: progressBar;
        x: 83
        y: 39
        width: 397;
        height: 23;
        value: 0.2;
        style: ProgressBarStyle{
            background: Rectangle{
                border.width: 1;
                border.color: control.hovered?"green":"#25b1e8";
                color:"lightgray";
            }
            progress: Rectangle{
                color: "#25b1e8"
            }
        }
    }

    ProgressBar {
        id: progressBar1
        x: 83
        y: 101
        width: 397
        height: 23
        value: 0.5;
        style: ProgressBarStyle{
            background: Rectangle{
                border.width: 1;
                border.color: "#25b1e8";
                color:"lightgray";
            }
            progress: Rectangle{
                color: "#25b1e8"
                Text {
                    anchors.right: parent.right;
                    anchors.verticalCenter: parent.verticalCenter;
                    text: progressBar1.value;
                    color: "white"
                }
            }
        }
    }

    ProgressBar {
        id: progressBar2
        x: 83
        y: 167
        width: 397
        height: 23
        value: 0.73;
        style: ProgressBarStyle{
            id:progressBarStyle;
            background: Rectangle{
                border.width: 1;
                border.color: control.hovered?"green":"#25b1e8";
                color:"lightgray";
            }
            progress: Rectangle{
                color: "#25b1e8"
                Text {
                    anchors.right: parent.right;
                    anchors.rightMargin: 5;
                    anchors.verticalCenter: parent.verticalCenter;
                    text: progressBar2.value*100 + "%";
                    color: "white"
                }
            }

            panel: Item{
                implicitHeight: 20;
                implicitWidth: 200;
                Loader{
                    anchors.fill: parent;
                    sourceComponent: background;
                }

                Loader{
                    anchors.top: parent.top;
                    anchors.left: parent.left;
                    anchors.bottom: parent.bottom;
                    anchors.margins: 2;
                    width: currentProgress * (parent.width - 4)
                    sourceComponent: progressBarStyle.progress;
                }
            }
        }
    }

    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: parent;
                        gradient: Gradient {
                            GradientStop {
                                position: 0.00;
                                color: "#ffffff";
                            }
                            GradientStop {
                                position: 1.00;
                                color: "#36d1e8";
                            }
                        }
                        start:Qt.point(0, 0);
                        end: Qt.point(parent.width, 0);
                    }
                }
            }

            panel: Item{
                implicitHeight: 20;
                implicitWidth: 200;

                Loader{
                    anchors.fill: parent;
                    sourceComponent: background;
                }

                Loader{
                    anchors.top: parent.top;
                    anchors.left: parent.left;
                    anchors.bottom: parent.bottom;
                    anchors.margins: 2;
                    width: currentProgress * (parent.width - 4)
                    sourceComponent: progressBar3Style.progress;
                }
            }
        }

    }

    ProgressBar {
        id: progressBar4
        x: 83
        y: 289
        width: 397
        height: 23
        value: 0.01;

        property color colorValue: Qt.rgba(37/255, 177/255, 232/255, 1);

        style: ProgressBarStyle{
            id:progressBar4Style;
            background: Rectangle{
                border.width: 1;
                border.color: control.hovered?"green":"#25b1e8";
                color:"lightgray";
            }

            progress: Rectangle{
                //color: "#25b1e8";//
                //color: Math.round(currentProgress*100);
                color: progressBar4.colorValue;
                onColorChanged: {
                    console.log("onColorChanged")
                }
            }

            panel: Item{
                implicitHeight: 20;
                implicitWidth: 200;

                Loader{
                    anchors.fill: parent;
                    sourceComponent: background;
                }

                Loader{
                    anchors.top: parent.top;
                    anchors.left: parent.left;
                    anchors.bottom: parent.bottom;
                    anchors.margins: 2;
                    width: currentProgress * (parent.width - 4)
                    sourceComponent: progressBar4Style.progress;

                    onWidthChanged: {
                        console.log("onWidthChanged")
                        progressBar4.colorValue = Qt.rgba(1-currentProgress, 1-currentProgress, 1-currentProgress, 1)
                    }
                }

                Text {
                    anchors.right: parent.right;
                    anchors.rightMargin: 5;
                    anchors.verticalCenter: parent.verticalCenter;
                    text: Math.round(currentProgress*100) + "%";
                    color: "#25b1e8"
                }
            }
        }
    }

}


整个文件可下载,地址是:

http://download.csdn.net/detail/lys211/8541135



版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/lys211/article/details/44699359

智能推荐

限制计算机网口权限,谁能上网我来定——控制软件的联网权限_蔡道济的博客-程序员宅基地

现在上网是每个网虫的必选动作,但是大家的电脑里除了浏览器、QQ等必须联网的软件外,一些与网络无关甚至有害的(如木马、病毒)软件也纷纷会在后台联网。这些软件不仅会占用我们带宽,而且容易泄露我们的隐私。那么怎么对电脑里软件的联网权限进行控制?防火墙阻止特定程序联网对于自己已经知道的程序需要限制其联网,借助系统自带的防火墙进行限制即可。比如不希望家人在自己电脑上安装的游戏联网,可以在“开始”搜索框中输入...

新安装的Ubuntu配置一下Android开发环境_Leon.w的博客-程序员宅基地

Windows用多了想尝尝鲜,之前也装过Ubuntu,现在在装上作死一下,浪白一下。记录一下安装完成之后环境的配置。Java环境配置其实使用 OpenJDK也是可以的,我看AOSP网站上源码编译要求的环境也都是OpenJDK了,具体深究我也不知道有多大区别。OpenJDK安装OpenJDK安装很方便,Ubuntu自带的貌似也有吧,我装的Ubuntu16.04,需要手动安装上才行。 sudo apt

十以上带圈数字_btbear的博客-程序员宅基地

①②③④⑤⑥⑦⑧⑨⑩⑪⑪⑫⑬⑭⑮⑯⑰⑱⑲⑳ 

SQL Server第2部分:简化身份验证和授权机制_Zoho_Manager的博客-程序员宅基地

在上一篇文章中,我们讨论了通过监视SQL Server活动来保护数据库等相关知识。通过配置数据库访问身份验证和授权机制,可以进一步增强数据库安全性。在本篇文章中,笔者将简要说明SQL Server的各种授权和身份验证机制以及您可以借鉴的一些方法。如何在SQL中进行身份验证?SQL Server中的身份验证通常使用Active Directory(AD)凭据进行,当SQL Server验证SQL...

基于canvas绘制多条贝塞尔曲线组成3D双三次曲面片_坐望云起的博客-程序员宅基地_绘制多条bezier曲线

贝塞尔曲面是一种用于计算机图形学、计算机辅助设计和有限元建模的数学样条。与贝塞尔曲线一样,贝塞尔曲面由一组控制点定义。贝塞尔曲面最常见的用途是作为双三次面片的网络(其中m = n = 3)。因此,单个双三次面片的几何形状完全由一组 16 个控制点定义。这些通常以与贝塞尔曲线连接形成 B 样条曲线类似的方式连接起来形成B 样条曲面。贝塞尔曲面网格在表示光滑表面方面优于三角形网格。它们需要更少的点(因此更少的内存)来表示曲面,更易于操作,并且具有更好的连续性。此外,其他常......

随便推点

目标检测:SaccadeNet论文解读_Airs_Gao的博客-程序员宅基地

目标检测:SaccadeNet论文解读论文网址:SaccadeNet: A Fast and Accurate Object Detector论文代码:voidrank/SaccadeNet0. 简介SaccadeNet是一种 anchor-free的检测器,可以实现准确且快速的检测目标。对于人来说,一般不会固定的注视某个场景。 取而代之的是,人眼四处走动,定位物体的部分信息以了解物体的位置。这种主动的感知移动过程称为saccade。本文方法就是基于这种思想设计的。Saccade

python实现-取近似值_KatherineLYP的博客-程序员宅基地_python近似值

题目描述 写出一个程序,接受一个正浮点数值,输出该数值的近似整数值。如果小数点后数值大于等于5,向上取整;小于5,则向下取整。 输入描述: 输入一个正浮点数值 输出描述: 输出该数值的近似整数值

【JDK8 新特性 8】JDK 8新增的Optional类&新的日期和时间 API & 重复注解与类型注解_一切总会归于平淡的博客-程序员宅基地_jdk8向类中新增字段与注解

Optional是一个没有子类的工具类,Optional是一个可以为null的容器对象。它的作用主要就是为了解决避免Null检查,防止NullPointerException( 空指针异常)。

iwpriv工具通过ioctl动态获取相应无线网卡驱动的private_args所有扩展参数_zhenwenxian的博客-程序员宅基地_iwpriv 驱动程序在哪里

 iwpriv工具通过ioctl动态获取相应无线网卡驱动的private_args所有扩展参数iwpriv是处理下面的wlan_private_args的所有扩展命令,iwpriv的实现上,是这样的,=>main=>set_private=>iw_get_priv_info获取wireless网卡所能处理的所有wlan_private_args类型.dev_ioctl=>wext_handle

oracle 数据库归档模式的打开与关闭_黄宝康的博客-程序员宅基地

在实际应用中,我们需要实现对数据的备份,其实现方式主要有冷备份和热备份两种。现在我们主要讨论热备份的具体操作。热备份也称为联机备份,在数据库的存档模式下进行备份。oracel数据库默认存档模式为关闭状态,要实现数据的热备份,需要改变数据库的存档模式,将其打开。并且需要注意的是数据库的存档模式的操作需要在MOUNT实例中进行,且数据库不能处于OPEN状态。下面将进行详细介绍:1. 打开存档模式:...

Spring-Cloud-第八章-消息总线(Spring Cloud Bus)_漫玥刚花的博客-程序员宅基地_springcloud bus rabbitmq 事件总线

转载请标明出处:http://blog.csdn.net/forezp/article/details/81041062本文出自方志朋的博客转载请标明出处:Spring Cloud Bus 将分布式的节点用轻量的消息代理连接起来。它可以用于广播配置文件的更改或者服务之间的通讯,也可以用于监控。本文要讲述的是用Spring Cloud Bus实现通知微服务架构的配置文件的更改。...