为什么我的 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
}

主要.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 ）的可用空间。 因此，标题较长的组框默认会获得更多空间，因为它的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是Layout （ RowLayout 、 GridLayout或ColumnLayout ）的子级可用的附加属性。 直接在RowLayout object 中设置它是没有用的（除非RowLayout本身是另一个Layout项的子项。