如何均匀缩小布局中的项目以使 space 用于更多项目

Question

最初，我有四件特定尺寸的商品。添加第 5 个项目后，我想缩小所有项目的大小以使布局内 space。

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
 }
}

如果 space 可以容纳所有项目，项目的大小应为 60，如果没有，则缩小到 30。有什么想法可以实现吗？

Answer 1

您几乎完成了：设置 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
    }
}

如何均匀缩小布局中的项目以使 space 用于更多项目

How to evenly shrink items in layout to make space for more items

layout

qt

qml