如何在qt qml中更改地图上代表组件的颜色答案

【问题标题】：How to change colour of delegate component on map in qt qml如何在qt qml中更改地图上代表组件的颜色
【发布时间】：2020-04-23 10:39:20
【问题描述】：

我在地图上使用 MapQuickItem 作为委托组件。我有三个组件。单击组件时，我想更改委托组件的颜色。其余颜色相同。如何更改仅选定组件颜色的颜色

 Plugin
{
    id: hereMaps
    name: "here"
    PluginParameter { name: "here.app_id"; value: "oBB4FivcP23m2UZQCj8K" }
    PluginParameter { name: "here.token"; value: "P-D8XRRGeVt0YphUuOImeA" }
}

Map {
    id: map
    anchors.fill: parent
    activeMapType: supportedMapTypes[1];
    zoomLevel: 18
    plugin: hereMaps
    center: QtPositioning.coordinate(19.997454, 73.789803)

    MapItemView {
        id: markerItem
        model: [
            { id: "marker1", color: "red" },
            { id: "marker2", color: "red" },
            { id: "marker3", color: "red" }
        ]
        delegate: mapMarkerComponent
    }

    Component {
        id : mapMarkerComponent

        MapQuickItem {
            id: mapMarker
            coordinate: QtPositioning.coordinate(19.997454, 73.789803)

            sourceItem: Rectangle {

                id: handle
                color: modelData.color
                width: 40
                height: 40

                MouseArea {
                    drag.target: parent
                    anchors.fill: parent
                    onClicked: {

                        handle.color = "green"

                    }
                }
            }

            onCoordinateChanged: {
                console.log(modelData.id + ":" + coordinate);
            }
        }
    }
   }

【问题讨论】：

这段代码已经这样做了：将点击标记的颜色从红色变为绿色......更精确。你想达到什么目标？
当我点击那个矩形组件时，我想改变它的颜色。我的代码中有三个矩形组件。当我单击第一个矩形时，它变为绿色，其他两个为红色。当我单击第二个矩形时，我想更改第二个矩形的颜色，第一个和第三个变为红色。但是在我的代码中，当我首先单击第二个矩形时，它仍然是绿色的。如何使第一个和第三个矩形变为红色，并且仅将单击的矩形变为红色

标签： qt qml maps qqmlcomponent

【解决方案1】：

最明显的方法是遍历所有标记并重置它们的颜色，然后更改单击标记的颜色。为此，请将onClicked 更改为：

// switch to red if its green
if (handle.color == "#008000") {
    handle.color = "#ff0000";
    return;
}
// switch all markers to red
for(var marker in markerItem.children) {
    markerItem.children[marker].sourceItem.color = "#ff0000";
}
// switch clicked marker to green
handle.color = "#008000";

但是，如果您想“选择”标记，这不是最好的解决方案（操纵颜色）。阅读 QML (link) 中的状态，并尝试为您的标记实现某种“正常”和“选定”状态。

【讨论】：

得到了解决方案！谢谢！！