QML Column doesn't set child object width automatically

Question

I'm trying to use Columns and Rows to lay out my user interface.

import QtQuick 2.6
import QtQuick.Window 2.2

Window{
    height: 200
    width : 300

    Row{
        height: parent.height
        width: parent.width
        Column{
            width: parent.width / 2
            height: parent.height
            Text{
                text: "Hello World!"
            }
            Text{
                wrapMode: Text.WordWrap
                text: "This text is so long that it doesn't fit inside the column on a single line, but I'd assume that column sets child object width."
            }

            Rectangle{
                height: parent.height - y
                width: parent.width
                color: "#aa0000aa"
                Text{
                    anchors.bottom: parent.bottom
                    text: "Hello2"
                }
            }
        }
        Column{
            height: parent.height
            width: parent.width / 2
            Text{
                text: "Hello1"
            }

            Rectangle{
                height: parent.height - y
                color: "#4c00aa00"
                width: parent.width
                Text{
                    anchors.bottom: parent.bottom
                    text: "Hello2"
                }
            }
        }

    }
}

As can be seen, the text object width is not bound to it's parent.

For some reason I cannot use the layout qml objects since they lock up my target system.

Do I just need to pepper my code with width: parent.width or is there some better way around this?

"For some reason I cannot use the layout qml objects since they lock up my target system." I would really suggest creating a minimal example for that (like you have for this question) and posting a question about it. :) Positioners have their uses, but layouts are very useful. — Mitch
I tried adding an empty layout item to a simple "hello world" qml, even that causes a crash. I have tried, trust me. I have no idea what is wrong with the target system, but it's outside my control. — 0xbaadf00d

augre augre · Accepted Answer · 2019-08-29T09:37:27

You are right, a QML Column doesn't set child object width automatically, and it's the expected behavior for containers (except for a few exceptions like the SwipeView or the TabBar).

So it's your responsibility to arrange children size as you want.

In your case you have to explicitly set the width of the Text in order to apply the wrap:

Text {
    width: parent.width
    wrapMode: Text.WordWrap
    // ...
}

or using anchors:

Text {
    anchors {
        left: parent.left
        right: parent.right
    }
    wrapMode: Text.WordWrap
    // ...
}

QML Column doesn't set child object width automatically

1 Answers