如何均勻地縮小布局中的專案以為更多專案騰出空間-有解無憂

最初，我有四個具有特定尺寸的物品。一旦添加了第 5 個專案，我想縮小所有專案的大小以在布局內騰出空間。

Window {
 width: 640
 height: 480
 visible: true
 id: root

 Item {
    id: col
    width: 300
    height: 200
    anchors.centerIn: parent

    RowLayout {
        id: row
        spacing: 10
        anchors.centerIn: parent

        Rectangle {
            Layout.minimumWidth: 30
            Layout.preferredWidth: 60
            Layout.preferredHeight: 20
            Layout.fillWidth: true
            color: "red"
        }
        Rectangle {
            Layout.minimumWidth: 30
            Layout.preferredWidth: 60
            Layout.preferredHeight: 20
            color: "blue"
            Layout.fillWidth: true
        }
        Rectangle {
            Layout.minimumWidth: 30
            Layout.preferredWidth: 60
            Layout.preferredHeight: 20
            color: "green"
            Layout.fillWidth: true
        }
        Rectangle {
            Layout.minimumWidth: 30
            Layout.preferredWidth: 60
            Layout.preferredHeight: 20
            color: "green"
            Layout.fillWidth: true
        }
        Rectangle {
            Layout.minimumWidth: 30
            Layout.preferredWidth: 60
            Layout.preferredHeight: 20
            color: "blue"
        }
    }
}

// for visualization
Rectangle {
    width: col.width
    height: col.height
    x: col.x
    y: col.y
    color: "black"
    opacity: 0.3
 }
}

如果有空間可以容納所有專案，則專案的大小應為 60，如果沒有，則縮小到 30。任何想法我將如何做到這一點？

如何均勻地縮小布局中的專案以為更多專案騰出空間

uj5u.com熱心網友回復：

你快到了：設定Layout.maximumWidth而不是Layout.preferredWidth并確保所有元素都Layout.fillWidth設定為true. 此外，布局元素本身必須具有正確的大小fillWidth才能正常作業。所以在這種情況下替換centerIn為。fill

這是你的片段；更正和重寫，以便更容易嘗試不同數量的元素。

import QtQuick 2.14
import QtQuick.Layouts 1.14
import QtQuick.Controls 2.14
import QtQuick.Window 2.14

Window {
    width: 640
    height: 480
    visible: true
    id: root

    Item {
        id: col
        width: 300
        height: 200
        anchors.centerIn: parent

        RowLayout {
            id: row
            spacing: 10
            anchors.fill: parent

            Repeater {
                model: spinBox.value
                delegate: Rectangle {
                    Layout.minimumWidth: 30
                    Layout.maximumWidth: 60
                    Layout.preferredHeight: 20
                    Layout.fillWidth: true
                    color: ["red", "blue", "green", "green", "blue"][index % 5]
                }
            }
        }
    }

    // for visualization
    Rectangle {
        width: col.width
        height: col.height
        x: col.x
        y: col.y
        color: "black"
        opacity: 0.3
    }

    SpinBox {
        id: spinBox
        from: 1; to: 10
        value: 5
    }
}

轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/452359.html

標籤：qt 布局 qml

上一篇：如何找到我的e.target的下一個元素（或多個元素）？

下一篇：屬性更新不會更改組件中的值