Element inheritance not working - qt

Question

I want to achieve some kind of inheritance, like - I have base frame, and then modify it. Here is code sample.
BaseFrame.qml:
Rectangle {
id: base
anchors.fill: parent
function setButtonY (y) {
console.log("Down to ", y)
requestButton.y = y
}
Button {
id: requestButton
width: 200
x: (parent.width / 2) - 100
y: 100
}
}
DerivedFrame.qml:
BaseFrame{
anchors.fill: parent
onVisibleChanged: {
setButtonY(300)
}
Button{
x: 100
y: 100
width: 200
height: 200
visible: true
}
}
The problem is, when I use DerivedFrame - only BaseFrame is shown. If I add some buttons like below, they are never shown:
DerivedFrame {
Button {
// some stuff here + visible: true
}
}
Also - setButtonY correctly show log with correct y, but requestButton never move to the required y. Is there a way to achieve this?

Answer 1

Using absolute positioning is not advised. You can exploit a positioning type (e.g. Column) to automatically lay out your items. However you have to ensure that, while added to BaseFrame.qml, Items are correctly inserted in the positioning item.
When Items are added to a parent, they are inserted inside the default property. In each Item-derived type, data property is the default one. Then we alias the data of the positioning Item and then make that alias the default property. This way we obtain the result searched in the previous paragraph. The BaseFrame.qml could look like this:
import QtQuick 2.0
import QtQuick.Controls 1.2
import QtQuick.Layouts 1.1
Item {
id: base
anchors.fill: parent
default property alias hook: rowContainer.data //aliasing
Column {
id: rowContainer
anchors.fill: parent
Button {
id: requestButton
width: 300
height: 100
text: "1"
}
}
}
This is a DerivedFrame.qml possible implementation:
import QtQuick 2.0
import QtQuick.Controls 1.2
BaseFrame{
anchors.fill: parent
Button{
anchors.right: parent.right
width: 200
height: 200
text: "2"
}
}
And finally here is the main.qml code:
import QtQuick 2.4
import QtQuick.Window 2.2
import QtQuick.Controls 1.2
ApplicationWindow {
visible: true
width: 500
height: 500
DerivedFrame {
Button {
anchors.horizontalCenter: parent.horizontalCenter
text: "3"
}
}
}
Obviously this is just one of the possible ways to create a dynamic type. You can also have a look to this video, whereas this answer deals with dynamic addition. Finally this answer provides another example usage of default alias.