QML嵌套矩形

Question

目标：

我有一个以嵌套矩形作为数据的XML文件。每个矩形都有x和y坐标以及宽度和高度。这些嵌套矩形的深度是未知的，可能是1或XML嵌套元素的限制。在下面的示例中，深度只有4，但对于实际数据，它是未知的。在

<?xml version="1.0" encoding="UTF-8"?>
<rect x="0" y="0" width="600" height="200" name="scan">
    <rect name="keyboard" x="0" y="50" width="450" height="150" >
        <rect x="0" y="50" width="150" height="50" name="eta">
            <rect x="0" y="0" width="50" height="50" name="e">
            </rect>
            <rect x="50" y="0" width="50" height="50" name="t">
            </rect>
            <rect x="100" y="0" width="50" height="50" name="a">
            </rect>
        </rect>
        <rect x="150" y="50" width="150" height="50" name="oin">
            <rect x="0" y="0" width="50" height="50" name="o">
            </rect>
            <rect x="50" y="0" width="50" height="50" name="i">
            </rect>
            <rect x="100" y="0" width="50" height="50" name="n">
            </rect>
        </rect>
        <rect x="300" y="50" width="150" height="50" name="shr">
            <rect x="0" y="0" width="50" height="50" name="s">
            </rect>
            <rect x="50" y="0" width="50" height="50" name="h">
            </rect>
            <rect x="100" y="0" width="50" height="50" name="r">
            </rect>
        </rect>
        <rect x="0" y="100" width="150" height="50" name="dlc">
            <rect x="0" y="0" width="50" height="50" name="d">
            </rect>
            <rect x="50" y="0" width="50" height="50" name="l">
            </rect>
            <rect x="100" y="0" width="50" height="50" name="c">
            </rect>
        </rect>
        <rect x="150" y="100" width="150" height="50" name="umw">
            <rect x="0" y="0" width="50" height="50" name="u">
            </rect>
            <rect x="50" y="0" width="50" height="50" name="m">
            </rect>
            <rect x="100" y="0" width="50" height="50" name="w">
            </rect>
        </rect>
        <rect x="300" y="100" width="150" height="50" name="fgy">
            <rect x="0" y="0" width="50" height="50" name="f">
            </rect>
            <rect x="50" y="0" width="50" height="50" name="g">
            </rect>
            <rect x="100" y="0" width="50" height="50" name="y">
            </rect>
        </rect>
        <rect x="0" y="150" width="150" height="50" name="pbv">
            <rect x="0" y="0" width="50" height="50" name="p">
            </rect>
            <rect x="50" y="0" width="50" height="50" name="b">
            </rect>
            <rect x="100" y="0" width="50" height="50" name="v">
            </rect>
        </rect>
        <rect x="150" y="150" width="150" height="50" name="kjx">
            <rect x="0" y="0" width="50" height="50" name="k">
            </rect>
            <rect x="50" y="0" width="50" height="50" name="j">
            </rect>
            <rect x="100" y="0" width="50" height="50" name="x">
            </rect>
        </rect>
        <rect x="300" y="150" width="150" height="50" name="qz">
            <rect x="0" y="0" width="50" height="50" name="q">
            </rect>
            <rect x="50" y="0" width="50" height="50" name="z">
            </rect>
            <rect x="100" y="0" width="50" height="50" name=".">
            </rect>
        </rect>
    </rect>
</rect>

我尝试使用qabstractemodel为这些矩形创建一个模型，并让QML用中继器显示这些矩形。我的目标是在视图中显示这些矩形，根据它们的位置、大小和关系相互重叠。在

实施尝试

经过一些研究，我尝试使用qabstractemmodel将XML数据建模为树，并使用QTreeView显示它们。我成功地显示了QTreeView中每个矩形的所有数据，但是我想画这些矩形。如果我尝试将每个树项委托为矩形，那么这些矩形只是堆叠在另一个上。在

以下是我目前所掌握的python代码：

^{pr2}$

以下是QML文件：

import QtQuick 2.5
import QtQuick.Controls 1.4
import QtQml.Models 2.2
import QtQuick.Window 2.2

ApplicationWindow {
    width: 480
    height: 640
    TreeView {
        id: treeView
        anchors.fill: parent
        anchors.margins: 6
        anchors.top: parent.top
        anchors.horizontalCenter: parent.horizontalCenter

        model: tmodel

        TableViewColumn {
            title: "Name"
            role: "name"
            resizable: true
        }

        TableViewColumn {
            title: "Description"
            role: "description"
            resizable: true
        }
        TableViewColumn {
            title: "Top"
            role: "top"
            resizable: true
        }

        TableViewColumn {
            title: "Left"
            role: "left"
            resizable: true
        }
        TableViewColumn {
            title: "Width"
            role: "width"
            resizable: true
        }

        TableViewColumn {
            title: "height"
            role: "height"
            resizable: true
        }

        TableViewColumn {
            title: "Count"
            role: "count"
            resizable: true
        }
    }
}

问题：

是否可以重新使用QTreeView来显示这些矩形？如果没有，我可以使用中继器来显示当前模型实现的矩形吗？我尝试使用转发器，但子角色返回为QVariant列表，我不知道该如何处理。在

Answer 1

我没有使用您的模型，而是使用QStandardItemModel，因为它更易于使用（我避免测试您的代码）。在QML的例子中，我使用了Repeater、Loaders和DelegateModel的组合，正如this answer所指出的那样。在

主.py

import os
import sys
from PyQt5 import QtCore, QtGui, QtQml
import xml.etree.ElementTree as ET


class XMLModel(QtGui.QStandardItemModel):
    def loadFromPath(self, filename, attributes):
        roles = {}
        for i, attr in enumerate(attributes):
            roles[QtCore.Qt.UserRole + i] = attr.encode()
        self.setItemRoleNames(roles)

        tree = ET.parse(filename)
        root = tree.getroot()
        self.parseXML(root)

    def parseXML(self, element, parent=None):
        if parent is None:
            parent = self.invisibleRootItem()
        it = QtGui.QStandardItem()
        parent.appendRow(it)
        for role, tag in self.roleNames().items():
            value = element.attrib[tag.data().decode()]
            it.setData(value, role)
        for child in element:
            self.parseXML(child, it)

if __name__ == '__main__':
    dir_path = os.path.dirname(os.path.realpath(__file__))
    app = QtGui.QGuiApplication(sys.argv)
    model = XMLModel()
    model.loadFromPath(os.path.join(dir_path, 'rect.xml'), ["name", "x", "y", "width", "height"])
    engine = QtQml.QQmlApplicationEngine()
    ctx = engine.rootContext()
    ctx.setContextProperty("tmodel", model)
    file_path = os.path.join(dir_path, 'simpletreemodel.qml')
    engine.load(QtCore.QUrl.fromLocalFile(file_path))
    if not engine.rootObjects():
        sys.exit(-1)
    sys.exit(app.exec_())

simpletreemodel.qml

^{pr2}$

RectDelegateModel.qml

import QtQml.Models 2.2
import QtQuick 2.5

DelegateModel {
    id: mainModel
    delegate: Rectangle{
        Repeater {
            id: repeater
            model: childrenLoader.item
        }
        x: model.x
        y: model.y
        width: model.width
        height: model.height
        color: Qt.rgba(Math.random(), Math.random(), Math.random(), 1)
        Text {
            anchors.centerIn: parent
            text: model.name
        }
        Loader {
            id: childrenLoader
            asynchronous: true
        }
        Component.onCompleted: {
            if (model && model.hasModelChildren) {
                childrenLoader.setSource("RectDelegateModel.qml", {
                                             "model": mainModel.model,
                                             "rootIndex": mainModel.modelIndex(index)
                                         });
            }
        }
    }
}