為什么我的 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項的子項。