Accessing delegate component of the MapItemView model
-
Im trying to modify the delegate item of the MapItem view model. On Clicked on that item, it's source should be changed while the other items in that view remains same..On clicking the other item,previously changed item should comeback to normal like other items..while currently clicked item should be modified. I succesfully implemented the logic.But,upon running,when i click the 1st item,it is changing the last item and so on.TFor example,when i click the 1st item,on debugging it shows correctly the first item is 1.But,on map,it is modifying the last.the index are reversed.how to solve this.
this is my code snippet:
MapItemView { id:markerItem2 model: routeQuery2.waypoints delegate: MapQuickItem { id:mark2 anchorPoint.x: waypointMarker.width / 2 anchorPoint.y: waypointMarker.height / 2 coordinate: modelData visible: true sourceItem: Image { id: waypointMarker source: "qrc:/resources/images/location.png" width: 32 height: 32 fillMode: Image.PreserveAspectFit z:2 visible:true transformOrigin: Item.Center MouseArea { anchors.fill: parent onClicked :function(mouse) { mouse.accepted=true // Access properties of the clicked item using index //var clickedItemData = markerItem2.model[index]; // Access properties of the clicked item using index var clickedIndex = markerItem2.children[index]; for (var marker in markerItem2.children) { if(markerItem2.model[marker]===markerItem2.model[index]) { console.log(marker) markerItem2.children[marker].sourceItem.source = "qrc:/resources/images/locate_green.png"; }else markerItem2.children[marker].sourceItem.source= "qrc:/resources/images/location.png"; } } } } } }
-
@Vijaykarthikeyan Don't modify delegates directly.
Add a property outside of them and modify that property. Here you can do it with a selectedWaypoint property in the MapItemView, the code is then much simpler:
MapItemView { id: markerItem2 model: routeQuery2.waypoints property int selectedWaypoint: -1 delegate: MapQuickItem { id: mark2 anchorPoint.x: waypointMarker.width / 2 anchorPoint.y: waypointMarker.height / 2 coordinate: modelData sourceItem: Image { readonly property bool isSelected: index === markerItem2.selectedWaypoint source: "qrc:/resources/images/" + (isSelected ? "locate_green.png" : "location.png") width: 32 height: 32 fillMode: Image.PreserveAspectFit z:2 visible:true transformOrigin: Item.Center TapHandler { onTapped: markerItem2.selectedWaypoint = index } } } }
-