How to extend qml containers (Row or Column) in another file

alizadeh91

Suppose there is a Test.qml file containing this:

import QtQuick 2.0

Rectangle {
    color: "green"

    Row {
        id: row
        spacing: 10
        anchors.fill: parent
        Rectangle {
            color: "red";
            width: 100;
            height: 100;
        }
        Rectangle {
            color: "red";
            width: 100;
            height: 100;
        }
        Rectangle {
            color: "red";
            width: 100;
            height: 100;
        }
    }
}

Now suppose we want to use this Test.qml within another file like main.qml:

import QtQuick 2.15
import QtQuick.Window 2.15

Window {
    id: window
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")


    Test {
        anchors.fill: parent;
        // I want to be able to add new items (rects) to the row inside Test.qml
    }
}

Now suppose we want to extend items to the row object in Test.qml, But we want to add from main.qml. How we can do that? is that even possible?

(FYI: The application of this feature would be to develop a placeholder form and fill the items in the other items so we can skip duplicate codes. )

fcarney

https://together.jolla.com/question/4717/how-to-position-nested-items-in-a-qml-component/

Item {
    default property alias _contentChildren: content.data 

    Item {
        id: content
        // where you want the new Items to appear
    }
}

I have no idea where this is documented. I can never remember what it is called. Had to look at my code to find it.

Another option is an alias to content.data to another name:

Item {
    property alias delegate: content.data

    Item {
        id: content
    }
}

Then use delegate to hold new items.

dheerendra

Expose the id: row as alias property
property alias rowPos : row

For new QML objects set the row as parent.
Alternatively you can declare one method inside Test.qml
function addNewItem(newitem){
newItem.parent = row.
}

fcarney

https://together.jolla.com/question/4717/how-to-position-nested-items-in-a-qml-component/

Item {
    default property alias _contentChildren: content.data 

    Item {
        id: content
        // where you want the new Items to appear
    }
}

I have no idea where this is documented. I can never remember what it is called. Had to look at my code to find it.

Another option is an alias to content.data to another name:

Item {
    property alias delegate: content.data

    Item {
        id: content
    }
}

Then use delegate to hold new items.

GrecKo

It's documented in the QML Reference : https://doc.qt.io/qt-5/qtqml-syntax-objectattributes.html#property-attributes