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

Posted 2023-02-16

【中文标题】如何在qt qml中更改地图上代表组件的颜色

【英文标题】：How to change colour of delegate component on map in 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);
            
        
    
   

【问题讨论】：

这段代码已经这样做了：将点击标记的颜色从红色变为绿色......更精确。你想达到什么目标？

当我点击那个矩形组件时，我想改变它的颜色。我的代码中有三个矩形组件。当我单击第一个矩形时，它变为绿色，其他两个为红色。当我单击第二个矩形时，我想更改第二个矩形的颜色，第一个和第三个变为红色。但是在我的代码中，当我首先单击第二个矩形时，它仍然是绿色的。如何使第一个和第三个矩形变为红色，并且仅将单击的矩形变为红色

【参考方案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) 中的状态，并尝试为您的标记实现某种“正常”和“选定”状态。

【讨论】：

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