ExclusiveGroup in Button

[beemaneni]

Hi
I just need some hands on this as i am struggling to overcome.Here is my requirement.I have four buttons in a row loaded with images by default.Up on clicking the button i am loading one more image.All these are fine.But i need to get back to default image on button 1 wen i click on second button and new image on second button should appear.I came across Exclusive group in qml which is similar to QButtonGroup in Qt.But i could not draw the functionality out of it? can anybody help on this?

Here is my sample
 
 ExclusiveGroup{
        id: excGroup
    }
    ButtonImage{
        id: homeImage
        anchors { left: parent.left;}
        btnImageSelected: "qrc:/Images/home_active.png"
        btnImageNormal: "qrc:/Images/home.png"
        btnHeight: 100
        btnWidth: 130
       btnGroup: excGroup[/COLOR]
    }
 
    ButtonImage{
        id: servicesImage
        anchors { left: parent.left;leftMargin: 140}
        btnImageSelected: "qrc:/Images/services_active.png"
        btnImageNormal: "qrc:/Images/services.png"
        btnHeight: 100
        btnWidth: 130
        btnGroup: excGroup
    }

Here is my sample

 ExclusiveGroup{
        id: excGroup
    }
    ButtonImage{
        id: homeImage
        anchors { left: parent.left;}
        btnImageSelected: "qrc:/Images/home_active.png"
        btnImageNormal: "qrc:/Images/home.png"
        btnHeight: 100
        btnWidth: 130
       btnGroup: excGroup[/COLOR]
    }

    ButtonImage{
        id: servicesImage
        anchors { left: parent.left;leftMargin: 140}
        btnImageSelected: "qrc:/Images/services_active.png"
        btnImageNormal: "qrc:/Images/services.png"
        btnHeight: 100
        btnWidth: 130
        btnGroup: excGroup
    }

To copy to clipboard, switch view to plain text mode 

Thanks in Advance

[joko]

I suggest to create an alias for the image source and add another bool property (example selected) which will handle the change of image source, default value is false. And use the clicked signal of ButtonImage to change the selected property value.

ButtonImage{
        id: homeImage
        anchors { left: parent.left;}
        source: selected ? "qrc:/Images/home_active.png" : "qrc:/Images/home.png"
        btnHeight: 100
        btnWidth: 130
 
        onClicked: selected = !selected
 
    }

ButtonImage{
        id: homeImage
        anchors { left: parent.left;}
        source: selected ? "qrc:/Images/home_active.png" : "qrc:/Images/home.png"
        btnHeight: 100
        btnWidth: 130

        onClicked: selected = !selected

    }

To copy to clipboard, switch view to plain text mode 

[wysota]

This is the easiest solution:

Item {
  id: root
  property Item currentItem: null
 
  Image {
    source: root.current = this ? "selected" : "normal"
    MouseArea { anchors.fill: parent; onClicked: root.currentItem = parent }
  }
 
  Image {
    source: root.current = this ? "selected" : "normal"
    MouseArea { anchors.fill: parent; onClicked: root.currentItem = parent }
  }
}

Item {
  id: root
  property Item currentItem: null

  Image {
    source: root.current = this ? "selected" : "normal"
    MouseArea { anchors.fill: parent; onClicked: root.currentItem = parent }
  }

  Image {
    source: root.current = this ? "selected" : "normal"
    MouseArea { anchors.fill: parent; onClicked: root.currentItem = parent }
  }
}

To copy to clipboard, switch view to plain text mode