Raymii.org

Table of Contents

• Demo Qml Program

This small snippet shows how to loop over all Repeater items in Qml and also over all Delegate items in Qml. There are sublte differences between the two. I'm using this to update visual all items in a control, before syncing state to a networked backend, and if the backend actions fails, I undo the visual state change. The network backend could be slow, by keeping state locally and syncing in the background, the user can continue working.

Recently I removed all Google Ads from this site due to their invasive tracking, as well as Google Analytics. Please, if you found this content useful, consider a small donation using any of the options below:

I'm developing an open source monitoring app called Leaf Node Monitoring, for windows, linux & android. Go check it out!

Consider sponsoring me on Github. It means the world to me if you show your appreciation and you'll help pay the server costs.

You can also sponsor me by getting a Digital Ocean VPS. With this referral link you'll get $200 credit for 60 days. Spend $25 after your credit expires and I'll get $25!

A demo program that loops over both a Repeater and a GridViews Delegates

This is the ListModel i'm using, but it could also be a C++ QAbstractListModel.

ListModel {
    id: exampleModel
    ListElement {
        name: "Apple"
        price: 0.50
    }
    ListElement {
        name: "Orange"
        price: 2.00
    }
    ListElement {
        name: "Banana"
        price: 1.50
    }
}

This is the GridLayout with a Repeater:

GridLayout {
  id: exampleLayout
  Repeater {
      id: exampleRepeater
      model: exampleModel
      delegate: Button {
          text: model.name + ": " + model.price
          readonly property var price: model.price
      }
  }

}

This is the snippet to loop over all items in that Repeater and acces their properties:

function logRepeaterItems(repeaterItem) {
    for (var i = 0; i < repeaterItem.count; i++) {
        console.log("repeater price: " + repeaterItem.itemAt(i).price)
        console.log("repeater text: " + repeaterItem.itemAt(i).text)
    }
}

This is the GridView with Delegates:

GridView {
  id: exampleView
  model: exampleModel
  delegate: Button {
      text: model.name + ": " + model.price
      readonly property var price: model.price
  }
}

This is the snippet to loop over all Delegates:

// warning: its better to loop over the actual model than the delegates.
// Only visible delegates are guaranteed to be in this loop.
function logDelegateItems(delegateItem) {
    for (var child in delegateItem.contentItem.children) {
        var item = delegateItem.contentItem.children[child]
        console.log("delegate price: " + item.price)
        console.log("delegate text: " + item.text)
    }
}

If you're looping over all delegates, think twice. It's better to loop over the backing model, since not all delegates are always available. If they're not visible, they might not be there.

Demo Qml Program

Here is the demo program showcasing both methods:

main.qml

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Layouts 1.3
import QtQuick.Controls 2.12

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Loop over model/repeater example")

    function listProperties(item) {
        var properties = ""
        for (var p in item)
            properties += (p + ": " + item[p] + "\n")
        return properties
    }

    // warning: its better to loop over the actual model than the delegates.
    // Only visible delegates are guaranteed to be in this loop.
    function logDelegateItems(delegateItem) {
        for (var child in delegateItem.contentItem.children) {
            var item = delegateItem.contentItem.children[child]
            console.log("delegate price: " + item.price)
            console.log("delegate text: " + item.text)
        }
    }

    function logRepeaterItems(repeaterItem) {
        for (var i = 0; i < repeaterItem.count; i++) {
            console.log("repeater price: " + repeaterItem.itemAt(i).price)
            console.log("repeater text: " + repeaterItem.itemAt(i).text)
        }
    }

    ListModel {
        id: exampleModel
        ListElement {
            name: "Apple"
            price: 0.50
        }
        ListElement {
            name: "Orange"
            price: 2.00
        }
        ListElement {
            name: "Banana"
            price: 1.50
        }
    }

    Button {
        id: loopButton
        anchors.top: parent.top
        anchors.left: parent.left
        anchors.margins: 10
        text: "Loop over GridLayout Repeater"
        onClicked: logRepeaterItems(exampleRepeater)
    }

    Button {
        id: loopViewButton
        anchors.top: parent.top
        anchors.left: loopButton.right
        anchors.margins: 10
        text: "Loop over GridView Delegates"
        onClicked: logDelegateItems(exampleView)
    }

    Text {
        id: gridlayouttext
        text: "GridLayout with Repeater"
        anchors.top: loopButton.bottom
        anchors.margins: 5
        anchors.left: parent.left
    }

    GridLayout {
        anchors.top: gridlayouttext.bottom
        anchors.left: parent.left
        anchors.margins: 5
        id: exampleLayout
        height: 100
        columns: 3
        columnSpacing: 5
        Repeater {
            id: exampleRepeater
            model: exampleModel
            delegate: Button {
                text: model.name + ": " + model.price
                readonly property var price: model.price
            }
        }
    }

    Text {
        id: gridviewtext
        text: "GridView with Delegate and model"
        anchors.top: exampleLayout.bottom
        anchors.margins: 5
        anchors.left: parent.left
    }

    GridView {
        anchors.top: gridviewtext.bottom
        anchors.left: parent.left
        anchors.margins: 5
        height: 200
        width: 300
        id: exampleView
        model: exampleModel
        delegate: Button {
            text: model.name + ": " + model.price
            readonly property var price: model.price
        }
    }
}

main.cpp

#include <QGuiApplication>
#include <QQmlApplicationEngine>


int main(int argc, char *argv[])
{
#if QT_VERSION < QT_VERSION_CHECK(6, 0, 0)
    QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
#endif

    QGuiApplication app(argc, argv);

    QQmlApplicationEngine engine;
    const QUrl url(QStringLiteral("qrc:/main.qml"));
    QObject::connect(&engine, &QQmlApplicationEngine::objectCreated,
                     &app, [url](QObject *obj, const QUrl &objUrl) {
        if (!obj && url == objUrl)
            QCoreApplication::exit(-1);
    }, Qt::QueuedConnection);
    engine.load(url);

    return app.exec();
}

Tags: c++ , cpp , debugging , javascript , qml , qt , qt5 , snippets