如何在 QML 中使用 ListView 和自定义对象？答案

【问题标题】：How to use ListView with custom object in QML?如何在 QML 中使用 ListView 和自定义对象？
【发布时间】：2018-01-06 05:11:20
【问题描述】：

目前我正在通过 PyQT 使用 QT 框架。我创建了一个自定义对象（从 QObject 继承）并且可以按照 QML 的预期使用它。我还在 QML 中创建了一个委托，它负责这个对象的视觉表示，并且也按预期工作。

但是，现在我想在 ListView 中（再次在 QML 中）显示其中几个对象的列表（以及在委托中定义的表示）。我似乎无法弄清楚这是怎么可能的，所以有人可以给我一些指示吗？

提前感谢您的宝贵时间。

编辑：为了回应一些反应，我将尝试通过一个示例来澄清我想要实现的更多目标。这里我们有一个矩形（这只是为了清楚起见，通常这将是我的自定义对象），它有一个自定义属性 (customText) 和一个简单定义布局的委托，两者都可以工作。

ListView {
    height: 1000
    model: Rectangle {
            property string customText: "1.jpg"
        }
    delegate: Rectangle {
        width: 200
        height: 200
        Text {
            anchors.fill: parent
            text: model.customText
        }
    }
}

但是，现在我基本上不想要一个矩形（这在 ListView 中没有多大意义），而是其中几个在例如列表中。我期望的是我必须将模型更改为这样的东西，但随后我得到 “无法将多个值分配给单个属性”：

    model: [Rectangle {
            property string customText: "1.jpg"
        },
        Rectangle {
            property string customText: "1.jpg"
        },
        Rectangle {
            property string customText: "1.jpg"
        }]

如果您需要更多信息，请告诉我。

【问题讨论】：

为什么不在这里发布所有与问题相关的代码，而不是解释呢？
一种方法是从QAbstractListModel 继承并定义一个模型来提供每个对象的属性。
@folibis 因为我尝试了很多，但我不知道哪个代码最接近我真正想要的，所以我想我实际上是在寻找 QT 是如何解决这个问题的。但是，我现在包含了一个代码 sn-p，它应该可以稍微澄清一下这个问题。
你不能在 JS 数组的声明中创建这样的对象。QT 是如何解决这个问题的 就像 Velkan i> 建议 - 创建一个 QAbstractListModel 的后代来保存您的数据。您创建的QObject 的属性应转换为roles。
好的，根据documentation model 可以是ListModel、XmlListModel 或VisualItemModel。在您的情况下，VisualItemModel 更适合您的需求。有关更多信息，请参阅this example。

标签： listview pyqt qml qobject

【解决方案1】：

您可以使用ListModel 和ListElement qml 类型。自定义模型的示例实现：

ListModel {
    id: modelElement
    ListElement { customText : "1.jpg"}
    ListElement { customText : "2.jpg"}
    ListElement { customText : "3.jpg"}
    ListElement { customText : "4.jpg"}
}

ListView {
    height: 1000
    model: modelElement
    delegate: Rectangle { // You can use your custom object here
        width: 200
        height: 200
        Text {
            anchors.fill: parent
            text: customText
        }
    }
}

ListElement 表示列表中的项目，这些项目将使用 ListView 或 Repeater 项目 Ref 显示。

您可以将自定义对象定义为delegate，然后将customText 分配给Text 元素。

【讨论】：