ListView の最初と最後をつなげて表示する

QtQuick 2.0 の ListView で、ListView で最後のアイテムから最初のアイテムにキーでジャンプ のようにすると最初から最後にジャンプをすることができることは分かりましたが、表示的には連続していません。

残念ながら ListView 自体にはこのような機能は実装されていないのですが、PathView を使うことでほぼ同様の機能を簡単に実現することができます。

import QtQuick 2.0

Rectangle {
    width: 150; height: 200
    color: "white"

    ListModel {
        id: appModel
        ListElement { name: "Music"; icon: "pics/AudioPlayer_48.png" }
        ListElement { name: "Movies"; icon: "pics/VideoPlayer_48.png" }
        ListElement { name: "Camera"; icon: "pics/Camera_48.png" }
        ListElement { name: "Calendar"; icon: "pics/DateBook_48.png" }
        ListElement { name: "Messaging"; icon: "pics/EMail_48.png" }
        ListElement { name: "Todo List"; icon: "pics/TodoList_48.png" }
        ListElement { name: "Contacts"; icon: "pics/AddressBook_48.png" }
    }

    Component {
        id: appDelegate
        Item {
            id: wrapper
            width: view.width; height: view.height / view.pathItemCount

            Image {
                id: icon
                anchors { verticalCenter: parent.verticalCenter; left: parent.left; margins: 4 }
                width: wrapper.height - 8
                height: width
                source: model.icon
            }
            Text {
                anchors { verticalCenter: parent.verticalCenter; left: icon.right; right: parent.right; margins: 4 }
                text: model.name
            }
        }
    }

    Component {
        id: appHighlight
        Rectangle { width: view.width; height: view.height / view.pathItemCount; color: "lightsteelblue" }
    }

    PathView {
        id: view
        anchors.fill: parent
        highlight: appHighlight
        preferredHighlightBegin: 0.5
        preferredHighlightEnd: 0.5
        focus: true
        model: appModel
        delegate: appDelegate
        path: Path {
            startX: view.width / 2; startY: 0
            PathLine { x: view.width / 2; y: view.height}
        }
        pathItemCount: 5 // must be odd

        Behavior on offset { SmoothedAnimation { velocity: 10 } }
        Keys.onUpPressed: offset = Math.round(offset + 1)
        Keys.onDownPressed: offset = Math.round(offset - 1)
    }
}

PathView の path を PathLine を使用して直線で定義し、view 内に表示されるアイテムの数を pathItemCount というプロパティを使用して調整しています。

キーでの操作は PathView のキー操作が期待した動作と異なる を参照してください。