Skip to content

Commit 11a5295

Browse files
zhengtianzuozhengtianzuo
committed
Add QmlCircularProgressButton
1 parent c1fa6de commit 11a5295

File tree

8 files changed

+228
-0
lines changed

8 files changed

+228
-0
lines changed

‎QmlCircularProgressButton/QmlCircularProgress.qml

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
/*!
2+
*@file QmlCircularProgress.qml
3+
*@brief Qml圆形进度条
4+
*@version 1.0
5+
*@section LICENSE Copyright (C) 2003-2103 CamelSoft Corporation
6+
*@author zhengtianzuo
7+
*/
8+
import QtQuick 2.4
9+
10+
Canvas {
11+
property color arcColor: "#148014"
12+
property color arcBackgroundColor: "#EEEEEE"
13+
property int arcWidth: 2
14+
property real progress: 0
15+
property real radius: 100
16+
property bool anticlockwise: false
17+
property alias interval: timer.interval
18+
19+
signal sStart()
20+
signal sStop()
21+
22+
id: canvas
23+
width: 2*radius + arcWidth
24+
height: 2*radius + arcWidth
25+
26+
Text{
27+
anchors.centerIn: parent
28+
font.pointSize: 15
29+
text: Math.floor((parent.progress / 360) * 100 )+ "%"
30+
}
31+
32+
Timer{
33+
id: timer
34+
running: false
35+
repeat: true
36+
interval: 5
37+
onTriggered:{
38+
parent.progress++;
39+
if (parent.progress > 360){
40+
onStop();
41+
return;
42+
}
43+
parent.requestPaint();
44+
}
45+
}
46+
47+
function isRunning(){
48+
return(timer.running)
49+
}
50+
51+
function onStart(){
52+
progress = 0;
53+
var ctx = getContext("2d");
54+
ctx.clearRect(0,0,width,height);
55+
timer.running = true;
56+
emit: sStart()
57+
}
58+
59+
function onStop(){
60+
timer.running = false;
61+
emit: sStop()
62+
}
63+
64+
onPaint: {
65+
var ctx = getContext("2d")
66+
ctx.clearRect(0,0,width,height)
67+
ctx.beginPath()
68+
ctx.strokeStyle = arcBackgroundColor
69+
ctx.lineWidth = arcWidth
70+
ctx.arc(width/2,height/2,radius,0,Math.PI*2,anticlockwise)
71+
ctx.stroke()
72+
73+
var r = progress*Math.PI/180
74+
ctx.beginPath()
75+
ctx.strokeStyle = arcColor
76+
ctx.lineWidth = arcWidth
77+
78+
ctx.arc(width/2,height/2,radius,0-90*Math.PI/180,r-90*Math.PI/180,anticlockwise)
79+
ctx.stroke()
80+
}
81+
}
82+
83+
84+

‎QmlCircularProgressButton/QmlCircularProgressButton.pro

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
#-------------------------------------------------
2+
#
3+
# Copyright (C) 2003-2103 CamelSoft Corporation
4+
#
5+
#-------------------------------------------------
6+
7+
QT += qml quick
8+
9+
CONFIG += c++11
10+
11+
SOURCES += main.cpp
12+
13+
RESOURCES += qml.qrc

‎QmlCircularProgressButton/main.cpp

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
/*!
2+
*@file main.cpp
3+
*@brief 程序主文件
4+
*@version 1.0
5+
*@section LICENSE Copyright (C) 2003-2103 CamelSoft Corporation
6+
*@author zhengtianzuo
7+
*/
8+
#include <QGuiApplication>
9+
#include <QQmlApplicationEngine>
10+
11+
int main(int argc, char *argv[])
12+
{
13+
QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
14+
QGuiApplication app(argc, argv);
15+
16+
QQmlApplicationEngine engine;
17+
engine.load(QUrl(QLatin1String("qrc:/main.qml")));
18+
19+
return app.exec();
20+
}

‎QmlCircularProgressButton/main.qml

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
/*!
2+
*@file main.qml
3+
*@brief 主文件
4+
*@version 1.0
5+
*@section LICENSE Copyright (C) 2003-2103 CamelSoft Corporation
6+
*@author zhengtianzuo
7+
*/
8+
import QtQuick 2.7
9+
import QtQuick.Controls 2.0
10+
11+
ApplicationWindow {
12+
visible: true
13+
width: 400
14+
height: 300
15+
title: qsTr("Qml圆形进度按钮")
16+
17+
Rectangle{
18+
property int btnHeight: 48
19+
property int btnWidth: 120
20+
21+
id: cProBtn
22+
height: btnHeight
23+
width: btnWidth
24+
anchors.centerIn: parent
25+
border.color: "#148014"
26+
border.width: 2
27+
radius: 0
28+
Text{
29+
id: cText
30+
anchors.centerIn: parent
31+
font.family: "microsoft yahei"
32+
font.pixelSize: 14
33+
text: qsTr("开始")
34+
}
35+
MouseArea{
36+
anchors.fill: parent
37+
onClicked: {
38+
if (rAniStart.running || rAniStop.running) return
39+
cText.visible = false;
40+
rAniStart.start();
41+
widthAniStart.start();
42+
}
43+
}
44+
PropertyAnimation{
45+
id: rAniStart
46+
target: cProBtn
47+
property: "radius"
48+
duration: 300
49+
from: 0
50+
to: cProBtn.btnHeight/2
51+
onStopped: {
52+
cProgress.onStart();
53+
cProgress.visible = true;
54+
}
55+
}
56+
PropertyAnimation{
57+
id: widthAniStart
58+
target: cProBtn
59+
property: "width"
60+
duration: 300
61+
from: cProBtn.btnWidth
62+
to: cProBtn.btnHeight
63+
}
64+
QmlCircularProgress{
65+
id: cProgress
66+
anchors.centerIn: parent
67+
visible: false
68+
arcWidth: 2
69+
radius: cProBtn.btnHeight/2
70+
interval: 2
71+
arcColor: "#148014"
72+
onSStop: {
73+
visible = false;
74+
rAniStop.start();
75+
widthAniStop.start();
76+
}
77+
}
78+
PropertyAnimation{
79+
id: rAniStop
80+
target: cProBtn
81+
property: "radius"
82+
duration: 300
83+
from: cProBtn.btnHeight/2
84+
to: 0
85+
onStopped: {
86+
cText.text = qsTr("完成");
87+
cText.visible = true;
88+
}
89+
}
90+
PropertyAnimation{
91+
id: widthAniStop
92+
target: cProBtn
93+
property: "width"
94+
duration: 300
95+
from: cProBtn.btnHeight
96+
to: cProBtn.btnWidth
97+
}
98+
}
99+
}

‎QmlCircularProgressButton/qml.qrc

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
<RCC>
2+
<qresource prefix="/">
3+
<file>main.qml</file>
4+
<file>QmlCircularProgress.qml</file>
5+
</qresource>
6+
</RCC>

‎QmlCircularProgressButton/show.gif

83.8 KB
Loading

‎QtQuickExamples.pro

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,3 +39,4 @@ SUBDIRS += QmlLoader
3939
SUBDIRS += QmlInvertedImage
4040
SUBDIRS += QmlFontAwesome
4141
SUBDIRS += QmlListSlidDelete
42+
SUBDIRS += QmlCircularProgressButton

‎README.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -177,3 +177,8 @@ QmlListSlidDelete: Qml滑动删除
177177

178178
![](https://github.com/zhengtianzuo/QtQuickExamples/blob/master/QmlListSlidDelete/show.gif?raw=true)
179179

180+
181+
QmlCircularProgressButton: Qml圆形进度按钮
182+
183+
![](https://github.com/zhengtianzuo/QtQuickExamples/blob/master/QmlCircularProgressButton/show.gif?raw=true)
184+

0 commit comments

Comments
 (0)