如何在 QML 中创建动态委托？答案

【问题标题】：How can I create a dynamic delegate in QML?如何在 QML 中创建动态委托？
【发布时间】：2020-05-15 16:28:17
【问题描述】：

我想使用ListView 创建一个视图，其中每一行都有由模型定义的Rectangle 元素。模型的每个元素代表一行，但这些元素可能有多个要绘制的Rectangle，定义在一个名为blocs 的数组的角色中。

我不知道如何定义委托来创建模型中为ListView 的每一行定义的Rectangles 的数量。我希望每个块都独立于其他块，因此将来我可以使它们可拖动和调整大小。

这是我的 BlocModel.qml：

import QtQuick 2.0

ListModel {

    ListElement{
        blocs: [
            ListElement{
                OriginX: 100
                length: 100
                color: "blue"
            },
            ListElement{
                OriginX: 300
                length: 75
                color: "green"
            }
        ]
    }
    ListElement{
        blocs: [
            ListElement{
                OriginX: 0
                length: 50
                color: "red"
            },
            ListElement{
                OriginX: 100
                length: 75
                color: "yellow"
            }
            ,
            ListElement{
                OriginX: 300
                length: 100
                color: "blue"
            }
        ]
    }

}

这是main.qml：

import QtQuick 2.11
import QtQuick.Controls 2.4
import QtQuick.Controls.Material 2.4
import QtQuick.Layouts 1.11
import QtQuick.Window 2.11

ApplicationWindow {
    id: window
    width: 400
    height: 500
    visible: true

    ListView {
        id: blocsListView
        anchors.fill: parent
        model: BlocModel {}
        delegate: BlocDelegate {}
    }
}

这是 BlocDelegate.qml：

import QtQuick 2.12
import QtQuick.Controls 2.4
import QtQuick.Controls.Material 2.4
import QtQuick.Layouts 1.11
import QtQuick.Window 2.11

ItemDelegate{
    id: root
    width: parent.width
    height: 50

    //each row
    Rectangle{
        width: parent.width
        height: parent.height
        color: "gray"

        //What should I add here to make the following element repeat according to the number of elements in the array "blocs"? 
        //each bloc should have the following delegate
       /* Rectangle {
            id: bloc
            x: OriginX
            width: length
            height: parent.height
            color: model.color
        }*/
    }
}

如何使我的委托充满活力？我可以以某种方式使用 Javascript for 循环还是应该使用 C++ 模型并从那里添加块？

谢谢！

【问题讨论】：

标签： qt qml

【解决方案1】：

如果您的所有委托项目都是相同类型（在这种情况下只有矩形），则可能满足您的要求的简单解决方案。如果您有不同类型的委托项目（矩形、项目、按钮、单选按钮），则必须将具有匹配类型的预定义项目加载到加载器中。

=========BlocDelegate.qml=======
import QtQuick 2.9
import QtQuick.Controls 2.2

Column {
    width: parent.width

    Repeater {
        model: blocs
        delegate: Rectangle {
            height: 40
            width: parent.width
            color: rectcolor
        }
    }
}


========BlocModel.qml========
import QtQuick 2.0

ListModel {
    ListElement {
        blocs: [
            ListElement {
                rectcolor: "lightgreen"
            },
            ListElement {
                rectcolor: "skyblue"
            },
            ListElement {
                rectcolor: "orange"
            }

        ]
    }
    ListElement {
        blocs: [
            ListElement {
                rectcolor: "yellow"
            },
            ListElement {
                rectcolor: "steelblue"
            }
        ]
    }
}

【讨论】：