QML 布局不限制孩子的宽度

Posted 2023-02-16

【中文标题】QML 布局不限制孩子的宽度

【英文标题】：QML Layout not limiting width of children

【发布时间】：2015-06-02 08:15:06

【问题描述】：

我有一个 QML ColumnLayout 有几个孩子，我想限制它的宽度，像这样：

ColumnLayout 

    width: 360
    height: 480

    ColumnLayout 
        id: inner
        Layout.maximumWidth: 200
        Layout.fillHeight: true

        Text 
            text: "Welcome"
            font.pixelSize: 18
        

        Text 
            text: "Long explanation that should wrap, but ends up overflowing layout"
            wrapMode: Text.WrapAnywhere
        
    

    Rectangle 
        anchors.fill: inner
        z: -1
        border.color: "orange"
    

我得到了下图所示的结果。

橙色框显示内部布局项的尺寸，可以。但是，布局的子文本没有换行。

我只能通过添加来解决这个问题

Layout.maximumWidth: parent.width

到我的“文本”项目，但这是非常尴尬的方法。我做错了什么，或者这是一个 Qt 错误，还是出于某种原因它是一种设计方法？我正在使用 Qt 5.4.1。

【参考方案1】：

只有设置了明确的宽度，文本才会换行

Docs

Text

    width: parent.width

【讨论】：

请在发布之前尝试您的代码：Invalid property assignment: "contentWidth" is a read-only property

（是Layout.fillWidth: true）

文档中的评论似乎并不准确。 “maximumWidth”解决方法确实有效，这表明布局代码能够自行设置宽度，这会导致发生换行。我不必自己在 QML 代码中明确设置“宽度”。

此外，向每个 Text 项添加“width: parent.width”会稍微短一些，但基本上与添加“Layout.maximumWidth: parent.width”一样尴尬 - 布局的自然行为是强制孩子留在其范围内，这很可能通过包装标签实现，这也是 Qt Widgets 中布局的工作方式。

我认为文档是正确的。 maximumWidth 方法可能有效，因为布局（ColumnLayout，而不是 Text 的文本布局功能）会看到文本的隐式宽度太大并显式将宽度设置为更小。换句话说，它实际上与width: parent.width 或Layout.fillWidth: true 相同。就个人而言，我更喜欢您的问题中列出的方法，因为如果您的项目在布局中，您应该使用附加的 Layout 属性。