Why does Column height calculation break when it contains an element of full width?

1.1k Views Asked by At

I'd love to know why the Column height calculation breaks when the Row spans over the full width.

Toggle the comment, in the following code, to reproduce:

import QtQuick 2.3
import QtQuick.Controls 1.2
import QtQuick.Window 2.2

ApplicationWindow {
    width: 640
    height: 480
    visible: true

    Column {
        id: col
        anchors {
            left: parent.left
            right: parent.right
        }

        Row {
            id: row
            anchors {
                left: parent.left
//                right: parent.right
            }

            Rectangle {
                color: "green"
                width: 20
                height: 20
            }

            Rectangle {
                color: "red"
                width: 30
                height: 30
            }
        }
    }

    Component.onCompleted: {
        console.log("col.height: " + col.height)
        console.log("col.implicitHeight: " + col.implicitHeight)
        console.log("col.width: " + col.width)
        console.log("col.implicitWidth: " + col.implicitWidth)
        console.log("row.height: " + row.height)
        console.log("row.implicitHeight: " + row.implicitHeight)
        console.log("row.width: " + row.width)
        console.log("row.implicitWidth: " + row.implicitWidth)
    }
}

Case 1 (as above):

col.height: 30
col.implicitHeight: 30
col.width: 0
col.implicitWidth: 50
row.height: 30
row.implicitHeight: 30
row.width: 50
row.implicitWidth: 50

Case 2 (Row spans full width):

col.height: 0
col.implicitHeight: 0
col.width: 0
col.implicitWidth: 0
row.height: 30
row.implicitHeight: 30
row.width: 0
row.implicitWidth: 50
0

There are 0 best solutions below