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.

Solution

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.

Comments

[Mitch]

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

[jkj yuio]

done. sorry about the nanny

[jkj yuio]

Thanks for your answer. As i understand it, Positioners like Column can be told the positions, but layouts like ColumnLayout have to calculate the position themselves. Setting the width inside a ColumnLayout is bad, but in a Column it's ok.

[skypjack]

Within the layouts you have a lot of interesting attached properties liked Layout.preferredwidth. Please, see the linked documentation.

[BaCaRoZzo]

Layouts were added once Qt has to support screens with very different sizes, i.e. after the nokia age. Indeed you got the fill property which is lacking in the other implementation. That's also stressed in the documentation when it says that they are "well suited for resizable user interfaces"

[skypjack]

@BaCaRoZzo Right, the fill property of the layouts is pretty useful, indeed. Damned Columns!! :-)

[BaCaRoZzo]

When it comes to text dynamic layouting you won't use say Columns are so damned. Trust me. ;)

[Violet Giraffe]

Does it mean that Layout is for resizing items, and Positioner only moves items but doesn't affect their size?

[skypjack]

@VioletGiraffe Not exactly, but it's a side effect you can exploit.

[Stefan Monov]

I think a link to the Positioners and Layouts documentation will be useful here :)

[skypjack]

@StefanMonov It's there, see the sentence I guess anyway that the most interesting page from the documentation is that one, Should I enlarge it over the word documentation?

[quent]

"ColumnLayout is a convenience utility, but it is nothing more than a grid with one row"