Qt Quick Examples - Views¶

This is a collection of QML model-view examples

This is a collection of QML model-view examples.

Views is a collection of small QML examples relating to model and view functionality. They demonstrate how to show data from a model using the Qt Quick view types. For more information, visit the Models and Views in Qt Quick page.

Running the Example¶

To run the example from Qt Creator , open the Welcome mode and select the example from Examples . For more information, visit Building and Running an Example.

GridView and PathView¶

GridView and PathView demonstrate usage of these types to display views.

GridView {
    anchors.fill: parent
    cellWidth: 100; cellHeight: 100
    focus: true
    model: appModel

    highlight: Rectangle { width: 80; height: 80; color: "lightsteelblue" }

    delegate: Item {
        width: 100; height: 100

        Image {
            id: myIcon
            y: 20; anchors.horizontalCenter: parent.horizontalCenter
            source: icon
        }
        Text {
            anchors { top: myIcon.bottom; horizontalCenter: parent.horizontalCenter }
            text: name
        }
        MouseArea {
            anchors.fill: parent
            onClicked: parent.GridView.view.currentIndex = index
        }
    }
}

Dynamic List¶

Dynamic List demonstrates animation of runtime additions and removals to a ListView .

The ListView .onAdd signal handler runs an animation when new items are added to the view, and the ListView .onRemove another when they are removed.

Item {
    ListView.onAdd: SequentialAnimation {
        PropertyAction { target: delegateItem; property: "height"; value: 0 }
        NumberAnimation { target: delegateItem; property: "height"; to: 80; duration: 250; easing.type: Easing.InOutQuad }
    }

    ListView.onRemove: SequentialAnimation {
        PropertyAction { target: delegateItem; property: "ListView.delayRemove"; value: true }
        NumberAnimation { target: delegateItem; property: "height"; to: 0; duration: 250; easing.type: Easing.InOutQuad }

        // Make sure delayRemove is set back to false so that the item can be destroyed
        PropertyAction { target: delegateItem; property: "ListView.delayRemove"; value: false }
    }
}

Expanding Delegates¶

Expanding Delegates demonstrates delegates that expand when activated.

It has a complex delegate the size and appearance of which can change, displacing other items in the view.

Item {
    id: recipe

    // Create a property to contain the visibility of the details.
    // We can bind multiple element's opacity to this one property,
    // rather than having a "PropertyChanges" line for each element we
    // want to fade.
    property real detailsOpacity : 0
    MouseArea {
        anchors.fill: parent
        onClicked: recipe.state = 'Details';
    }

    // Lay out the page: picture, title and ingredients at the top, and method at the
    // bottom.  Note that elements that should not be visible in the list
    // mode have their opacity set to recipe.detailsOpacity.

    Row {
        id: topLayout
        x: 10; y: 10; height: recipeImage.height; width: parent.width
        spacing: 10

        Image {
            id: recipeImage
            width: 50; height: 50
            source: picture
        }
    Item {
        id: details
        x: 10; width: parent.width - 20

        anchors { top: topLayout.bottom; topMargin: 10; bottom: parent.bottom; bottomMargin: 10 }
        opacity: recipe.detailsOpacity
    }

    // A button to close the detailed view, i.e. set the state back to default ('').
    TextButton {
        y: 10
        anchors { right: background.right; rightMargin: 10 }
        opacity: recipe.detailsOpacity
        text: "Close"

        onClicked: recipe.state = '';
    }

    states: State {
        name: "Details"

        PropertyChanges { target: background; color: "white" }
        PropertyChanges { target: recipeImage; width: 130; height: 130 } // Make picture bigger
        PropertyChanges { target: recipe; detailsOpacity: 1; x: 0 } // Make details visible
        PropertyChanges { target: recipe; height: listView.height } // Fill the entire list area with the detailed view

        // Move the list so that this item is at the top.
        PropertyChanges { target: recipe.ListView.view; explicit: true; contentY: recipe.y }

        // Disallow flicking while we're in detailed view
        PropertyChanges { target: recipe.ListView.view; interactive: false }
    }

    transitions: Transition {
        // Make the state changes smooth
        ParallelAnimation {
            ColorAnimation { property: "color"; duration: 500 }
            NumberAnimation { duration: 300; properties: "detailsOpacity,x,contentY,height,width" }
        }
    }
}

Highlight¶

Highlight demonstrates adding a custom highlight to a ListView .

// Define a highlight with customized movement between items.
Component {
    id: highlightBar
    Rectangle {
        width: 200; height: 50
        color: "#FFFF88"
        y: listView.currentItem.y;
        Behavior on y { SpringAnimation { spring: 2; damping: 0.1 } }
    }
}

ListView {
    id: listView
    width: 200; height: parent.height
    x: 30

    model: PetsModel {}
    delegate: petDelegate
    focus: true

    // Set the highlight delegate. Note we must also set highlightFollowsCurrentItem
    // to false so the highlight delegate can control how the highlight is moved.
    highlight: highlightBar
    highlightFollowsCurrentItem: false
}

Highlight Ranges¶

Highlight Ranges shows the three different highlight range modes of ListView .

Rectangle {
    id: root
    property int current: 0
    property bool increasing: true
    // Example index automation for convenience, disabled on click or tap
    SequentialAnimation {
        id: anim
        loops: -1
        running: true
        ScriptAction {
            script: if (increasing) {
                        current++;
                        if (current >= aModel.count -1) {
                            current = aModel.count - 1;
                            increasing = !increasing;
                        }
                    } else {
                        current--;
                        if (current <= 0) {
                            current = 0;
                            increasing = !increasing;
                        }
                    }
        }

        PauseAnimation { duration: 500 }
    }
    ListView {
        id: list1
        height: 50; width: parent.width
        model: PetsModel {id: aModel}
        delegate: petDelegate
        orientation: ListView.Horizontal

        highlight: Rectangle { color: "lightsteelblue" }
        currentIndex: root.current
        onCurrentIndexChanged: root.current = currentIndex
        focus: true
    }

    ListView {
        id: list2
        y: 160
        height: 50; width: parent.width
        model: PetsModel {}
        delegate: petDelegate
        orientation: ListView.Horizontal

        highlight: Rectangle { color: "yellow" }
        currentIndex: root.current
        preferredHighlightBegin: 80; preferredHighlightEnd: 220
        highlightRangeMode: ListView.ApplyRange
    }

    ListView {
        id: list3
        y: 320
        height: 50; width: parent.width
        model: PetsModel {}
        delegate: petDelegate
        orientation: ListView.Horizontal

        highlight: Rectangle { color: "yellow" }
        currentIndex: root.current
        onCurrentIndexChanged: root.current = currentIndex
        preferredHighlightBegin: 125; preferredHighlightEnd: 125
        highlightRangeMode: ListView.StrictlyEnforceRange
    }
}

Sections¶

Sections demonstrates the various section headers and footers available to ListView .

// The delegate for each section header
Component {
    id: sectionHeading
    Rectangle {
        width: container.width
        height: childrenRect.height
        color: "lightsteelblue"

        Text {
            text: section
            font.bold: true
            font.pixelSize: 20
        }
    }
}

ListView {
    id: view
    anchors.top: parent.top
    anchors.bottom: buttonBar.top
    width: parent.width
    model: animalsModel
    delegate: Text { text: name; font.pixelSize: 18 }

    section.property: "size"
    section.criteria: ViewSection.FullString
    section.delegate: sectionHeading
}

Packages¶

Packages uses the Package type to transition delegates between two views.

It has a Package object which defines delegate items for each view and an item that can be transferred between delegates.

Package {
    Text { id: listDelegate; width: parent.width; height: 25; text: 'Empty'; Package.name: 'list' }
    Text { id: gridDelegate; width: parent.width / 2; height: 50; text: 'Empty'; Package.name: 'grid' }

    Rectangle {
        id: wrapper
        width: parent.width; height: 25
        color: 'lightsteelblue'

        Text { text: display; anchors.centerIn: parent }
        state: root.upTo > index ? 'inGrid' : 'inList'
        states: [
            State {
                name: 'inList'
                ParentChange { target: wrapper; parent: listDelegate }
            },
            State {
                name: 'inGrid'
                ParentChange {
                    target: wrapper; parent: gridDelegate
                    x: 0; y: 0; width: gridDelegate.width; height: gridDelegate.height
                }
            }
        ]

        transitions: [
            Transition {
                ParentAnimation {
                    NumberAnimation { properties: 'x,y,width,height'; duration: 300 }
                }
            }
        ]
    }
}

A DelegateModel allows the individual views to access their specific items from the shared package delegate.

DelegateModel {
    id: visualModel
    delegate: Delegate {}
    model: myModel
}

ListView {
    id: lv
    height: parent.height/2
    width: parent.width

    model: visualModel.parts.list
}
GridView {
    y: parent.height/2
    height: parent.height/2
    width: parent.width
    cellWidth: width / 2
    cellHeight: 50
    model: visualModel.parts.grid
}

ObjectModel¶

ObjectModel uses an ObjectModel for the model instead of a ListModel .

ObjectModel {
    id: itemModel

    Rectangle {
        width: view.width; height: view.height
        color: "#FFFEF0"
        Text { text: "Page 1"; font.bold: true; anchors.centerIn: parent }

        Component.onDestruction: if (printDestruction) print("destroyed 1")
    }
    Rectangle {
        width: view.width; height: view.height
        color: "#F0FFF7"
        Text { text: "Page 2"; font.bold: true; anchors.centerIn: parent }

        Component.onDestruction: if (printDestruction) print("destroyed 2")
    }
    Rectangle {
        width: view.width; height: view.height
        color: "#F4F0FF"
        Text { text: "Page 3"; font.bold: true; anchors.centerIn: parent }

        Component.onDestruction: if (printDestruction) print("destroyed 3")
    }
}

ListView {
    id: view
    anchors { fill: parent; bottomMargin: 30 }
    model: itemModel
    preferredHighlightBegin: 0; preferredHighlightEnd: 0
    highlightRangeMode: ListView.StrictlyEnforceRange
    orientation: ListView.Horizontal
    snapMode: ListView.SnapOneItem; flickDeceleration: 2000
    cacheBuffer: 200
}

Display Margins¶

Display Margins uses delegates to display items and implements a simple header and footer components.

Qt Documentation

Qt Quick Examples - Views¶

Running the Example¶

GridView and PathView¶

Dynamic List¶

Expanding Delegates¶

Highlight¶

Highlight Ranges¶

Sections¶

Packages¶

ObjectModel¶

Display Margins¶

views.qml Example File¶

dragselection.qml Example File¶

slideshow.qml Example File¶

gridview-example.qml Example File¶

displaymargin.qml Example File¶

dynamiclist.qml Example File¶

expandingdelegates.qml Example File¶

highlight.qml Example File¶

highlightranges.qml Example File¶

sections.qml Example File¶

PetsModel.qml Example File¶

PressAndHoldButton.qml Example File¶

RecipesModel.qml Example File¶

SmallText.qml Example File¶

TextButton.qml Example File¶

ToggleButton.qml Example File¶

objectmodel.qml Example File¶

Delegate.qml Example File¶

view.qml Example File¶

pathview-example.qml Example File¶

main.cpp Example File¶

views.pro Example File¶

views.qmlproject Example File¶

views.qrc Example File¶

delegatemodel.qmlproject Example File¶

AddressBook_48.png Image File¶

AudioPlayer_48.png Image File¶

Camera_48.png Image File¶

DateBook_48.png Image File¶

EMail_48.png Image File¶

TodoList_48.png Image File¶

VideoPlayer_48.png Image File¶

arrow-down.png Image File¶

arrow-up.png Image File¶

fruit-salad.jpg Image File¶

hamburger.jpg Image File¶

lemonade.jpg Image File¶

list-delete.png Image File¶

minus-sign.png Image File¶

moreDown.png Image File¶

moreUp.png Image File¶

pancakes.jpg Image File¶

plus-sign.png Image File¶