qml example: PathView

Example of using qml PathView. For details of Path, read Path.

qml example: PathView

import QtQuick 2.0

Rectangle {

    width: 300
    height: 360

    ListModel {
        id: myListModel
        ListElement { dayOfWeek: "Sunday"; num: 0}
        ListElement { dayOfWeek: "Monday"; num: 1}
        ListElement { dayOfWeek: "Tuesday"; num: 2}
        ListElement { dayOfWeek: "Wednesday"; num: 3}
        ListElement { dayOfWeek: "Thursday"; num: 4}
        ListElement { dayOfWeek: "Friday"; num: 5}
        ListElement { dayOfWeek: "Saturday"; num: 6}
    }

    PathView {
        id: myPathView
        anchors.fill: parent


        model: myListModel
        delegate: Component{
            Item{
                property variant itemData: model.modelData
                width: 100
                height: 12
                Column{
                    Text {
                        text: dayOfWeek;
                        anchors.horizontalCenter: parent.horizontalCenter }
                }

                //Use mouse click to select currentIndex
                MouseArea{
                    id: itemMouseArea
                    anchors.fill: parent
                    onClicked: {
                        myPathView.currentIndex = index

                    }
                }

            }
        }

        //To read detail of Path,
        //visit: http://qt-project.org/doc/qt-5.0/qtquick/qml-qtquick2-path.html
        path: Path {
            startX: 50; startY: 12
            PathLine { x: 300-50; y: 360-12 }
        }

        focus: true

        //Press Left/Right key to change currentIndex
        Keys.onLeftPressed: decrementCurrentIndex()
        Keys.onRightPressed: incrementCurrentIndex()

    }

}