美文网首页
qml实现循环list

qml实现循环list

作者: 技术喵 | 来源:发表于2019-07-09 07:33 被阅读0次

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

    相关文章

      网友评论

          本文标题:qml实现循环list

          本文链接:https://www.haomeiwen.com/subject/mjuihctx.html