Qt5 QML, when to use a ColumnLayout vs Column?

Question

For example, this works:

import QtQuick 2.5
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4
import QtQuick.Layouts 1.2

ApplicationWindow
{
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    function thingWidth()
    {
        return width*80/100
    }

    Column
    {
        spacing: 10;
        anchors.horizontalCenter: parent.horizontalCenter

        Thing { color: "red"; width: thingWidth(); }
        Thing { color: "yellow"; width: thingWidth();  }
        Thing { color: "green"; width: thingWidth();  }
    }

}

But change Column to ColumnLayout and it doesn't (resizing window causes layout to go wrong).

any help, thanks.

EDIT 1:

Here's also Thing.qml as requested,

import QtQuick 2.0

Item {
    property alias color: rectangle.color
    width: 50; height: 50

    Rectangle
    {
        id: rectangle
        border.color: "white"
        anchors.fill: parent
    }
}

It looks like my post is mostly code. Yes, nanny it does! that's because people post code on here.

Please either a) provide the code for Thing, or b) replace them with something we have access to, like Rectangle. — Mitch

skypjack skypjack · Accepted Answer · 2016-02-23T07:17:33

As from the documentation of Column:

Column is a type that positions its child items along a single column. It can be used as a convenient way to vertically position a series of items without using anchors.

Moreover, it eases transitions during insertion, deletion and so on. It also attaches properties to the items to give them notions about their positions.

On the other side, this is the documentation of GridLayout (please, note that ColumnLayout is a convenience utility, but it is nothing more than a grid with one column, as from its documentation).
It has a completely different set of properties, as well as attached properties, completely oriented to the arrangement of the items.

I guess anyway that the most interesting page from the documentation is that one.
I simply cite it:

Positioner items are container items that manage the positions of items in a declarative user interface. Positioners behave in a similar way to the layout managers used with standard Qt widgets, except that they are also containers in their own right.

Positioners make it easier to work with many items when they need to be arranged in a regular layout.

Qt Quick Layouts can also be used to arrange Qt Quick items in a user interface. They manage both the positions and the sizes of items on a declarative user interface, and are well suited for resizable user interfaces.

Please, note that a Column is a Positioner, while a ColumnLayout is a Layout. When to use them depends mainly on your goal, as usual.

Qt5 QML, when to use a ColumnLayout vs Column?

1 Answers