Element inheritance not working

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?

score 1 · Accepted Answer · edited May 23 '17 at 10:26

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.

Element inheritance not working

1 Answers1