RowLayout ignores Layout.minimumWidth

Question

The text and text2 should be properly elided (show three dots when space is not enough to cover whole string) when the window is too small. The Layout.preferredWidth is set to be text.implicitWidth with some addition for padding, but i even set the Layout.minimumWidth, so the text can be ellided when the space is not enough. It seems that the RowLayout is ignoring the Layout.minimumWidth and keeps the Layout.preferredWidth, so the text has still width of Layout.preferredWidth and is never elided. What's wrong?

import QtQuick 2.5
import QtQuick.Controls 1.4
import QtQuick.Layouts 1.1

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

    contentItem.minimumWidth: 50

    RowLayout {
        id: ntoolbarline

        anchors.fill: parent

        Rectangle {
            color: "red"

            Layout.preferredWidth: text.implicitWidth + 40
            Layout.preferredHeight: 25
            Layout.minimumWidth: 25
            Layout.minimumHeight: 25
            Layout.maximumWidth: text.implicitWidth + 40

            Text {
                id: text
                anchors.centerIn: parent
                text: "Foooooooo"
                elide: Text.ElideRight
                width: parent.width - 40
                renderType: Text.NativeRendering
            }
        }

        Rectangle {
            color: "red"

            Layout.preferredWidth: text2.implicitWidth + 40
            Layout.preferredHeight: 25
            Layout.minimumWidth: 25
            Layout.minimumHeight: 25
            Layout.maximumWidth: text2.implicitWidth + 40

            onWidthChanged: console.log("layout item width: " + width) // only one output when app started

            Text {
                id: text2
                anchors.centerIn: parent
                text: "Baaaaaaaar"
                elide: Text.ElideRight
                width: parent.width - 40
                renderType: Text.NativeRendering
            }
        }

        Item {
            id: spacer
            Layout.fillWidth: true
            onWidthChanged: console.log("spacer width: " + width) // outputs whenever the window is resized
        }

    }

}

Answer 1

You have two main problems here:

1. fillWidth is not defined
2. Text is centerIn the parent Rectangle

Without 1. the Rectangles cannot grow or shrink inside the desired constraints. By making use of 2. the Text element as no specific constraints on its size and borders and thus Text cannot correctly check that an elide is required. The correct way to go is to use fill and setting alignments via the verticalAlignment and horizontalAlignment of Text.

The final revisited code looks like the following:

import QtQuick 2.5
import QtQuick.Controls 1.4
import QtQuick.Layouts 1.1

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

    RowLayout {
        id: ntoolbarline
        anchors.fill: parent

        Rectangle {
            color: "red"
            Layout.fillWidth: true
            Layout.preferredWidth: text.implicitWidth + 40
            Layout.preferredHeight: 25
            Layout.minimumWidth: 25
            Layout.maximumWidth: text.implicitWidth + 40

            Text {
                id: text
                anchors.fill: parent
                text: "Foooooooo"
                elide: Text.ElideRight
                verticalAlignment: Text.AlignVCenter
                horizontalAlignment: Text.AlignHCenter
                renderType: Text.NativeRendering
            }
        }

        Rectangle {
            color: "red"
            Layout.fillWidth: true
            Layout.preferredWidth: text.implicitWidth + 40
            Layout.preferredHeight: 25
            Layout.minimumWidth: 25
            Layout.maximumWidth: text.implicitWidth + 40

            Text {
                id: text2
                anchors.fill: parent
                text: "Baaaaaaaar"
                elide: Text.ElideRight
                verticalAlignment: Text.AlignVCenter
                horizontalAlignment: Text.AlignHCenter
                renderType: Text.NativeRendering
            }
        }

        Item {
            id: spacer
            Layout.fillWidth: true
        }
    }
}