Qt QML binding child property to parent property

Question

I want to set the ApplicationWindow to minimum width and height by the minimum width and height of the child element "mainLayout". I am having trouble to use the property of "mainLayout" in the parent QML ApplicationWindow. I tried to make the property viewable by making an alias. Not sure if it is the right solution. It does not work. But there is also no Error when I run.

My code looks like this:

main.qml

import QtQuick 2.2
import QtQuick.Controls 1.2
import QtQuick.Layouts 1.3
import QtQuick.Window 2.2

ApplicationWindow {
visible: true
width: 1500
height: 1200
property int margin: 11

minimumWidth: serial.mainLayout.minimumWidth + 2 * margin //this one is not working
minimumHeight: serial.mainLayout.minimumHeight + 2 * margin //this one is not working


Serial {
        id: serial
        anchors.fill: parent
    }
}

Serial.qml

import QtQuick 2.7
import QtQuick.Controls 1.4
import QtQuick.Layouts 1.3
import io.qt.serialComm 1.0

Item {

    anchors.fill: parent
    id: item
    property alias mainLayout: mainLayout

    ColumnLayout {
        id: wrapper
        width: parent.width/2
        height: parent.height/2

        ColumnLayout {
            id: mainLayout
            anchors.fill: parent
            anchors.margins: margin
            GroupBox {
                id: rowBox
                title: "Row layout"
                Layout.fillWidth: true

                RowLayout {
                    id: rowLayout
                    anchors.fill: parent
                    TextField {
                        placeholderText: "This wants to grow horizontally"
                        Layout.fillWidth: true
                    }
                    Button {
                        text: "Button"
                    }
                }
            }

            GroupBox {
                id: gridBox
                title: "Grid layout"
                Layout.fillWidth: true

                GridLayout {
                    id: gridLayout
                    rows: 3
                    flow: GridLayout.TopToBottom
                    anchors.fill: parent

                    Label { text: "Line 1" }
                    Label { text: "Line 2" }
                    Label { text: "Line 3" }

                    TextField { }
                    TextField { }
                    TextField { }

                    TextArea {
                        text: "This widget spans over three rows in the GridLayout.\n"
                            + "All items in the GridLayout are implicitly positioned from top to bottom."
                        Layout.rowSpan: 3
                        Layout.fillHeight: true
                        Layout.fillWidth: true
                    }
                }
            }
            TextArea {
                id: t3
                text: "This fills the whole cell"
                Layout.minimumHeight: 30
                Layout.fillHeight: true
                Layout.fillWidth: true
            }
            GroupBox {
                id: stackBox
                title: "Stack layout"
                implicitWidth: 200
                implicitHeight: 60
                Layout.fillWidth: true
                Layout.fillHeight: true
                StackLayout {
                    id: stackLayout
                    anchors.fill: parent

                    function advance() { currentIndex = (currentIndex + 1) % count }

                    Repeater {
                        id: stackRepeater
                        model: 5
                        Rectangle {
                            color: Qt.hsla((0.5 + index)/stackRepeater.count, 0.3, 0.7, 1)
                            Button { anchors.centerIn: parent; text: "Page " + (index + 1); onClicked: { stackLayout.advance() } }
                        }
                    }
                }
            }
        }
    }
}

When I put the code in one file, it works and the ApplicationWindow does not get smaller than the minimum height and width of the child element "mainLayout". But splitting into 2 files does not work..

Solved it, minimumWidth: serial.mainLayout.Layout.minimumWidth — Tomo Bogdanovic

talamaki talamaki · Accepted Answer · 2018-02-14T12:50:20

The reason why you are not able to use the property minimumWidth of your QML element with the id mainLayout like serial.mainLayout.minimumWidth is that it doesn't have one.

However, the QML element in question does have an attached property Layout.minimumWidth because it's an item in a ColumnLayout with the id wrapper. You already found out that you could access it through serial.mainLayout.Layout.minimumWidth.

Attached property mechanism that enables the minimumWidth for mainLayout is not the easiest one to understand. In short, it enables objects to be annotated with extra properties that are otherwise unavailable to the object but are relevant in certain circumstances. In this case minimumWidth is considered relevant for child items of ColumnLayout. Items in a ColumnLayout support these attached properties.

Qt QML binding child property to parent property

1 Answers