CODEWITHSUNDEEP
qtlayoutqml
0xbaadf00d
0xbaadf00d

Reputation: 2643

QML Column doesn't set child object width automatically

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"
                }
            }
        }

    }
}

Illustration

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?

Upvotes: 2

Views: 1012

Answers (1)

augre
augre

Reputation: 2051

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
    // ...
}

Upvotes: 2

Related Questions