如何使我的 GroupBox 布局在 QML 中可縮放？

Question

我有以下問題。 我在 QML 中創建了一個周期表，它由包含 ColumnLayout 的 GroupBox 組成，以便安排每個元素的特定屬性。 但是正如你在圖片中看到的那樣......

啟動后Window

減員后Window

...屬性不會根據 GroupBox 的大小正確縮放。 因此，當我縮小 window 的大小時，一些文本屬性將移出其 GroupBox 並放置在它們不應該出現的位置。 我怎樣才能解決這個問題？

//PeriodicTable.qml
import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15
import QtQuick.Controls.Material 2.15
import QtQuick.Layouts 1.15

Item {
    id: root
    Button {
        id: button
        checkable: true
        text: qsTr("Show")

        onClicked: window.show()
    }
    Window {
        id: window
        Material.accent: parent.Material.accent
        Material.background: parent.Material.background
        Material.foreground: parent.Material.foreground
        Material.primary: parent.Material.primary
        Material.theme: parent.Material.theme
        color: Material.background
        height: parent.height
        title: qsTr("Periodic table")
        width: parent.width

        GridView {
            id: gridview
            anchors.fill: parent
            cellHeight: cellWidth * 1.5
            cellWidth: parent.width / 18

            delegate: PeriodicTableDelegate {
            }
            model: PeriodicTableModel {
            }
        }
    }
}

//PeriodicTableModel.qml
import QtQuick 2.15
import QtQuick.Controls 2.15

ListModel {
    id: elements
    ListElement {
        atomicWeight: "1.00794"
        electronConfiguration: qsTr("1s")
        elementName: qsTr("Hydrogen")
        elementSign: qsTr("H")
        ionizationEnergy: qsTr("13 5984")
        ordinalNumber: qsTr("1")
        unknownNumber: qsTr("S1/2")
    }
} // I shortened this to just one element because yet it is the only one I have

// PeriodicTableDelegate.qml
import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15

GroupBox {
    property int cellHeight: GridView.view.cellHeight
    property int cellWidth: GridView.view.cellWidth

    height: cellHeight
    width: cellWidth

    ColumnLayout {
        RowLayout {
            Label {
                Layout.alignment: Qt.AlignLeft
                Layout.fillWidth: true
                font.bold: true
                text: ordinalNumber
            }
            Label {
                Layout.alignment: Qt.AlignRight
                text: unknownNumber
            }
        }
        Label {
            Layout.alignment: Qt.AlignHCenter
            font.bold: true
            text: elementSign
        }
        Label {
            Layout.alignment: Qt.AlignHCenter
            text: elementName
        }
        Label {
            Layout.alignment: Qt.AlignHCenter
            text: atomicWeight
        }
        Label {
            Layout.alignment: Qt.AlignHCenter
            text: electronConfiguration
        }
        Label {
            Layout.alignment: Qt.AlignHCenter
            text: ionizationEnergy
        }
    }
}

Answer 1

一個稍微做作的例子：

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Layouts 1.0

Window {
    height: 800
    width: 600
    visible: true
    title: qsTr("cell test")

    GridView {
        id: grid
        anchors.fill: parent
        cellHeight: grid.height / 3
        cellWidth: grid.width / 4
        model: 12
        delegate: Rectangle {
            id: rect
            width: grid.cellWidth
            height: grid.cellHeight
            color: Qt.rgba(Math.random(), Math.random(), Math.random(), 1)

            ColumnLayout {
                id: layout
                anchors.fill: parent
                Repeater {
                    model: 5
                    Text {
                        id: txt
                        property int fsize: (layout.height + layout.width) / 30
                        Layout.fillWidth: true
                        text: "some text"
                        horizontalAlignment:Text.AlignHCenter
                        font.pointSize: fsize > 0 ? fsize : 16

                    }
                }
            }
        }
    }
}

Answer 2

您的 GroupBox 中的 ColumnLayout 缺少 anchors.fill anchors.fill: parent 。