qml实现循环list

背景:如果需要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不能滚动太快

posted @ 2021-11-01 14:52  踏月清风  阅读(220)  评论(0编辑  收藏  举报