Qt QML-将ListView与动态生成的ListElement一起使用

我有一个带有ListView的QML：

import QtQuick 2.0
import QtQuick.Controls 2.12
import QtQuick.Layouts 1.0
import smah.light 1.0
import smah.zone 1.0

Page {

    id: page
    property var lights: ({})
    property var lightNames: ([])
    title: "Device control"

    ListView {
        id: lightList
        anchors.fill: parent
        model: listModel
        delegate:
            Rectangle{
            width: lightList.width
            height: lightList.height / 8
        }
    }

    ListModel {
        id: listModel
        dynamicRoles: true
        Component.onCompleted: {
            listModel.clear()
            for (var i=0; i<lights.length; i++) {
                var component = Qt.createComponent("LightControls.qml",listModel)
                listModel.append(component.createObject(lightList, {light_name: lights[i].getName }))
            }
        }

    }
}

我想要一个干净的滚动列表，其中显示生成的每个项目。我已经考虑过使用中继器而不是列表，但是列表中的元素将比屏幕上所需的更多。运行程序时，所有内容都被乱码成一个不连贯的混乱：

---

您的代码有几个更大的问题：

您正在尝试将可视项添加到

ListModel

，它需要

liselement

对象。您可以使用将行添加到

列表模型

您的根代理项是一个

矩形

，它不管理其子项的布局。改用

行布局

或

行

您的委托应该是

委托：LightControls{}

---

还是不走运。。For#1不是

listModel.append（component.createObject（lightList，{light#u name:lights[i].getName}））

（使用此对象向模型中添加行？我已经完成了#2和#3，但它在顶部仍然混乱-尽管将根代理更改为

行

似乎使混乱中的项目组织得稍微好一些。在您的示例中，您正在创建一个

矩形

组件（LightControls.qml）并试图将其附加到一个永远不会起作用的

ListModel

。看一看。对不起，我应该澄清一下。LightControls.qml现在是

Row{..

而不是

Rectangle{..

相同的东西；

Row

是一个可视化类型。

ListModel

只支持

ListElement

或JS对象（如文档所示）。当我说“将行添加到<代码>列表模型”时，我指的是模型行，它是<代码>行项的一个单独概念。您是否阅读了我在回答中链接的文档和前面的注释？它解释了如何执行您需要的操作。

import QtQuick 2.0
import QtQuick.Controls 2.5
import smah.light 1.0

Rectangle {
    id: rectangle
    property int light_type: 0
    property int light_id: 0
    property var light_name: "_DEF"
    width: parent.width
    height: 50
    color: "#040000"

    Text {
        id: txtName
        color: "#fefdfd"
        text: qsTr(light_name)
        anchors.left: parent.left
        anchors.leftMargin: 15
        anchors.top: parent.top
        anchors.topMargin: 8
        font.pixelSize: 20
    }

    Slider {
        id: slider
        x: 179
        y: 10
        width: 302
        height: 22
        value: 0.5
    }

    Text {
        id: txtValue
        x: 517
        width: 45
        height: 15
        color: "#ffffff"
        text: qsTr("Text")
        anchors.top: parent.top
        anchors.topMargin: 8
        font.pixelSize: 20
    }

    Button {
        id: button
        x: 694
        y: 10
        text: qsTr("Button")
    }
}