Cannot assign properties to object loaded with Loader

tech2nick

Hi guys,

I have a problem, which overwhelms me. I thought I would spend two minutes on that, but it took me two days and my problem is still unresolved.

I want to load object from .qml file, when the button is clicked. Clicking different buttons will set different properties to that object. The object is a simple rectangle with text within it. It has properties like width, height, text, color of rectangle and color of text. The problem is, loading the rectangle with different parameters DOESN'T change nothing but color of the rectangle. I tried so many combinations of naming, property aliases etc, but it gave me nothing. Only color changes. Let me introduce you my code:

//StartStateContent.qml --> I wish to use Loaders in my Finite States Machine, hence the name

import QtQuick 2.0
import QtQuick.Controls 2.0

Rectangle {
    id: startStateContent
    property int myWidth
    property int myHeight
    property color myColor
    property alias myText: name.text
    property string myText2
    property alias myTextColor: name.color
    property color myTextColor2


   // width: myWidth
   // height: myHeight


color: kolor
Text {
    anchors.centerIn: parent
    id: name
    text: "test"
    //text: myText2
    color: "yellow"
    //color: myTextColor2
}

}

And a snippet of main.qml

Window {
    visible: true
    id: root
    width: 500
    height: 500
    title: qsTr("Hello World")

    Loader
    {
        id: pageLoader
        anchors.top: root.top
        anchors.left: root.left
        width: root.width
        height: root.height/2

    }

    Button{
        id: but1
        text: "red"
        anchors.top: pageLoader.bottom
        anchors.left: root.left
        height: root.height/2

        onClicked: {
            pageLoader.setSource("StartStateContent.qml", {"myColor": "red"}, {"myTextColor" : "white"})
            console.log("button red clicked")
        }
    }

    Button{
        id: but2
        text: "green"
        anchors.top: pageLoader.bottom
        anchors.left: but1.right
        height: root.height/2
        width: root.width/2
        onClicked: {
            pageLoader.setSource("StartStateContent.qml", {"myColor": "green"}, {"myTextColor" : "green"})
            console.log("button green clicked")
        }
    }

DSM.StateMachine{
        id: stateMachine
        initialState: startState
        running:true
        onStarted: {
            pageLoader.setSource("StartStateContent.qml", {"myColor": "blue"}, {"myTextColor" : "orange"})
            console.log("App started")
}

Here I try to set only color and text.color, but earlier I tried to change text rectangle size too. At first, I tried to just write {"height" : 100}. Then {"height" : "100"}, {"height" = 100}, etc. Then I added property myHeight (commented in first file), but with no luck. Then I did the same to text. Later I tried to create an alias property of text. I did that to every property (but cut that out of that example to spare space), without any success. Of course I changed also the anchors of loader. I tried to use anchors, to use explicitly set x,y, width, height; to use centering. Independently of attempts, the very thing that is being changed when I click buttons is color of the rectangle. Unfortunately, the only example of using Loader with properties in official Qt Documentation changes only color property, so it doesn't help me.

My question is: how can I change properties (other than color) of loaded object, using Loader.setProperty() method? Thank you in advance.

Btw, that is my first post here, so Hello Qt World:)
And sorry for possible lingual mistakes, as english isn't my native language.

p3c0

@tech2nick

pageLoader.setSource("StartStateContent.qml", {"myColor": "red"}, {"myTextColor" : "white"})

The properties are set incorrectly. It expects an object. So the correct way:

{ "myColor": "red", "myTextColor" : "white" }

In the same way try adding other properties.

tech2nick

Thank you, it worked:)