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不能滚动太快


  • 网站研运

    @青山白云 对的,因为处于中间状态的时候,过少的Item会导致视觉露馅,所以至少是使用三个Item制作的效果才符合需求。


Log in to reply
 

最近的回复

  • G

    北京名律免费法律咨询,解决您的法律困扰,如果您眼下没有遇到法律上的问题,也可以留一位大律师的联系方式以备不时之需!ccfd91efc3a6b2ed0e79054d2248eed.jpg bf6015b383483f1fe83cdcfd130fc6b.jpg 2f347879129add1096bf3424edbe517.jpg

    read more
  • G

    北京名律免费法律咨询,解决您的法律困扰,如果您眼下没有遇到法律上的问题,也可以留一位大律师的联系方式以备不时之需!微信图片_20200210141336.png 微信图片_20200210141333.png 微信图片_20200210141329.png

    read more
  • G

    北京名律免费法律咨询,解决您的法律困扰,如果您眼下没有遇到法律上的问题,也可以留一位大律师的联系方式以备不时之需!

    read more

关注我们

微博
QQ群