Philipp Jahoda
Philipp Jahoda

Reputation: 51421

QML iterating over custom elements and calling function

I have a custom element called MenuButton:

import QtQuick 1.1
import VPlay 1.0

Image {
property alias text: buttontext.text
property alias mouseArea: area
property alias fontBold: buttontext.font.bold
property alias textSize: buttontext.font.pixelSize

id: button
source: "img/cloudButton.png"
opacity: 1

Text {
    id: buttontext
    color: "black"
    anchors.verticalCenter: parent.verticalCenter
    anchors.left: parent.left
    anchors.leftMargin: 50
    font.bold: true
}

MouseArea {
    id: area
    anchors.fill: parent

    onPressed: button.opacity = 0.7
    onReleased: button.opacity = 1.0

    onCanceled: button.opacity = 1.0
}

function doStuff {

    // do something here
}

    width: 200
    height: 60
}

Now, in my main View, I have a Column with 5 of those MenuButtons. And I want to iterate over them and call the function doStuff(). How do I do that? I tried with column.childAt(i) and stuff like that, nothing worked.

MainView.qml

Rectangle {

width: 480; height: 320
        // HERE IS MY PROBLEM, how do I iterate over all my elements in the column?
        function update() {

              for(var i = 0; i < 5; i++) {
                   column.childAt(i).doStuff(); // THIS IS WHAT I WANT TO DO
              }
        }

        Column {

            id: column
            spacing: 5
            anchors.centerIn: parent

            Repeater {
                id: repeater
                model: 5

                MenuButton {
                    id: levelbutton
                    text: "Level " + (modelData+1);
                    source: "img/cloud4.png"
                }
            }
        }
}

The problem is in my update function in the MainView.qml I dont know how to iterate over the elements and call the doStuff() function.

Upvotes: 2

Views: 3698

Answers (3)

Deadron
Deadron

Reputation: 5289

You can access the children of an element via the children property that exists on all QtObjects. It contains an array of child elements and can be freely acccessed in javascript.

eg. element.children[0].doStuff()

Generally speaking, you should avoid actions that require you to manually iterate over the children. However, if you are attempting to write code that generically calls something on each of the children you do not always have a choice.

Upvotes: 1

hate-engine
hate-engine

Reputation: 2350

You may use Component.onCompleted attached signal, like this:

import QtQuick 1.0

Rectangle {
    height: 600
    width: 600

    Repeater {
        model: 5
        Item {
            Component.onCompleted: console.log('Component ' + index + ' completed!')
        }
    }
}

However, please consider, that this imperative operation is not good, because it will be called all time after model update. Probably you have problem X and asking how to get Y, that (you think) will solve your X?

Upvotes: 2

Christian Feldbacher
Christian Feldbacher

Reputation: 515

From what I've seen in the source code in the QDeclarativePositioners class you cannot access the children elements!

But you could turn the way you call your doStuff() method: when do you want it to be called? After some time has passed (then add a Timer element to your MenuButton), or when a signal occurs? In the latter case, you could use the Connections element and listen to the signal beign emitted in your calling qml file where you use the Column and Repeater.

Cheers, Chris

Upvotes: 1

Related Questions