Circular ListView

lqsa

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.

? Offline

@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 }
        }
    }
}

lqsa

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?

lqsa

I found it! It's the property pathItemCount.

Thank you very much.