Define a rectangle as alias property in QML - qt

Question

I have designed a simple window using rectangle that has a header bar and main section in a qml file like MyWindow.qml:
Item {
id: root
width: 300
height: 300
property alias title: txtTitle.text
property alias color: backgroundItem.color
Rectangle {
id: backgroundItem
anchors.fill: parent
color: "lightgreen"
anchors.margins: 5
Rectangle {
id: headerBar
width: parent.width
height: 30
color: Qt.darker(parent.color)
Rectangle {
id: rectTitle
height: 20
anchors.left: headerBar.left
anchors.leftMargin: 10
anchors.verticalCenter: headerBar.verticalCenter
Text {
id: txtTitle
text: "Window"
anchors.fill: parent
color: "white"
verticalAlignment: Text.AlignVCenter
}
} //rectTitle
} //headerBar
Rectangle {
anchors.top: headerBar.bottom
anchors.left: parent.left
anchors.right: parent.right
anchors.bottom: parent.bottom
Rectangle {
id: rectMain
}
}
}
}
Now, I need place a rectangle instead of rectMain when I use MyWindow in my main.qml. That means:
Rectangle {
width: 200
MyWindow {
id: innerWindow
anchors.fill: parent
color: "lightgreen"
title: "Green"
// I want create my desire rectangle here instead of 'rectMain' in MyWindow
}
}
So, I defined a property in MyWindow.qml like this:
property alias mainPart: rectMain
And I used it in innerWindow instead of commented section in main.qml:
Rectangle {
width: 200
MyWindow {
id: innerWindow
anchors.fill: parent
color: "lightgreen"
title: "Green"
mainPart: Rectangle {
id: myDesireRect
anchors.fill: parent
}
}
}
But following error was happend:
Invalid property assignment: "mainPart" is a read-only property
What is the correct way to do this?

Answer 1

To be able to put child items inside rectMain, you want to alias its data property.
property alias mainPart: rectMain.data
Then when you use it, you'll be able to place items inside it like this:
Rectangle {
MyWindow {
mainPart: SomeOtherItem {}
}
}

Answer 2

I believe what you desire is a container nested inside your MyWindow.qml whose contents you can access or assign from outside this file. One way of doing this is to give rectMain's containing Rectangle an id (e.g. recMainContainer), and then instead of the alias, declare property Rectangle mainPart at the top of your file. Side note, Rectangles assigned to this property will not have a parent by default, but you can manage this with onMainPartChanged:
Item {
id: root
width: 300
height: 300
property alias title: txtTitle.text
property alias color: backgroundItem.color
property Rectangle mainPart // new Rectangle property instead of alias
onMainPartChanged: mainPart.parent = rectMainContainer // assign parent whenever mainPart changes
Rectangle {
id: backgroundItem
//...condensed code...//
Rectangle {
id: rectMainContainer // new id
anchors.top: headerBar.bottom
anchors.left: parent.left
anchors.right: parent.right
anchors.bottom: parent.bottom
// removed rectMain from here
}
}
}