2.4. Using Repeater and Delegate to Create List of Markers

Previously, we saw how to create QML components such as Note, NoteToolbar, Page and Marker, and how to place these QML components using anchors*.

Looking back at the previous chapters on design concepts, one thing we noticed is that there are three Marker elements laid out vertically. Using anchors* could also work as we can anchor UI elements with each other, but nevertheless it will increase the complexity of the code. QML has other convenient approaches such as the layout and positioning types. The Column type [http://qt-project.org/doc/qt-5.0/qtquick/qml-qtquick2-column.html] is one such type, enables arranging the UI elements one below the other in a column.

As we want to place the three Marker components within a Column type [http://qt-project.org/doc/qt-5.0/qtquick/qml-qtquick2-column.html], let’s use a nifty QML type called Repeater [http://qt-project.org/doc/qt-5.0/qtquick/qml-qtquick2-repeater.html].

Now let’s have a look at the code described above:

Column {
    id: layout
    // spacing property can set to let the item have space between them
    spacing: 10

    // a Repeater item that uses a simple model with 3 items
    Repeater {
        model: 3
        delegate:
            // using the Marker component as our delegate
            Marker { id: marker }
    }
}

In the code shown above, Repeater generates three QML components based on the model and will use a delegate* to display them. As we want to have three Marker items, we simply use the Marker component as the delegate.

For more information about positioning, refer to Important Concepts In Qt Quick - Positioning [http://qt-project.org/doc/qt-5.0/qtquick/qtquick-positioning-topic.html] documentation.

Naturally the question “where in my qml files should I place the code shown above and how should I use it?” arises. Well, we need a separate QML Component for that which we’ll call MarkerPanel. In short, MarkerPanel is simply a list of three Marker items that can easily be used as a UI element. We will know later on how.

Here is how the MarkerPanel component would look:

** $QT_END_LICENSE$
**
****************************************************************************/

// MarkerPanel.qml

import QtQuick 2.0

Rectangle {
    id: root
    width: 50
    height: 300

    // column type that anchors to the entire parent
    Column {
        id: layout
        anchors.fill: parent
        spacing: 10

        Repeater {
            // just three Marker items
            model: 3
            delegate:
                Marker { id: marker }
        }
    }

Note

It is always recommended to run and test components individually in the prototype phase because you can spot the problems right away.

If we run the MarkerPanel component using Qt Creator or load it with qmlscene* then it should look like this:

What’s Next?

In the next chapter, we will see how to use the components we’ve implemented so far to finalize our prototype.

Navigation

2.4. Using Repeater and Delegate to Create List of Markers