委托时 QML XmlListModel 混乱排序

Question

我正在尝试让Canvas 以与此 xml 文件中显示的顺序相同的顺序绘制线条：

<root>
<doc><nopeus>80.0</nopeus><aika>40.0</aika></doc>
<doc><nopeus>110.0</nopeus><aika>80.0</aika></doc>
<doc><nopeus>120.0</nopeus><aika>120.0</aika></doc>
<doc><nopeus>190.0</nopeus><aika>160.0</aika></doc><doc><nopeus>243.0</nopeus><aika>200.0</aika></doc><doc><nopeus>260.0</nopeus><aika>240.0</aika></doc><doc><nopeus>300.0</nopeus><aika>280.0</aika></doc><doc><nopeus>350.0</nopeus><aika>320.0</aika></doc>
</root>

带有 XmlListModel 的 QML 文件：

import QtQuick 2.0
import Sailfish.Silica 1.0
import QtQuick.XmlListModel 2.0

Page {
    id: page
    property alias startx : coords.mX
    property alias starty : coords.mY

    Item {
        id: coords
        property int mX: 0
        property int mY: 0
    }

    XmlListModel {
        id: myxml
        source: "/home/nemo/filename.xml"
        query: "/root/doc"
        XmlRole { name: "nopeus"; query: "nopeus/string()" }
        XmlRole { name: "aika"; query: "aika/string()" }
    }

    ListView {
        model: myxml
        anchors.fill: page
        delegate:
            Item {
                Chart {
                    xc: coords.mX;
                    yc: coords.mY;
                    xd: aika;
                    yd: nopeus;
                }
            }
    }
}

Chart.qml：

import QtQuick 2.0

Rectangle {
    id: myrect
    width: 540
    height: 960
    color: "transparent"

    property int xd: 0
    property int yd: 0
    property int xc: 0
    property int yc: 0

    Canvas {
        id: mycanvas
        width: myrect.width; height: myrect.height;
        onPaint: {
                var context = getContext('2d')
                context.strokeStyle = "#FF0000"
                context.lineWidth = 2
                context.beginPath()
                context.moveTo(xc,yc)
                context.lineTo(xd,yd)
                context.stroke()
                startx = xd
                starty = yd              
         }
    }
}

问题是为什么通过代表插入ListView 时生成的路径会混乱？我尝试通过一个函数和另一个 ListModel 分别对路径项进行排序，但结果是一样的。

这是一个截图：

Answer 1

为模型中的每个项创建代理。您的模型包含 八个 项（根据您的输入）。因此，您创建 八个 Canvases（每个都作为 ListView 项目，即在（理论上）增加 y w.r.t. ListView 原点坐标）。

将这些问题与（可能设置错误的）起点结合起来......你会得到一个随机的混乱！您看不到这一点，因为 Canvases 由于组件上设置的大小/约束往往会重叠。

在这种情况下，您只需要 一个 Canvas，每个 myxml 项目都在其上绘制。这是您的代码的（天真）改编，它正确显示了存储在 xml 文件中的路径：

// main.qml
import QtQuick 2.4
import QtQuick.Window 2.2
import QtQuick.XmlListModel 2.0

Window {
    visible: true
    width: 600
    height: 600

    XmlListModel {
        id: myxml
        source: "qrc:/filename.xml"   // added to the resources
        query: "/root/doc"
        XmlRole { name: "nopeus"; query: "nopeus/string()" }
        XmlRole { name: "aika"; query: "aika/string()" }
        onStatusChanged: {
            if(status === XmlListModel.Ready)
                comp.mod = myxml    // set the model ASA it is ready to be used
        }
    }

    Chart {
        id: comp
        anchors.fill: parent
        mod: myxml
    }
}

// Chart.qml
import QtQuick 2.4
import QtQuick.XmlListModel 2.0

Item {
    property var mod: undefined

    onModChanged: {
        if(mod)
            mycanvas.requestPaint()   // repaint only when the model is available
    }

    Canvas {
        id: mycanvas
        width: parent.width; height: parent.height;
        onPaint: {
            var context = getContext('2d')
            context.strokeStyle = "#FF0000"
            context.lineWidth = 2
            context.beginPath()
            context.moveTo(0,0)
            // iterate over all the point to print them
            for(var i = 0; i < mod.count; i++)
            {
                var point = mod.get(i)
                context.lineTo(point.aika, point.nopeus)
            }
            context.stroke()
        }
    }
}

渲染的结果路径：