[Solved] Column vs ColumnLayout - bug or feature

kaivolde

Hi folks,

I found some "strange" differences beetwen Column and ColumnLayout.
Seems like a bug to me in ColumnLayout but maybe someone can explain it to me?

My usecae was: Some main-item holds a list of items as a property. The list can be set from outside.
The items from the list should be dynamically added to a layout of the main-item. And when the main-item is resized then the items of the layout should be resized too.

Attached you see my code which works if I use a Column for layouting the items:
@
import QtQuick 2.3
import QtQuick.Window 2.2

import QtQuick.Layouts 1.1

Window {
visible: true
width: 360
height: 360

Rectangle {

    property list<Rectangle> rectList: [
        Rectangle { color: "red" },
        Rectangle { color: "green" }
        // Rectangle { color: "red"; width: 50; height: 50 },
        // Rectangle { color: "green"; width: 50; height: 50 }
    ]

    id: mainRect

    anchors.fill: parent
    color: "yellow"


    Column {
    // ColumnLayout {
        id: mainLayout
        spacing: 2

        anchors {
            horizontalCenter: parent.horizontalCenter
            bottom: parent.bottom
            bottomMargin: 0
        }
    }

    Component.onCompleted: {
        for ( var i = 0; i < rectList.length; ++i ) {
            rectList[i].parent = mainLayout
            rectList[i].width = Qt.binding( function() { return mainRect.width * 0.3 } )
            rectList[i].height = Qt.binding( function() { return mainRect.width * 0.3 } )
        }
    }
}

}@

If I exchange the Column with a ColumnLayout it does not work.
Nothing will be displayed inside of main-item (here it is a yellow Rectangle).
To solve this problem I have to give the rectangles of the rectangle-list an initial width and height (see comments). After this the Rectangles (red and green) are visible inside of the main-item.
But the resizing still does not work (it works only in the horizontal direction).

So what is it?
What must be done for using the ColumnLayout?

Thanks in advance.
Best regards
Kai

Gianluca

Column and ColumnLayout are very different, you cannot exchange them easily.
The purpose for which they have been created it's very different.

Before explaining the difference, it's important to note the basis on which they are based on.
Before Qt introduced the Qt Quick, there was only QWidget and the way to organize the QWidget was based on QLayout hierarchy. The QLayout is an non-visual object that take the responsability to dynamically change the dimension of the QWidget according to a policy in order to fit all QWidget in a specified dimension.

When Qt introduced the Qt Quick, the 'anchors' mechanism was introduced to organize the item into the window. The 'anchors' are a quite different approach. There isn't an intermediate object that dynamically resize the Items, but instead there are constraints the bind the Items to move (and in some case to stretch) depending on how they have been 'anchored'.

Initially, there was no way to the fan of QLayout to use the same way on Qt Quick. But with Qt Quick 2.0 (I think), Qt introduced a mechanism that mimics the QLayout way to arrange things into the Qt Quick: ColumLayout, etc.

And now back to Colum and ColumLayout.

Column: it's created to allow an easy way to arrange via 'anchors' the children Items into a Column. And then, you cannot explicitly set or bind vertical 'anchors' and properties like 'y'. Because they are under Column control. But width and height properties are under your control and you can bind to whatever you want.
In fact, Column has an height variable depending on the heights of the children.

ColumnLayout: it's created to mimic the QVBoxLayout, and arrange the Item by dynamically changing the width and the height in order to keep them arranged into a column that fits inside the width and height of ColumnLayout. In this case, the width and the height of items are under the ColumnLayout. You cannot (should) set directly, instead you have to use the Layout attached properties in order to inform ColumnLayout how they should changed. Some of these properties are: Layout.preferredWidth/Height, Layout.minimumWidth/Height, Layout.maximumWidth/Height
ColumnLayout tend to stretch and to shrink the Item in order to keep them into a specified space and also it allow to specify a relative proportion between items in order to achieve an effect that some item are bigger that other: Layout.rowSpan, Layout.columnSpan

So, the code that works with Column doesn't works with ColumnLayout and viceversa.

Try to understand which one is more suitable for your.

Rolias

You'd probably benefit from my latest Pluralsight course on "Qt Quick Fundamentals":http://bit.ly/qtquickfun on Pluralsight. Module 6 is "Positioning" and clips 06 and 07 are on Layouts. Pluralsight is a subscription service but if you send me an email through the forum I can give you a free week long VIP pass good for unlimited hours of watching, plus you can download course materials and watch offline during the week. The downloaded video does expire when the pass expires.

kaivolde

@Gianluca:
Perfect explanation!
I would like to find your text in the docs. Please put it there!

@Rolias:
Thanks for your offer but at the moment my problems are solved.
(But the next one will come soon.....)

Gianluca

Thank you very much :-)
I don't know where to start for contributing to the Qt documentation.

SGaist

[Solved] Column vs ColumnLayout - bug or feature

Create a jira account

Clone the repository

Update the documentation

Submit for review

Add reviewers (e.g. the documentation team members)

Have some patience :)