欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

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

程序员文章站 2024-03-05 11:54:12
qt qml listview下拉刷新和上拉分页主要根据contenty来判断。但要加上顶部下拉指示器、滚动条,并封装成可简单调用的组件,着实花了我不少精力:) 先给大家...

qt qml listview下拉刷新和上拉分页主要根据contenty来判断。但要加上顶部下拉指示器、滚动条,并封装成可简单调用的组件,着实花了我不少精力:)

先给大家展示下效果图:

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

【功能】

下拉刷新和上拉分页逻辑
/下拉刷新
/上拉更多
/滚动栏
/工具栏半拉显隐
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 列表视图控件(下拉刷新、上拉分页、滚动轴),希望对大家有所帮助