如何为qml中动态创建的组件分配订购号？

Question

我的代码（实际上是一个官方示例）可以在我单击的点上绘制标记和折线。我希望每个标记都有自己的文本来表示其顺序。例如，文本“ 1”代表第一个标记，文本“ 2”代表第二个标记。但是Text的markerCount（在componentCreation.js中声明）没有增加，因此标记的所有Text均为“ 1”，这是默认值。

在代码中，作为MapQuickItem子级的Rectangle表示一个标记，并由createElements（）（componentCreation.js）动态创建。 markerCount ++在Component.onCompleted中实现。

代码是：

componentCreation.js

var arrayLines = []
var lineComplete = false
var markerCount = 1

function createElements(point) {

    console.log(markerCount)
    var componentMarker = Qt.createComponent("Marker.qml");

    if (componentMarker.status === Component.Ready) {
        var markerFirstCorner = componentMarker.createObject(map);
        markerFirstCorner.coordinate = map.toCoordinate(point)

        map.addMapItem(markerFirstCorner)
    } else {
        console.log("Marker not created")
    }

    var theLine

    if (arrayLines.length === 0) {
        createLine(point)
    } else {
        theLine = arrayLines[arrayLines.length-1]

        theLine.mainPolyline.addCoordinate(map.toCoordinate(point))
    }
}

function createLine(point){

    var componentLine = Qt.createComponent("Line.qml")

    if (componentLine.status === Component.Ready) {
        var lineFirstCorner = componentLine.createObject(map);
        lineFirstCorner.mainPolyline.addCoordinate(map.toCoordinate(point))

        map.addMapItem(lineFirstCorner)
        arrayLines.push(lineFirstCorner)
    } else {
        console.log("Line not created")
    }
}

main.qml

import QtQuick 2.11
import QtQuick.Window 2.11
import QtLocation 5.11
import QtPositioning 5.8
import QtQuick.Controls 2.1

import "componentCreation.js" as MyScript

ApplicationWindow {
    id: applicationWindow
    visible: true
    width: 640
    height: 480

    Plugin {
        id: mapPlugin
        name: "googlemaps"
    }

    Map {
        id: map
        anchors.fill: parent
        zoomLevel: 12
        plugin: mapPlugin
        center: QtPositioning.coordinate(35.8926195, 128.6000172)

        MouseArea{
            id: mouseArea
            anchors.fill: parent
            z: 1
            onClicked: {
                console.log("Before creation : " + MyScript.markerCount)
                var point = Qt.point(mouse.x, mouse.y)
                console.log()
                console.log("You clicked : " + map.toCoordinate(point))
                MyScript.createElements(Qt.point(mouse.x,mouse.y))
            }
        }
    }
}

Marker.qml

import QtQuick 2.0
import QtLocation 5.11

import "componentCreation.js" as MyScript

MapQuickItem {

    property alias marker: marker

    id: marker
    sourceItem: Rectangle {
        width: 50
        height: 50
        color: "transparent"
        Image {
            anchors.fill: parent
            source: "images/drone.svg" // Ignore warnings from this
            sourceSize: Qt.size(parent.width, parent.height)
        }
        Text {
            anchors.fill: parent
            text: { MyScript.markerCount }
        }

        Component.onCompleted: {
            MyScript.markerCount++
            console.log("markerCount: " + MyScript.markerCount)
        }
    }
    opacity: 1.0
    anchorPoint: Qt.point(sourceItem.width/2, sourceItem.height/2)
}

Line.qml

import QtQuick 2.0
import QtLocation 5.8

MapPolyline {

    property alias mainPolyline: mainPolyline

    id: mainPolyline
    line.width: 3
    line.color: 'black'
}

我是Qt和Qml的新手。我不知道为什么markerCount不增加。请告诉我为什么，或者给我另一种订购标记的方法。

谢谢您的帮助。

Answer 1

如果要存储大量信息，您会使自己过于复杂，正确的做法是使用模型（在这种情况下为ListModel）和视图（在这种情况下为MapItemView） ，它具有Marker作为委托，然后使用一个属性来保存通过使用模型的count属性获得的索引：

Marker.qml

import QtQuick 2.0
import QtLocation 5.11

MapQuickItem {
    id: marker
    property alias text: txt.text
    sourceItem: Rectangle {
        width: 50
        height: 50
        color: "transparent"
        Image {
            anchors.fill: parent
            source: "images/drone.svg" // Ignore warnings from this
            sourceSize: Qt.size(parent.width, parent.height)
        }
        Text {
            id: txt
            anchors.fill: parent
        }
    }
    opacity: 1.0
    anchorPoint: Qt.point(sourceItem.width/2, sourceItem.height/2)
}

main.qml

import QtQuick 2.11
import QtQuick.Window 2.11
import QtLocation 5.11
import QtPositioning 5.8
import QtQuick.Controls 2.1

ApplicationWindow {
    id: applicationWindow
    visible: true
    width: 640
    height: 480
    Plugin {
        id: mapPlugin
        name: "googlemaps"
    }
    ListModel{
        id: md
    }
    Map {
        id: map
        anchors.fill: parent
        zoomLevel: 12
        plugin: mapPlugin
        center: QtPositioning.coordinate(35.8926195, 128.6000172)
        MapItemView{
            model: md
            delegate: Marker{
                text: title
                coordinate: QtPositioning.coordinate(coords.latitude, coords.longitude)
            }
        }
        Line{
            id: li
        }

        MouseArea{
            id: mouseArea
            anchors.fill: parent
            z: 1
            onClicked: {
                var point = Qt.point(mouse.x, mouse.y)
                var coord = map.toCoordinate(point);
                var text = md.count + 1;
                md.append({"coords": coord, "title": text})
                li.addCoordinate(coord)
            }
        }
    }
}

Line.qml

import QtQuick 2.0
import QtLocation 5.8

MapPolyline {
    id: mainPolyline
    line.width: 3
    line.color: 'black'
}