CODEWITHSUNDEEP
qtqmlqtquick2
Martijn
Martijn

Reputation: 122

Signals between pages

I am trying to communicate between 2 QML pages. In my page Main.qml I receive a signal from my C++ code. On receiving this signal I want text on InputPage.qml to change. This page is shown within Main.qml using a Loader. The only way I could find so far is to set up another signal between the 2 pages. However, I think there is a much easier way to do this. I already tried this way but I could not get it to work. So before I proceed I would like to know if this is the right method or not.

Any ideas on how to do this, and if the method described above is the correct one?

My code:

Main.qml

Item {
    id: screen_InputPage
    width: 1920
    height: 930
    anchors.left: parent.left
    anchors.leftMargin: 0
    anchors.top: parent.top
    anchors.topMargin: 100
    visible: false
    opacity: 1
    Loader {//Loads the pages
        id: pageLoader_ID2
        source: "inputPage.qml"
    }
}

And i would like to access the text(and maybe functions) placed on inputPage.qml

Text {
    id: text_volume_perc_ID1
    height: 48
    text: qsTr("50")
    anchors.right: parent.right
    anchors.rightMargin: 0
    verticalAlignment: Text.AlignVCenter
    horizontalAlignment: Text.AlignHCenter
    anchors.top: parent.top
    anchors.topMargin: 126
    anchors.left: parent.left
    anchors.leftMargin: 0
    font.pixelSize: 42
}

Upvotes: 0

Views: 1141

Answers (1)

Mido
Mido

Reputation: 1112

To access the created object, you can use 

idLoader.item.idInputpage.idText.text

I propose that you load objects dynamically to improve performance. To do so you can create your own CustomLoader.qml:

CustomLoader.qml

import QtQuick 2.0

Item {
    id: idRoot
    width: childrenRect.width
    height: childrenRect.height

    property Item createdObject
    property string source

    function fnSourceChange() {
        if (""!== source){
            var component
            // create component
            component = Qt.createComponent(source)
            if (Component.Ready === component.status) {
                createdObject= component.createObject(idRoot)
                if(!createdObject)
                    console.log("Loader::Could not create the object ")
            }
            else {
                console.log("Loader::Could not create panel", component.errorString(), "component has errors")
            }
        }
        else {
            createdObject.destroy();
            createdObject = null
            // unComment this line if you want to force the garbage collector
            //gc()
        }
    }

    onSourceChanged: {
        fnSourceChange()
    }
    // even without that it should detect the source change and create it
    // you can unComment this line if you want, but like that it will parse the function
    // two times one on the sourceChanged signal and on on in this handler
    // print the source or somthing in the function and you'll see
    // Component.onCompleted: fnSourceChange()

}

main.qml

import QtQuick 2.0

Item {
    id: screen_InputPage
    width: 1920
    height: 930
    anchors.left: parent.left
    anchors.leftMargin: 0
    anchors.top: parent.top
    anchors.topMargin: 100
    visible: false
    opacity: 1

    CustomLoader{
        id: pageLoader_ID2
        source: "inputPage.qml"
    }
}

InputPage.qml

import QtQuick 2.0

Item {
    width: 800
    height: 480
    property alias text: idText.text
    property alias label: idText
    property alias rect: idRect
    Text{
        id: idText
    }

    Rectangle{
        id: idRect
        width: 100
        height: 200
    }
}

In your main add :

//or another scope like click button
Component.onCompleted: {

    pageLoader_ID2.createdObject.text = "hello"
    pageLoader_ID2.createdObject.rect.color = "red"
}

Upvotes: 1

Related Questions