Qt qml中listview 列表视图控件(下拉刷新、上拉分页、滚动轴)
程序员文章站
2024-03-03 23:11:04
qt qml listview下拉刷新和上拉分页主要根据contenty来判断。但要加上顶部下拉指示器、滚动条,并封装成可简单调用的组件,着实花了我不少精力:)
先给大家...
qt qml listview下拉刷新和上拉分页主要根据contenty来判断。但要加上顶部下拉指示器、滚动条,并封装成可简单调用的组件,着实花了我不少精力:)
先给大家展示下效果图:
【功能】
下拉刷新和上拉分页逻辑 /下拉刷新 /上拉更多 /滚动栏 /工具栏半拉显隐 author: surfsky.cnblogs.com lisence: mit 请保留此文档声明 history: init. surfsky.cnblogs.com, 2015-01 add initposition property. 2015-01
【调用】
控件使用非常简单,只要实现 onload 和 onloadmore 事件即可,其他的和标准的listview差不多。
/** 新闻示例 下拉刷新 上拉分页 滚动轴 顶部工具栏 顶部工具栏自动吸附 当前行高亮 author: surfsky.cnblogs.com 2015-01 */ listviewex{ id: view width: 500 height: 800 pagesize: 50 snapheader: true initposition: 'header' // 顶部新闻图片栏 headercomponent: component{ pageview{ id: pv width: view.width height: 100 clip: true rectangle{width:pv.width; height:pv.height; color: 'green'} rectangle{width:pv.width; height:pv.height; color: 'yellow'} rectangle{width:pv.width; height:pv.height; color: 'blue'} } } // 行ui代理 delegate: text { id: wrapper; width: parent.width; height: 32; font.pointsize: 15; verticalalignment: text.alignvcenter; horizontalalignment: text.alignhcenter; text: content; //color: listview.view.currentindex == index ? "white" : "#505050"; mousearea { anchors.fill: parent; onclicked: wrapper.listview.view.currentindex = index; } } //----------------------------------------- // 数据加载事件 //----------------------------------------- onload:{ for (var i = 0 ; i < pagesize ; ++i) model.append({"index": i, "content": "item " + i}) } onloadmore:{ for (var i = pagesize*page ; i < pagesize*(page+1); ++i) model.append({"index": i, "content": "item " + i}) } }
【核心代码】
实在太长了,截取contenty处理部分,其他的下载了看吧
//------------------------------------- // 下拉刷新和上拉分页逻辑 //------------------------------------- onmovementended: { //console.log("movementended: originy:" + originy + ", contenty:" + contenty + ", reflesh:" + needreflesh + ", more:" + needloadmore); // 刷新数据 if (needreflesh){ lv.headeritem.gostate('load'); model.reflesh(); needreflesh = false; } // 加载新数据 else if (needloadmore){ model.loadmore(); needloadmore = false; } else { var h1 = lv.headeritem.loader.height; var h2 = lv.headeritem.indicator.height; // 头部区自动显隐(拖动过小隐藏头部,反之显示) if (snapheader){ if (contenty >= -h1/3 && contenty < 0) movetofirst(); if (contenty >= -h1 && contenty < -h1/3) movetoheader(); } // 刷新区自动显隐 if (contenty >=-(h1+h2) && contenty < -h1) movetoheader(); } } oncontentychanged: { // 下拉刷新判断逻辑:已经到头了,还下拉一定距离 if (contenty < originy){ var dy = contenty - originy; if (dy < -10){ lv.headeritem.gostate('ready'); needreflesh = true; } else { if (pressed){ //console.log(pressed); //needreflesh = false; // 如何判断当前鼠标是否按下?如果是按下状态才能取消刷新 lv.headeritem.gostate(''); } } } // 上拉加载判断逻辑:已经到底了,还上拉一定距离 if (contentheight>height && contenty-originy > contentheight-height){ var dy = (contenty-originy) - (contentheight-height); //console.log("y: " + contenty + ", dy: " + dy); if (dy > 40){ needloadmore = true; //console.log("originy:" + originy + ", contenty:" + contenty + ", height:" + height + ", contentheight:" + contentheight); } } }
以上所述是小编给大家介绍的qt qml中listview 列表视图控件(下拉刷新、上拉分页、滚动轴),希望对大家有所帮助