How to position nested Items in a QML component?

answered 2013-12-28 16:13:35 +0200

Sfiet_Konstantin
6385 ●45 ●72 ●97

http://sfietkonstantin.wo...

You do this by exporting the children property of Column.

The code needs some tweaks, but here is the generic idea. If I have a container component (Container.qml) described as follow

import QtQuick 2.0

Item {
    width: 500
    height: 500
    property alias content: column.children

    Column {
        id: column
        anchors.fill: parent
    }
}

Then you can "inherit" from this component, and use the content property to set the children components. I wrote two components that put one and two rectangles in the column:

import QtQuick 2.0

Container {
    content: Rectangle {
        width: parent.width
        height: 100
        color: "red"
    }
}

and

import QtQuick 2.0

Container {
    content: [
        Rectangle {
            width: parent.width
            height: 100
            color: "red"
        },
        Rectangle {
            width: parent.width
            height: 100
            color: "blue"
        }
    ]
}

Note that you need to pass the two components (two rectangles) as a list.