为什么我的 QML GroupBox 在布局中无法正确调整大小？

Question

我试图让两个组框并排出现，这样每个组框都占据 window 的 50%。但是，看起来每个 GroupBox 的宽度都会根据 GroupBox 标题长度以某种方式改变。

如果两个 GroupBox 的 GroupBox 标题相同，它将是 window 的 50%。如果不相同，则标题较长的GroupBox会占据更多屏幕。

发生这种情况对我来说没有意义，我该如何解决它，使标题的长度不影响布局中 GroupBox 的大小？

这是重现问题的示例代码...

AppGroupBox.qml

import QtQuick 2.0
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.12

GroupBox {
    Layout.alignment: Qt.AlignLeft | Qt.AlignTop
    spacing:0
    label.x: 0
}

AppRowLayout.qml

import QtQuick 2.0
import QtQuick.Layouts 1.12

RowLayout {
    Layout.alignment: Qt.AlignLeft | Qt.AlignTop
    spacing: 0
}

main.qml

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.12
import QtQuick.Layouts 1.12

Window {
    width: 640
    height: 480
    visible: true


    AppRowLayout {
        anchors.fill: parent

        AppGroupBox {
            title: "Short Name"
            Layout.fillWidth: true
        }

        AppGroupBox {
            title: "Much Longer Name"
            Layout.fillWidth: true
        }
    }
}

Answer 1

Qt 将分发相对于 Layout.preferredWidth（或 implicitWidth，如果未定义）的免费 space。因此，标题较长的组框默认会获得更多 space，因为它的 implicitWidth 更大。

解决方案是对RowLayout中的所有元素使用固定的preferredWidth:

GroupBox {
    ...
    Layout.preferredWidth: 50 // or any other fixed value.
    Layout.minimumWidth: implicitWidth // OPTIONAL: may be usefull on small screens to ensure the box is not made smaller than the title width
    ...
}

附加属性注意事项：

Layout.alignment 是 children 上的附加属性 Layout (RowLayout , GridLayout 或 ColumnLayout)。直接在 RowLayout object 中设置它是没有用的（除非 RowLayout 本身是另一个 Layout 项目的 child。

为什么我的 QML GroupBox 在布局中无法正确调整大小？

Why is my QML GroupBox not sizing properly within a layout?

qt

qml