Qt qml中listview 列表视图控件（下拉刷新、上拉分页、滚动轴）

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 列表视图控件（下拉刷新、上拉分页、滚动轴），希望对大家有所帮助