QtQuick QML. Cannot assign properties to object loaded with Loader

Question

I want to write an app in QtQuick that dynamically loads content. I decided to use Loader. Now 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 an object from a .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 that loading the rectangle with different parameters DOESN'T change anything else than the 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 the color property, so it doesn't help me.

My question is: how can I change properties (other than color) of a 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.

tech2nick tech2nick · Accepted Answer · 2016-09-23T12:32:11

I got the answer from official QtForum:

Instead of using

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

one should use

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

because the setSource method expects an object. Works 100% that way!

QtQuick QML. Cannot assign properties to object loaded with Loader

1 Answers