背景:如果需要qml显示循环list,一般是用3个ListView循环交替,实现伪循环,期间逻辑复杂,容易出错,PathView本身自带循环,所以考虑用PathView实现循环
设计:PathView显示5条数据,按照垂直List一个个排好顺序,由于收尾移动时候会空白穿帮,所以用clip控制显示中间三条数据
滚动控制:currentIndex,decrementCurrentIndex(),incrementCurrentIndex()
代码:
Item{
id: item1
property int myIndex: 0
property int onePageCount: 3
property real oneHeight: 72
property real oneWidth: 580
property int isCurrentListView: 1 //0,1,2
property bool isAdd: true //direction,down=true,up=false
property int hightlightIndex: 0
property int currentIndexPathView: 0 //use this
Item{
id: itemClip
width: item1.oneWidth
height: item1.oneHeight*3
clip: true
PathView {
id: listView1
width: item1.oneWidth
model: listModelSpeedWarning
delegate: delegeteLine
pathItemCount: item1.onePageCount+2
interactive: false
path: Path {
startX: item1.oneWidth/2
startY: -item1.oneHeight/2
PathQuad { x: item1.oneWidth/2; y: item1.oneHeight*0+item1.oneHeight/2; controlX: item1.oneWidth/2; controlY: item1.oneHeight*0+item1.oneHeight/2 }
PathQuad { x: item1.oneWidth/2; y: item1.oneHeight*1+item1.oneHeight/2; controlX: item1.oneWidth/2; controlY: item1.oneHeight*1+item1.oneHeight/2 }
PathQuad { x: item1.oneWidth/2; y: item1.oneHeight*2+item1.oneHeight/2; controlX: item1.oneWidth/2; controlY: item1.oneHeight*2+item1.oneHeight/2 }
PathQuad { x: item1.oneWidth/2; y: item1.oneHeight*3+item1.oneHeight/2; controlX: item1.oneWidth/2; controlY: item1.oneHeight*3+item1.oneHeight/2 }
PathQuad { x: item1.oneWidth/2; y: item1.oneHeight*4+item1.oneHeight/2; controlX: item1.oneWidth/2; controlY: item1.oneHeight*4+item1.oneHeight/2 }
}
Component.onCompleted: {
listView1.currentIndex = -1
}
}
}
}
问题:windows下测试,按住按键不松手,list滚动会卡住,松手后恢复正常,看来list不能滚动太快
网友评论