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

Posted 2023-02-16

【中文标题】如何在 QML 中创建动态委托？

【英文标题】：How can I create a dynamic delegate in 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"
            
        ]
    

这是ma​​in.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++ 模型并从那里添加块？

谢谢！

【参考方案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"
            
        ]