QML Repeater用于将多个项目添加到GridLayout？ [英] QML Repeater for adding multiple Items to GridLayout?

问题描述

如何使用单个转发器将多个元素添加到GridLayout？

GridLayout组件确保行和列的大小调整为适合每个单元格中最大的项，但如果要使用Repeater填充它，似乎是不可能的，因为Repeater只能有一个委托。

还有一个SO page asking how to do it without a wrapping Item，但我从来没有见过包装项目解决方案，也不知道为什么它不是更好的解决方案。

您将如何创建以下内容？

以下是该图像的模型数据：

model: [  // JSON model
    {
        name: "February:",
        types: [
            { name: "R-1", size: 24, color: "red" },
            { name: "O--2", size: 16, color: "orange" },
            { name: "Y---3", size: 8, color: "yellow" },
        ]
    },
    {
        name: "March:",
        types: [
            { name: "G-1", size: 24, color: "green" },
        ]
    },
    {
        name: "April:",
        types: [
            { name: "B-1", size: 24, color: "blue" },
            { name: "I--2", size: 16, color: "indigo" },
            { name: "V---3", size: 8, color: "violet" },
        ]
    },
]

推荐答案

将多个项作为子项添加到复制者的委派项，并在委派项完成后使用JAVASCRIPT将它们重新设置为GridLayout的父项。

import QtQuick 2.0
import QtQuick.Window 2.0
import QtQuick.Layouts 1.0

Window {
    width: 360
    height: 280
    visible: true
    title: qsTr("Repeater With Multiple Items")

    function reparentChildren(source, target) {
        while (source.children.length)
            source.children[0].parent = target;
    }

    GridLayout {
        id: grid
        anchors.centerIn: parent
        columns: 3

        Repeater {
            Item {
                id: wrappingItem
                Component.onCompleted: reparentChildren(this, grid)

                Text {
                    Layout.alignment: Qt.AlignTop|Qt.AlignRight
                    Layout.rowSpan: modelData.types.length
                    text: modelData.name
                }
                Repeater {
                    model: modelData.types

                    Item {
                        Component.onCompleted: reparentChildren(this, wrappingItem)

                        Text {
                            Layout.alignment: Qt.AlignTop|Qt.AlignHCenter
                            text: modelData.name
                        }
                        Rectangle {
                            width: modelData.size; height: width
                            color: modelData.color
                        }
                    }
                }
            }

            model: [  // JSON model
                {
                    name: "February:",
                    types: [
                        { name: "R-1", size: 24, color: "red" },
                        { name: "O--2", size: 16, color: "orange" },
                        { name: "Y---3", size: 8, color: "yellow" },
                    ]
                },
                {
                    name: "March:",
                    types: [
                        { name: "G-1", size: 24, color: "green" },
                    ]
                },
                {
                    name: "April:",
                    types: [
                        { name: "B-1", size: 24, color: "blue" },
                        { name: "I--2", size: 16, color: "indigo" },
                        { name: "V---3", size: 8, color: "violet" },
                    ]
                },
            ]
        }
    }
}

这篇关于QML Repeater用于将多个项目添加到GridLayout？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！