RowLayout 忽略 Layout.minimumWidth

Question

当window太小时，text和text2应该适当省略（当space不足以覆盖整个字符串时显示三个点）。 Layout.preferredWidth 设置为 text.implicitWidth 并添加了一些填充，但我什至设置了 Layout.minimumWidth，因此当 space 不够时可以省略文本。似乎 RowLayout 忽略了 Layout.minimumWidth 并保留了 Layout.preferredWidth，因此文本仍然是 Layout.preferredWidth 的 width 并且从未被删除。怎么了？

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

你这里有两个主要问题：

fillWidth 未定义
Text 是 centerIn 父 Rectangle

没有 1. Rectangles 不能在所需的约束内增长或收缩。通过使用 2. Text 元素对其大小和边框没有特定限制，因此 Text 无法正确检查是否需要省略号。正确的方法是使用 fill 并通过 Text 的 verticalAlignment 和 horizontalAlignment 设置对齐方式。

最终重新访问的代码如下所示：

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

RowLayout 忽略 Layout.minimumWidth

RowLayout ignores Layout.minimumWidth

qml

qt5

qtquick2