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
 

走马观花

最近的回复

  • 这张图或许阐述了这个问题。
    有效打造个人品牌.png

    其实对于我们职场人员,尤其是程序员,都有很强的作用。我们虽然产品意识比较弱,但是我们对产品的敏感性强,尤其是我们有制作过产品的经验,这反而是一个优势。

    read more
  • @jiangcaiyang 给你一个大大的赞!
    论坛最近打算再次启用iframely服务了。试试看!

    https://community.nodebb.org/topic/4401

    read more

关注我们

微博
QQ群