QML listView部分来自代码

Question

我无法用各节实现ListView。我已经成功地重复了

Qt

文档的示例，但是有

ListModel

使用

var

可以正常，但却不行。

如何使用示例：

ListView {
    width: 100
    height: 100
    id: listview
    model: ListModel {
        id: animalsModel
        ListElement { name: "Ant"; size: "Tiny" }
        ListElement { name: "Flea"; size: "Tiny" }
        ListElement { name: "Parrot"; size: "Small" }
        ListElement { name: "Guinea pig"; size: "Small" }
        ListElement { name: "Rat"; size: "Small" }
        ListElement { name: "Butterfly"; size: "Small" }
        ListElement { name: "Dog"; size: "Medium" }
        ListElement { name: "Cat"; size: "Medium" }
        ListElement { name: "Pony"; size: "Medium" }
        ListElement { name: "Koala"; size: "Medium" }
        ListElement { name: "Horse"; size: "Large" }
        ListElement { name: "Tiger"; size: "Large" }
        ListElement { name: "Giraffe"; size: "Large" }
        ListElement { name: "Elephant"; size: "Huge" }
        ListElement { name: "Whale"; size: "Huge" }
    }

    delegate: Text { text: name; font.pixelSize: 18 }

    section.property: "size"
    section.criteria: ViewSection.FullString
    section.delegate: Component {
        id: sectionHeading
        Rectangle {
            width: container.width
            height: childrenRect.height
            color: "lightsteelblue"

            Text {
                text: section
                font.bold: true
                font.pixelSize: 20
            }
        }
    }
}

但是，当我尝试使用代码中的某些模型（在我的情况下是

QVariant

）时，它根本不起作用：

PyQt5

我之所以选择

ListView {
    width: 100
    height: 100
    id: listview
    property var m: [
        {
            name: "Animal",
            size: "Big"
        },
        {
            name: "Dog",
            size: "Small"
        },
        {
            name: "Cat",
            size: "Small"
        }
    ]
    model: m

    delegate: Text { text: modelData.name; font.pixelSize: 18 }

    section.property: "modelData.size"
    section.criteria: ViewSection.FullString
    section.delegate: Component {
        id: sectionHeading
        Rectangle {
            width: container.width
            height: childrenRect.height
            color: "lightsteelblue"

            Text {
                text: section
                font.bold: true
                font.pixelSize: 20
            }
        }
    }
}

在这里选择

var

，因为没有其他方法可以从Python接收模型，因此需要将任何

list

或

map

从

python

中包装为

QVariant

.

。

Answer 1

QT文档：

Model：Model

This property holds the model providing data for the list.
The model provides the set of data that is used to create the items in the view. Models can be created directly in QML using ListModel, XmlListModel or VisualItemModel, or provided by C++ model classes. If a C++ model class is used, it must be a subclass of QAbstractItemModel or a simple list.

因此，您不能提供数组作为模型，它应该是上面的对象之一。 您可以创建此类模型并从Python代码访问/添加/删除项目。

ListView {
    width: 100
    height: 100
    id: listview
    delegate: Text { text: name; font.pixelSize: 18 }

    model: ListModel { id: listModel }

    section.property: "size"
    section.criteria: ViewSection.FullString
    section.delegate: Component {
        id: sectionHeading
        Rectangle {
            width: container.width
            height: childrenRect.height
            color: "lightsteelblue"

            Text {
                text: section
                font.bold: true
                font.pixelSize: 20
            }
        }
    }

    function callFromPython {
        listModel.append({name: "Animal",size: "Big"});
        listModel.append({name: "Dog",size: "Small"});
        listModel.append({name: "Cat",size: "Small"});
    }
}

Answer 2

ListView {
    model: [
        { name: "Animal", size: "Big" },
        { name: "Dog", size: "Small" },
        { name: "Cat", size: "Small" }
    ]
    delegate: ItemDelegate { width: ListView.view.width; text: modelData.name }
    section.property: "size"
    section.delegate: ItemDelegate {
        width: ListView.view.width
        background: Rectangle { color: "lightsteelblue" }
        text: section
        font.bold: true
        font.pointSize: 14
    }
}

您可以在线上