委托时 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

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

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

在这种情况下，您只需要一个 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()
        }
    }
}

呈现的结果路径：

委托时 QML XmlListModel 会弄乱排序

QML XmlListModel messes sorting when delegated

qt

canvas

qml

qtquick2