PathView Class Reference

The PathView element lays out model-provided items on a path. More...

Inheritance diagram for PathView:

Detailed Description

The PathView element lays out model-provided items on a path.

Since

4.7

A PathView displays data from models created from built-in QML elements like ListModel and XmlListModel, or custom model classes defined in C++ that inherit from QAbstractListModel.

The view has a model , which defines the data to be displayed, and a delegate , which defines how the data should be displayed. The delegate is instantiated for each item on the path . The items may be flicked to move them along the path.

For example, if there is a simple list model defined in a file ContactModel.qml like this:

import QtQuick 1.0

ListModel {
    ListElement {
        name: "Bill Jones"
        icon: "pics/qtlogo.png"
    }
    ListElement {
        name: "Jane Doe"
        icon: "pics/qtlogo.png"
    }
    ListElement {
        name: "John Smith"
        icon: "pics/qtlogo.png"
    }
}

This data can be represented as a PathView, like this:

import QtQuick 1.0

Rectangle {
    width: 240; height: 200

//! [1]
    Component {
        id: delegate
        Column {
            id: wrapper
            Image {
                anchors.horizontalCenter: nameText.horizontalCenter
                width: 64; height: 64
                source: icon
            }
            Text {
                id: nameText
                text: name
                font.pointSize: 16
                color: wrapper.PathView.isCurrentItem ? "red" : "black"
            }
        }
    }
//! [1]

//! [2]
    PathView {
        anchors.fill: parent
        model: ContactModel {}
        delegate: delegate
        path: Path {
            startX: 120; startY: 100
            PathQuad { x: 120; y: 25; controlX: 260; controlY: 75 }
            PathQuad { x: 120; y: 100; controlX: -20; controlY: 75 }
        }
    }
//! [2]
}

(Note the above example uses PathAttribute to scale and modify the opacity of the items as they rotate. This additional code can be seen in the PathAttribute documentation.)

PathView does not automatically handle keyboard navigation. This is because the keys to use for navigation will depend upon the shape of the path. Navigation can be added quite simply by setting focus to true and calling decrementCurrentIndex() or incrementCurrentIndex() , for example to navigate using the left and right arrow keys:

PathView {
    // ...
    focus: true
    Keys.onLeftPressed: decrementCurrentIndex()
    Keys.onRightPressed: incrementCurrentIndex()
}

The path view itself is a focus scope (see the focus documentation page for more details).

Delegates are instantiated as needed and may be destroyed at any time. State should never be stored in a delegate.

PathView attaches a number of properties to the root item of the delegate, for example {PathView.isCurrentItem}. In the following example, the root delegate item can access this attached property directly as PathView.isCurrentItem, while the child nameText object must refer to this property as wrapper.PathView.isCurrentItem.

    Component {
        id: delegate
        Column {
            id: wrapper
            Image {
                anchors.horizontalCenter: nameText.horizontalCenter
                width: 64; height: 64
                source: icon
            }
            Text {
                id: nameText
                text: name
                font.pointSize: 16
                color: wrapper.PathView.isCurrentItem ? "red" : "black"
            }
        }
    }

Note that views do not enable clip automatically. If the view is not clipped by another item or the screen, it will be necessary to set {clip: true} in order to have the out of view items clipped nicely.

See also

Path, {declarative/modelviews/pathview}{PathView example}

---

The documentation for this class was generated from the following file:

• /src/declarative/graphicsitems/qdeclarativepathview.cpp