Skip to content

Commit 7b1e20e

Browse files
zhengtianzuozhengtianzuo
committed
Add QmlUpDownRefresh
1 parent 9d1cc52 commit 7b1e20e

File tree

8 files changed

+330
-0
lines changed

8 files changed

+330
-0
lines changed

‎QmlUpDownRefresh/QmlBusyIndicator.qml

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
/*!
2+
*@file QmlBusyIndicator.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.7
9+
import QtGraphicalEffects 1.0
10+
11+
Item {
12+
13+
Rectangle {
14+
id: rect
15+
width: parent.width
16+
height: parent.height
17+
color: Qt.rgba(0, 0, 0, 0)
18+
radius: width / 2
19+
border.width: width / 6
20+
visible: false
21+
}
22+
23+
ConicalGradient {
24+
width: rect.width
25+
height: rect.height
26+
gradient: Gradient {
27+
GradientStop { position: 0.0; color: "#80c342" }
28+
GradientStop { position: 1.0; color: "#006325" }
29+
}
30+
source: rect
31+
32+
Rectangle {
33+
anchors.top: parent.top
34+
anchors.horizontalCenter: parent.horizontalCenter
35+
width: rect.border.width
36+
height: width
37+
radius: width / 2
38+
color: "#006325"
39+
}
40+
41+
RotationAnimation on rotation {
42+
from: 0
43+
to: 360
44+
duration: 800
45+
loops: Animation.Infinite
46+
}
47+
}
48+
}

‎QmlUpDownRefresh/QmlUpDownRefresh.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

‎QmlUpDownRefresh/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+
}

‎QmlUpDownRefresh/main.qml

Lines changed: 238 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,238 @@
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+
id: root
13+
visible: true
14+
width: 400
15+
height: 300
16+
title: qsTr("Qml上拉下拉刷新")
17+
18+
property int nCurUp: 0
19+
property int nCurDown: 18
20+
property int nPullHeight: 64
21+
22+
function funDownRefresh(){
23+
console.debug(qsTr("启动下刷新..."))
24+
listView.y = -nPullHeight;
25+
26+
busyDownRefresh.running = false;
27+
timerDownRefresh.start();
28+
}
29+
30+
BusyIndicator {
31+
id: busyDownRefresh
32+
anchors.bottom: parent.bottom
33+
anchors.bottomMargin: 6
34+
anchors.horizontalCenter: parent.horizontalCenter
35+
implicitWidth: 48
36+
implicitHeight: 48
37+
opacity: running ? 0.0 : 1.0
38+
contentItem: QmlBusyIndicator{}
39+
}
40+
41+
Timer{
42+
id: timerDownRefresh
43+
interval: 1000
44+
repeat: false
45+
running: false
46+
onTriggered: {
47+
busyDownRefresh.running = true;
48+
49+
//上面增加数据
50+
listModel.append({"name": nCurDown.toString(), "number": nCurDown.toString()});
51+
nCurDown++;
52+
listModel.append({"name": nCurDown.toString(), "number": nCurDown.toString()});
53+
nCurDown++;
54+
listModel.append({"name": nCurDown.toString(), "number": nCurDown.toString()});
55+
nCurDown++;
56+
57+
aniDownRefresh.start();
58+
}
59+
}
60+
61+
NumberAnimation {
62+
id: aniDownRefresh
63+
target: listView
64+
property: "y"
65+
duration: 200
66+
from: -nPullHeight
67+
to: 0
68+
onStopped: {
69+
listView.contentY = listView.contentHeight - listView.height;
70+
}
71+
}
72+
73+
function funUpRefresh(){
74+
console.debug(qsTr("启动上刷新..."))
75+
listView.y = nPullHeight;
76+
77+
busyUpRefresh.running = false;
78+
timerUpRefresh.start();
79+
}
80+
81+
BusyIndicator {
82+
id: busyUpRefresh
83+
anchors.top: parent.top
84+
anchors.topMargin: 6
85+
anchors.horizontalCenter: parent.horizontalCenter
86+
implicitWidth: 48
87+
implicitHeight: 48
88+
opacity: running ? 0.0 : 1.0
89+
contentItem: QmlBusyIndicator{}
90+
}
91+
92+
Timer{
93+
id: timerUpRefresh
94+
interval: 1000
95+
repeat: false
96+
running: false
97+
onTriggered: {
98+
busyUpRefresh.running = true;
99+
100+
//上面增加数据
101+
listModel.insert(0, {"name": nCurUp.toString(), "number": nCurUp.toString()});
102+
nCurUp--;
103+
listModel.insert(0, {"name": nCurUp.toString(), "number": nCurUp.toString()});
104+
nCurUp--;
105+
listModel.insert(0, {"name": nCurUp.toString(), "number": nCurUp.toString()});
106+
nCurUp--;
107+
108+
aniUpRefresh.start();
109+
}
110+
}
111+
112+
NumberAnimation {
113+
id: aniUpRefresh
114+
target: listView
115+
property: "y"
116+
duration: 200
117+
from: nPullHeight
118+
to: 0
119+
onStopped: {
120+
listView.y = 0;
121+
}
122+
}
123+
124+
ListView {
125+
id: listView
126+
width: parent.width
127+
height: parent.height
128+
model: listModel
129+
delegate: Rectangle{
130+
height: 24
131+
width: parent.width
132+
border.color: "#AAAAAA"
133+
border.width: 1
134+
Text {
135+
font.family: "microsoft yahei"
136+
font.pixelSize: 15
137+
anchors.centerIn: parent
138+
text: name + ": " + number
139+
}
140+
}
141+
states: [
142+
State {
143+
id: downRefresh
144+
name: "downRefresh"; when: (listView.contentHeight > 0) && (listView.contentY > (listView.contentHeight - root.height + nPullHeight))
145+
StateChangeScript {
146+
name: "funDownRefresh"
147+
script: funDownRefresh()
148+
}
149+
},
150+
State {
151+
id: upRefresh
152+
name: "upRefresh"; when: (listView.contentY < -nPullHeight)
153+
StateChangeScript {
154+
name: "funUpRefresh"
155+
script: funUpRefresh()
156+
}
157+
}
158+
]
159+
}
160+
161+
162+
ListModel {
163+
id: listModel
164+
ListElement {
165+
name: "A"
166+
number: "01"
167+
}
168+
ListElement {
169+
name: "B"
170+
number: "02"
171+
}
172+
ListElement {
173+
name: "C"
174+
number: "03"
175+
}
176+
ListElement {
177+
name: "D"
178+
number: "04"
179+
}
180+
ListElement {
181+
name: "E"
182+
number: "05"
183+
}
184+
ListElement {
185+
name: "F"
186+
number: "06"
187+
}
188+
ListElement {
189+
name: "G"
190+
number: "07"
191+
}
192+
ListElement {
193+
name: "H"
194+
number: "08"
195+
}
196+
ListElement {
197+
name: "I"
198+
number: "09"
199+
}
200+
ListElement {
201+
name: "J"
202+
number: "10"
203+
}
204+
ListElement {
205+
name: "K"
206+
number: "11"
207+
}
208+
ListElement {
209+
name: "L"
210+
number: "12"
211+
}
212+
ListElement {
213+
name: "M"
214+
number: "13"
215+
}
216+
ListElement {
217+
name: "N"
218+
number: "14"
219+
}
220+
ListElement {
221+
name: "O"
222+
number: "15"
223+
}
224+
ListElement {
225+
name: "P"
226+
number: "16"
227+
}
228+
ListElement {
229+
name: "Q"
230+
number: "17"
231+
}
232+
ListElement {
233+
name: "R"
234+
number: "18"
235+
}
236+
}
237+
238+
}

‎QmlUpDownRefresh/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>QmlBusyIndicator.qml</file>
5+
</qresource>
6+
</RCC>

‎QmlUpDownRefresh/show.gif

223 KB
Loading

‎QtQuickExamples.pro

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,3 +41,4 @@ SUBDIRS += QmlFontAwesome
4141
SUBDIRS += QmlListSlidDelete
4242
SUBDIRS += QmlCircularProgressButton
4343
SUBDIRS += QmlPageNavigation
44+
SUBDIRS += QmlUpDownRefresh

‎README.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -192,3 +192,7 @@ QmlLanguage: Qml动态语言切换
192192

193193
![](https://github.com/zhengtianzuo/QtQuickExamples/blob/master/QmlLanguage/show.gif?raw=true)
194194

195+
196+
QmlUpDownRefresh: Qml上拉下拉刷新
197+
198+
![](https://github.com/zhengtianzuo/QtQuickExamples/blob/master/QmlUpDownRefresh/show.gif?raw=true)

0 commit comments

Comments
 (0)