时间戳

首页 > 解决方案 > 如何在 QML 中创建动态委托？

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

问题描述

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

我不知道如何定义委托来Rectangles为ListView. 我希望每个集团都独立于其他集团，所以将来我可以让它们可拖动和调整大小。

这是我的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
        }*/
    }
}

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

谢谢！

标签： qtqml

解决方案

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

=========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"
            }
        ]
    }
}

推荐阅读