Important: Please read the Qt Code of Conduct -

[Solved] Column vs ColumnLayout - bug or feature

  • 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

  • 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.

  • You'd probably benefit from my latest Pluralsight course on "Qt Quick Fundamentals": 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.

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

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

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

  • Lifetime Qt Champion

    @ Gianluca, the same way as you would do for code.

    Create a jira account

    Clone the repository

    Update the documentation

    Submit for review

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

    Have some patience :)

    Long version "here":

Log in to reply