From Ohm

Mode-View Concepts of QML

Lecture5

In QML the appearance of each model’s items is provided with a Component. A special behavior of a delegate is, that the models’ properties are auto-magically assigned to the according delegate:


    ListModel
    {
        id: listmodel

        ListElement
        {
            name: "Apple"
            cost: 0.2
        }
        ListElement
        {
            name: "Banana"
            cost: 0.4
        }
        ListElement
        {
            name: "Orange"
            cost: 0.3
        }
    }

    Component
    {
        id: listdelegate

        Row
        {
           Text { text: " Fruit: " + name }
           Text { text: " Cost: $" + cost }
        }
    }

    ListView
    {
        model: listmodel
        delegate: listdelegate
        anchors.fill: parent
    }

In the above example [1], the delegate of the list view is connected to the list model, which means that auto-magically the properties of the model - namely ‘name’ and ‘cost’ become properties of the respective component. Now the component can use the properties to provide a graphical representation of the data. In this example it is just two rows of text.

Here is a more advanced use of Components by means of a stack view. A stack view is a ordered set of views, where the topmost view is visible. Each view is provided as a Component.

In the following example, we show a gallery of images. When clicking on an image, a new view is created on top of the stack that shows the entire image. When double clicking the topmost view is removed again:

StackView {
    id: stack
    anchors.fill: parent
    initialItem: baseview

    property string path: "some file path"

    Component {
        id: baseview

        Gallery {
            id: gallery
            anchors.fill: parent

            folder: "file://" + path

            onClicked: {
                if (file != "") {
                    stack.push({item: popupview, properties: {path: file}})
                }
            }

            onDoubleClicked: {
               stack.back()
            }
        }
    }

    Component {
        id: popupview

        Rectangle {
            id: popup
            anchors.fill: parent

            property string path

            Image {
                id: popupimage
                source: popup.path
                asynchronous: true
                width: parent.width
                height: parent.height
                fillMode: Image.PreserveAspectFit
                autoTransform: true
                smooth: true
            }

            BusyIndicator {
                anchors.centerIn: parent
                running: popupimage.status == Image.Loading
            }
        }
    }
}

Links

  1. doc.qt.io/qt-5/qtquick-modelviewsdata-modelview.html

Retrieved from http://schorsch.efi.fh-nuernberg.de/roettger/index.php/QtOnAndroid/QMLModelViewExample

Page last modified on November 29, 2016, at 06:24 PM