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, Feb 22 '16 at 21:58

score 13 · Answer 1 · edited Jun 20 '20 at 09:12

13

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.

edited Jun 20 '20 at 09:12

Community

1
1

answered Feb 23 '16 at 07:17

skypjack

49,335
19
95
187

3

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. – jkj yuio Feb 23 '16 at 11:00
2

Within the layouts you have a lot of interesting attached properties liked `Layout.preferredwidth`. Please, see the linked documentation. – skypjack Feb 23 '16 at 11:16
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" – BaCaRoZzo Feb 23 '16 at 11:48
@BaCaRoZzo Right, the `fill` property of the layouts is pretty useful, indeed. Damned `Column`s!! :-) – skypjack Feb 23 '16 at 14:38
When it comes to text dynamic layouting you won't use say `Column`s are so damned. Trust me. ;) – BaCaRoZzo Feb 23 '16 at 15:42
Does it mean that `Layout` is for resizing items, and `Positioner` only moves items but doesn't affect their size? – Violet Giraffe Aug 02 '16 at 20:18
@VioletGiraffe Not exactly, but it's a side effect you can exploit. – skypjack Aug 02 '16 at 20:24
2

I think a link to the [Positioners and Layouts](http://doc.qt.io/qt-5/qtquick-positioning-layouts.html) documentation will be useful here :) – Stefan Monov Aug 29 '16 at 15:24
@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_? – skypjack Aug 29 '16 at 15:28
"ColumnLayout is a convenience utility, but it is nothing more than a grid with one **row**" – quent Feb 27 '21 at 22:35

Qt5 QML, when to use a ColumnLayout vs Column?

1 Answers1

Linked