Qt qml ListView drop-down refresh pull-up pagination control

Qt qml ListView drop-down refresh and pull-up paging are mainly judged on the basis of Contenty. But it took me a lot of effort to add the top drop indicator, scroll bar, and encapsulate it into a simple-to-call component:)

"Look at the effect first"

function

1 pull-down refresh and pull-up paging logic
2 / pull-down refresh
3 / pull up more
4 / scroll bar
5 / toolbar half pull hidden
6 the Author: surfsky.cnblogs.com
7 Lisence: MIT please keep this document declaration
8 the History:
9 the init. Surfsky.cnblogs.com, 2015-01
10 add initPosition property.2015-01 

Download

http://download.csdn.net/detail/surfsky/8516981

Call

The control is very simple to use, as long as the onLoad and Onloadmore events are implemented, and the rest is similar to the standard ListView.

1 / * *
2 examples of news
3 drop down to refresh
4 pull up page
5 rolling shaft
6 top toolbar
7 top toolbar automatic adsorption
8 the current row is highlighted
Author: surfsky.cnblogs.com 2015-01
10 * /
11 ListViewEx {
Id: the view
The width of 13:500
Height: 14, 800
15 pageSize: 50
16 snapHeader: true
17 initPosition: 'header'
18
19 // top news photo bar
20 headerComponent: Component {
21 PageView {
22 id: pv
23 width: the width
Height: 100
25 clip: true
26 a Rectangle {width: pv. Width; Height: pv. Height; Color: "green"}
27 a Rectangle {width: pv. Width; Height: pv. Height; Color: "yellow"}
28 a Rectangle {width: pv. Width; Height: pv. Height; Color: "blue"}
29}
30}
31
Line 32 // UI proxy
33 the delegate: Text {
34 id: wrapper;
35 width: parent. Width;
Height: 36 32;
37 the font. PointSize: 15;
38 verticalAlignment: Text. AlignVCenter;
39 horizontalAlignment: Text. AlignHCenter;
Text: 40 content;
41 / / color: ListView. View. CurrentIndex = = index? "White" : "# 505050";
42 MouseArea {
43 anchors. The fill: the parent;
44 onClicked: wrapper. ListView. The currentIndex = index;
45}
46}
47
48
49 / / -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -
50 // data load event
51 / / -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -
52 onLoad: {
53 for (var I = 0; I < pageSize. + + I)
Append ({"index": I, "content": "Item "+ I})
55}
56 onLoadMore: {
57 for (var I = pageSize*page; I < pageSize * (page + 1); + + I)
58 model.append({"index": I, "content": "Item "+ I})
59}
60} 

"Core Code"

It's too long, intercept the Contenty processing part, the other download to see it

1 / / -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --

2 // pull-down refresh and pull-up paging logic

3 / / -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --

4 onMovementEnded: {

5 //console.log("movementEnded: originY:" + originY + ", contentY:" + contentY + ", reflesh:" + needReflesh + ", more:" + needLoadMore ");

6 // refresh data

7 the if (needReflesh) {

8 lv. HeaderItem. GoState (" load ");

Model 9. Reflesh ();

10 needReflesh = false;

11}

12 // load new data

13 else if (needLoadMore) {

14 model. LoadMore ();

15 needLoadMore = false;

16}

17 the else {

18 var h1 = lv. HeaderItem. Loader. The height;

19 var h2 = lv. HeaderItem. Indicator. The height;

20

21 // the head area is automatically hidden (drag too small to hide the head, otherwise display)

22 the if (snapHeader) {

23 if (contentY >= -h1/3 && contentY < 0)

24 moveToFirst ();

25 if (contentY >= -h1 && contentY < -h1/3)

26 moveToHeader ();

27}

28 // refresh zone automatically hidden

29 if (contentY >=-(h1+h2) && contentY < -h1)

30 moveToHeader ();

31}

32}

33 onContentYChanged: {

34 // drop-down refresh judgment logic: it has already ended, but still drop down some distance

35 if (contentY < originY){

36 var dy = contenty-originy;

37 if (dy < -10){

38 lv. HeaderItem. GoState (" ready ");

39 needReflesh = true;

40}

41 the else {

42 the if (pressed) {

43. / / the console log (pressed);

44 / / needReflesh = false; // how to tell if the mouse is pressed? If the state is pressed to cancel the refresh

45 lv. HeaderItem. GoState (', ');

46}

47}

48}

49 // pull up load judgment logic: has been to the end, also pull up some distance

If (contentHeight>height & contenty-originy > contentheight-height){

51 var dy = (contenty-originy) - (contentheight-height);

Console. Log ("y: "+ contentY + ", dy:" + dy);

53 if (dy > 40){

54 needLoadMore = true;

Log ("originY:" + originY + ", contentY:" + contentY + ", height:" + height + ", contentheight:" + contentheight ");

56}

57}

58}

Qt qml ListView drop-down refresh pull-up pagination control