Qtqml中listview列表视图控件(下拉刷新、上拉分页、滚动轴)Qt qml中listview 列表视图控件(下拉刷新、上拉分页、滚动轴)
来源
设置ListView涉及到将contentsY,即视图的可见部分的顶部,设置y为委托的值。另⼀个更改是interactive将视图设置为false。这样可以防⽌视图移动。⽤户不能再滚动列表或更改当前Item。
contentY为列表上拉后列表左上⾓点距显⽰框左上解点的⾼度
listview控件在哪里listView1.height为可显⽰部分的⾼度,假设列表单元的⾼度为listViewCellHeight,列表个数为listViewCellCount,则最后个列表单元恰好被显⽰出来时的条件为 ontentY+listView1.height==listViewCellHeight*listViewCellCount
Qt qml listview下拉刷新和上拉分页主要根据contentY来判断。但要加上顶部下拉指⽰器、滚动条,并封装成可简单调⽤的组件,着实花了我不少精⼒:)
【先看效果】
【功能】
1 下拉刷新和上拉分页逻辑
2    /下拉刷新
3    /上拉更多
4    /滚动栏
5    /⼯具栏半拉显隐
6 Author: surfskyblogs
7 Lisence: MIT 请保留此⽂档声明
8 History:
9    init. surfskyblogs, 2015-01
10    add initPosition property. 2015-01
【下载】
download.csdn/detail/surfsky/8516981
【调⽤】
控件使⽤⾮常简单,只要实现 onLoad 和 onLoadMore 事件即可,其他的和标准的ListView差不多。
1 /**
2 新闻⽰例
3    下拉刷新
4    上拉分页
5    滚动轴
6    顶部⼯具栏
7    顶部⼯具栏⾃动吸附
8    当前⾏⾼亮
9 Author: surfskyblogs 2015-01
10 */
11 ListViewEx{
12    id: view
13    width: 500
14    height: 800
15    pageSize: 50
16    snapHeader: true
17    initPosition: 'header'
18
19    // 顶部新闻图⽚栏
20    headerComponent: Component{
21        PageView{
22            id: pv
23            width: view.width
24            height: 100
25            clip: true
26            Rectangle{width:pv.width; height:pv.height; color: 'green'}
27            Rectangle{width:pv.width; height:pv.height; color: 'yellow'}
28            Rectangle{width:pv.width; height:pv.height; color: 'blue'}
29        }
30    }
31
32    // ⾏UI代理
33    delegate: Text {
34        id: wrapper;
35        width: parent.width;
36        height: 32;
37        font.pointSize: 15;
38        verticalAlignment: Text.AlignVCenter;
39        horizontalAlignment: Text.AlignHCenter;
40        text: content;
41        //color: ListView.view.currentIndex == index ? "white" : "#505050";
42        MouseArea {
43            anchors.fill: parent;
44            onClicked:  wrapper.ListView.view.currentIndex = index;
45        }
46    }
47
48
49    //-----------------------------------------
50    // 数据加载事件
51    //-----------------------------------------
52    onLoad:{
53        for (var i = 0 ; i < pageSize ; ++i)
54            model.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 }
【核⼼代码】
实在太长了,截取ContentY处理部分,其他的下载了看吧
1    //-------------------------------------
2    // 下拉刷新和上拉分页逻辑
3    //-------------------------------------
4    onMovementEnded: {
5        //console.log("movementEnded: originY:" + originY + ", contentY:" + contentY + ", reflesh:" + needReflesh + ", more:" + needLoadMore);
6        // 刷新数据
7        if (needReflesh){
8            State('load');
9            flesh();
10            needReflesh = false;
11        }
12        // 加载新数据
13        else if (needLoadMore){
14            model.loadMore();
15            needLoadMore = false;
16        }
17        else {
18            var h1 = lv.headerItem.loader.height;
19            var h2 = lv.headerItem.indicator.height;
20
21            // 头部区⾃动显隐(拖动过⼩隐藏头部,反之显⽰)
22            if (snapHeader){
23                if (contentY >= -h1/3 && contentY < 0)
24                    moveToFirst();
25                if (contentY >= -h1 && contentY < -h1/3)
26                    moveToHeader();
27            }
28            // 刷新区⾃动显隐
29            if (contentY >=-(h1+h2) && contentY < -h1)
30                moveToHeader();
31        }
32    }
33    onContentYChanged: {
34        // 下拉刷新判断逻辑:已经到头了,还下拉⼀定距离
35        if (contentY < originY){
36            var dy = contentY - originY;
37            if (dy < -10){
38                State('ready');
39                needReflesh = true;
40            }
41            else {
42                if (pressed){
43                    //console.log(pressed);
44                    //needReflesh = false;  // 如何判断当前⿏标是否按下?如果是按下状态才能取消刷新
45                    State('');
46                }
47            }
48        }
49        // 上拉加载判断逻辑:已经到底了,还上拉⼀定距离
50        if (contentHeight>height && contentY-originY > contentHeight-height){
51            var dy = (contentY-originY) - (contentHeight-height);
52            //console.log("y: " + contentY + ", dy: " + dy);
53            if (dy > 40){
54                needLoadMore = true;
55                //console.log("originY:" + originY + ", contentY:" + contentY + ", height:" + height + ", contentheight:" + contentHeight);
56            }
57        }
58    }
========== End

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。