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小时内删除。
发表评论