Qt qml中listview 列表视图控件(下拉刷新、上拉分页、滚动轴)
2016-07-08 12:00
1236 查看
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 列表视图控件(下拉刷新、上拉分页、滚动轴),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
您可能感兴趣的文章:
- Android下拉刷新ListView――RTPullListView(demo)
- android开发教程之实现listview下拉刷新和上拉刷新效果
- Android实现上拉加载更多以及下拉刷新功能(ListView)
- android下拉刷新ListView的介绍和实现代码
- Android ListView实现上拉加载更多和下拉刷新功能
- Android ListView下拉刷新上拉自动加载更多DEMO示例
- Android Listview上下拉动刷新tab滑动切换功能
- Android UI设计系列之自定义ListView仿QQ空间阻尼下拉刷新和渐变菜单栏效果(8)
- Android仿XListView支持下拉刷新和上划加载更多的自定义RecyclerView
- ListView实现下拉动态渲染数据
相关文章推荐
- 完美实现Android ListView中的TextView的跑马灯效果
- android上改变listView的选中颜色
- windows用windeployqt发布qt quick application程序
- Delphi7中Listview的常用功能汇总
- Delphi控件ListView的属性及使用方法详解
- Android ListView弹性效果的实现方法
- android中ListView数据刷新时的同步方法
- Android提高之ListView实现自适应表格的方法
- Android中实现水平滑动(横向滑动)ListView示例
- Android ListView分页功能实现方法
- C#实现ListView选中项向上或向下移动的方法
- C#下listview如何插入图片
- Listview加载的性能优化是如何实现的
- C#实现listview Group收缩扩展的方法
- C# listview添加combobox到单元格的实现代码
- ListView 百分比进度条(delphi版)
- Android listview多视图嵌套多视图
- ListView Adapter优化 实例
- Android用ListView显示SDCard文件列表的小例子
- Adapter实现ListView带多选框等状态的自定义控件的注意事项