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

Posted 2023-02-17

【中文标题】QML - 将 ListView 与动态生成的 ListElement 一起使用

【英文标题】：QML - Using ListView with dynamically generated ListElement

【发布时间】：2020-09-02 22:41:37

【问题描述】：

我有这个带有 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 ))
            
        

    

LightControls.qml 是：

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")
    

我想要一个干净的可滚动列表，其中显示生成的每个项目。我已经研究过使用中继器而不是列表，但是列表中的元素比屏幕上所需的要多。运行程序时，一切都乱成一团乱七八糟：

【参考方案1】：

您的代码存在一些较大的问题：

您正在尝试将视觉项目添加到 ListModel，它需要 ListElement 对象。您可以使用append() 向ListModel 添加行。 您的根代理项是Rectangle，它不管理其子项的布局。请改用RowLayout 或Row。 您的代表应该是delegate: LightControls 。

【讨论】：

仍然没有运气.. 对于 #1 是不是 listModel.append(component.createObject(lightList, light_name: lights[i].getName )) 完成了这个（用这个对象向模型添加行？我已经完成了 #2 和 3，但它仍然混乱在上面 -尽管将根代表更改为 Row 似乎在混乱中组织项目稍微好一些

在您的示例中，您正在创建一个 Rectangle 组件 (LightControls.qml) 并尝试将其附加到 ListModel，这将永远无法工作。看看doc.qt.io/qt-5/…。

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

同样的事情； Row 是一种视觉类型。 ListModel 仅支持 ListElement 或 JS 对象（如文档所示）。当我说“向ListModel 添加行”时，我的意思是模型行，这是Row 项目的独立概念。您是否阅读了我在回答和之前的评论中链接到的文档？它解释了如何做你需要的。