Circular ListView



  • I've a Listview that is used to choose minutes, so appears numbers from 0 to 59.

    ListView {
      model: 59
    }
    

    How can I achieve that when the Listview reach the last numbers appears the firsts ones?

    For exemple:

    58
    59
    00
    01
    02

    It would be like a "circular" Listview, when reaches the last values, apperas the firsts ones, and when reaches the first ones, apperas the last values. This avoid to the user to scroll a lot up or down if it wants numbers more near from the borders.


  • Moderators

    @lqsa Hi! You can't do this with ListView but PathView has all the bells and whistles. The code for the following...

    looks like this:

    import QtQuick 2.7
    import QtQuick.Controls 2.0
    import QtQuick.Layouts 1.0
    
    ApplicationWindow {
        visible: true
        width: 640
        height: 480
        title: qsTr("Hello World")
    
        Component {
            id: appDelegate
            Item {
                width: 60; height: 60
                scale: PathView.iconScale
    
                Text {
                    anchors.centerIn: parent
                    text: modelData
                    font.pixelSize: 20
                }
    
                MouseArea {
                    anchors.fill: parent
                    onClicked: view.currentIndex = index
                }
            }
        }
    
        Component {
            id: appHighlight
            Rectangle { width: 80; height: 40; color: "red" }
        }
    
        PathView {
            id: view
            anchors.fill: parent
            highlight: appHighlight
            preferredHighlightBegin: 0.5
            preferredHighlightEnd: 0.5
            focus: true
            model: 10
            delegate: appDelegate
            path: Path {
                startX: 50
                startY: 0
                PathAttribute { name: "iconScale"; value: 0.5 }
                PathLine { x: 50; y: 140 }
                PathAttribute { name: "iconScale"; value: 1.0 }
                PathLine { x: 50; y: 400 }
                PathAttribute { name: "iconScale"; value: 0.5 }
            }
        }
    }
    


  • Very nice.

    But, it seems that Path shows all the values. If you change model: 10 for model: 59, appears all the values from 0 to 59 compressed in the control space. Can the path only show, for exemple, 6 numbers and scroll it, like ListView?



  • I found it! It's the property pathItemCount.

    Thank you very much.


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.