QML ListView实现惰性加载 - CSDN博客
QML ListView实现惰性加载
移动开发中，经常会看到这样的需求，用户拖动列表至列表最下端时，软件自动加载新的内容。这就是惰性加载，也叫延时加载。
实现的关键是监控当用户拖动列表至最下端时的事件。
上拉加载原理：contentY为列表上拉后列表左上角点距显示框左上解点的高度，listView1.height为可显示部分的高度，假设列表单元的高度为listViewCellHeight,列表个数为listViewCellCount，则最后个列表单元恰好被显示出来时的条件为：contentY+listView1.height==listViewCellHeight*listViewCellCount
ListView {
& & & & & & id: listView1
& & & & & & ...
& & & & & & //拖动后停止时触发此事件
& & & & & & onDragEnded:{ & & & & & & &&
& & & & & & & & if(listView1.contentY & (listViewCellHeight * (flightListModel.count+1) - listView1.height))
& & & & & & & & {
&& &//加载下一页：
& & & & & & & & & & ticketModel.doGetFlightInfo(&&, departCity, arrivalCity, 1, &DepartureDate&, &ASC&, pageCount, pageIndex);
& & & & & & & & & & pageIndex &= pageIndex+1;
& & & & & & & & }
& & & & & & }
& & & & & & //最下方显示“上拉加载更多”“正在加载”等
& & & & & & footer:Rectangle {
& & & & & & & & & & width: listView1.width
& & & & & & & & & & height: 0.5 * listViewCellHeight
& & & & & & & & & & Text {
& & & & & & & & & & & & id: label
& & & & & & & & & & & & anchors.verticalCenter: parent.verticalCenter
& & & & & & & & & & & & anchors.horizontalCenter: parent.horizontalCenter
& & & & & & & & & & & & color:&#b9b7b7&
& & & & & & & & & & & & font.pixelSize: 32
& & & & & & & & & & & & text:&上拉加载更多&
& & & & & & & & & & }
& & & & & & & & & & states: [
& & & & & & & & & & & & State {
& & & & & & & & & & & & & & //将最后一个列表单元上拉至距底部一个单元高时显示“正在加载”，flightListModel.count+1就是基于这个
& & & & & & & & & & & & & & name: &base&; when: listView1.contentY &= (listViewCellHeight * (flightListModel.count+1) - listView1.height)
& & & & & & & & & & & & & & PropertyChanges { target: text: &上拉加载更多&;}
& & & & & & & & & & & & },
& & & & & & & & & & & & State {
& & & & & & & & & & & & & & name: &pulled&; when: listView1.contentY & (listViewCellHeight * (flightListModel.count+1) - listView1.height)
& & & & & & & & & & & & & & PropertyChanges { target: text: &正在加载&;}
& & & & & & & & & & & & }
& & & & & & & & & & ]
& & & & & & }
& & & & & & model: ListModel {
& & & & & & & & id:flightListModel
& & & & & & & & ListElement {
& & & & & & & & & & AirLine:&&//航空公司
& & & & & & & & & & FlightNumber:&&//航班号
& & & & & & & & & & PlaneType:&&//机型
& & & & & & & & & & DepartTime:&&//起飞时间
& & & & & & & & & & ArriveTime:&&//到达时间
& & & & & & & & & & DepartAirport:&&//起飞机场
& & & & & & & & & & ArriveAirport:&&//到达机场
& & & & & & & & & & SeatClass:&&//舱位等级
& & & & & & & & & & SeatCount:&&//座位数
& & & & & & & & & & Price:&&//价格
& & & & & & & & & & Discount:&&//折扣
& & & & & & & & & & DiscountPrice:&&//已优惠
& & & & & & & & & & PolicyId:&&//(用于回发给PC端)
& & & & & & & & }
& & & & & & }
转载：/wslngcjsdxdr@126/blog/static//
本文已收录于以下专栏：
相关文章推荐
虽然Qt是跨平台的，但是桌面用户和手机用户的操作习惯存在很大的差异。手机用户可以用手指直接滑动屏幕，而桌面用户则必须借助鼠标操作。
在QML中，很多属性的默认值都是优先考虑手机用户的。如果使用默认值，...
ListView默认没有选中行的功能。实现选中的功能，需要在代理模型中实现。
ListView {
id : m_listView
anchors.fill: parent
...
在QML视图使用MVC模式构成Model View Delegate来显示中，同时系统也提供了三种视图方式：ListView列表视图、GridView网格视图和PathView路径视图。这三种视图都是...
width: parent.width
height: parent.height
anchors.fill: parent
前言今天起床，拿起手机开机第一时间当然是打开微信了，左右滑动Viewpager，发现它使用了一种叫惰性加载，或者说懒加载（lazy-loading）的方式加载Viewpager中的Fragment。效...
addEvent函数在第一次进入条件分支之后，在函数内部会重写这个函数，重写之后的函数就是我们期望的addEvent函数，在下一次进入addEvent函数的时候，addEvent函数里不再存在条件分支...
图片惰性加载 DEMO 地址 -& 图片惰性加载（放在了 Github 上，所以可能会慢，最好用 chrome）
关于惰性加载
在讲图片的惰性加载前，我们先来聊聊惰性加载。惰性加载又称为延迟加...
他的最新文章
讲师：吴岸城
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)Qt ListView详细用法 | QtQml基础
Theme | Powered byQml ListView实现选中操作 - CSDN博客
Qml ListView实现选中操作
ListView默认没有选中行的功能。实现选中的功能，需要在代理模型中实现。
ListView {
id : m_listView
anchors.fill: parent
anchors.margins: 20
clip: true
model: [&A&,&B&,&C&,&D&,&E&]
delegate: numberDelegate
spacing: 5
focus: true
Component {
id: numberDelegate
Rectangle {
width: ListView.view.width
height: 40
color: ListView.isCurrentItem?&#157efb&:&#53d769& //选中颜色设置
border.color: Qt.lighter(color, 1.1)
anchors.centerIn: parent
font.pixelSize: 10
text: modelData + index
MouseArea {
anchors.fill: parent
onClicked: m_listView.currentIndex = index &//实现item切换
效果如下：
本文已收录于以下专栏：
相关文章推荐
用过QML进行列表显示的同仁肯定都知道，QML中的ListView是默认没有ScrollBar的，超出部分的列表项只能通过滚动鼠标滚轮进行显示，但是我们又知道QML中的ScrollView是有Scro...
import QtQuick 2.4
import QtQuick.Controls 1.3
import QtQuick.Window 2.2
import QtQuick.Dialogs 1.2
QML数据模型(Model)
QML中的ListView,GridView和Repeater等元素需要数据模型来提供要显示的数据.这些元素需要一个为模型中的每一项数据生成一个实例的代理组件(dele...
ListView是QML中经常使用的，Qt帮助中给了我们这样一个基本的例子：
    
这个例子给了我们一个很明显的实现思路，
就是在ListView的model属性中实现模型类，再在delegat...
虽然Qt是跨平台的，但是桌面用户和手机用户的操作习惯存在很大的差异。手机用户可以用手指直接滑动屏幕，而桌面用户则必须借助鼠标操作。
在QML中，很多属性的默认值都是优先考虑手机用户的。如果使用默认值，...
每个委托都可以拥有独立的MouseArea以及Key处理机构
Component {
        id:featureButtonsDelegate
     &#160...
import QtQuick 2.3
import QtQuick.Window 2.2
import QtQuick.Controls 1.4
import QtQuick....
他的最新文章
讲师：吴岸城
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)3800人阅读
Qt/QML的实践积累（35）
& & & & ListView在QML界面开发中主要用于列表的显示，往往配合ScrollView使用，ScrollView主要作用是给ListView增加右侧滚动条功能，用于ListView显示不下时，进行滚动。
& & & & 具体的实现代码如下：
import Material 0.1
import QtQuick 2.4
import QtQuick.Layouts 1.2
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4
visible: true
property int dpi: 1
property string name:&姓名&
width : 300 *dpi
height: 300 * dpi
ListModel {
id: listModel
ListElement { name: &Apple& }
ListElement { name: &Orange& }
ListElement { name: &Banana& }
ListElement {name: &Computer1&}
ListElement {name: &Computer2&}
ListElement {name: &Computer3&}
ListElement {name: &Computer4&}
ListElement {name: &Computer5&}
ListElement {name: &Computer6&}
ListElement {name: &Computer7&}
ListElement {name: &Computer8&}
ScrollView {
anchors.fill: parent
ListView {
id:left_list
model:listModel
orientation:
ListView.Vertical
ListView.SnapToItem
//停靠在列表的最开始
cacheBuffer:
anchors.fill: parent
delegate: Rectangle{
id:delegate_list
// color: &red&
height: 40*dpi
width: 300*dpi
signal signalShowMenu(var id,int x,int y)
MouseArea{
id:mouse_delegate
acceptedButtons: Qt.RightButton|Qt.LeftButton
hoverEnabled: true
propagateComposedEvents: true
enabled:true
anchors.fill: parent
onEntered:{
delegate_list.color = &#DCDCDC&
btn_del.visible
console.log(&in&)
onExited:{
delegate_list.color = &white&
btn_del.visible
console.log(&out&)
onClicked: {
mouse.accepted =
console.log(&item click.&);
onDoubleClicked: {
mouse.accepted =
console.log(&item double click.&);
RowLayout{
spacing: 20 *dpi
left: parent.left
leftMargin: 12*dpi
right: parent.right
rightMargin: 12*dpi
//用于将该行显示在矩形垂直居中
anchors.verticalCenter: parent.verticalCenter
id:left_list_user
leftMargin: 12*dpi
left: left_list_photo.right
color:&#333333&
font.pixelSize: 15 * dpi
font.family: qsTr(&微软雅黑&)
//删除按钮
id:btn_del
anchors.right: parent.right
anchors.rightMargin: 15*dpi
iconSource:&./image/del.png&
visible:false
enabled:true
: ButtonStyle{
background:Image {
width: sourceSize.width * dpi
height: sourceSize.height * dpi
source:control.iconSource
label:Item {}
onHoveredChanged: {
hovered ? delegate_list.color = &#DCDCDC& : delegate_list.color = &white&
hovered ? btn_del.visible = true : btn_del.visible = true
onClicked: {
console.log(&del item&)
在如上的代码中，鼠标的进入和退出某个区域，都要进行相应的界面变换，因此，会将鼠标区域的hoverEnabled: true，这样才能接受onEntered和onExited事件，同事，如果要进行鼠标事件的传输，即上层接受到鼠标的点击或双击时，他的父控件也想对鼠标事件进行相应的处理，则要在单击或双击事件中设置mouse.accepted =这样，鼠标事件就可以层层传递下去。
& & & & 另外，如果两个MouseArea区域重合，则上层的MouseArea会覆盖下层的事件，所以，如果在上面的Button里面也设置了MouseArea，则会覆盖Rectangle里面的MouseArea，导致出了按钮区域后，矩形框不能处于选中状态，因此可以考虑Button的hovered属性，该属性是一个只读属性，可以监测他的改变状态，如下：
onHoveredChanged: {
hovered ? delegate_list.color = &#DCDCDC& : delegate_list.color = &white&
hovered ? btn_del.visible = true : btn_del.visible = true
}然后对鼠标进入和退出时做相应的处理，其做的事情和onEntered与onExited中做同样的事情，鼠标进入代理矩形区和进入关闭按钮时，都会对背景颜色进行改变，从而实现了预期的效果。
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：61703次
积分：1170
积分：1170
排名：千里之外
原创：53篇
【公众号：三个程序员】 接收技术知识实时推送
技术方向：本人专注VC，Qt/QML语言开发。
研究平台包括Windows、Linux以及MacOSX相关技术的学习，
欢迎大家共同交流学习。
(1)(1)(3)(1)(1)(5)(10)(8)(1)(2)(2)(1)(1)(2)(1)(7)(2)(4)
(window.slotbydup = window.slotbydup || []).push({
id: '4740887',
container: s,
size: '250,250',
display: 'inlay-fix'