Qt QML: Keyboard and mouse does not work together to change the source image

Question

I am struggling with a problem, I guess its not so difficult but I am not able to solve it. My experience with QML is very small. I will appreciate your help.

I have three radio buttons as images. Focus moves among the radio buttons as I press the keys and so the buttons are highlighted. ( As focus of the radio button changes the source images also change so the radio button with the focus will be highlighted with an other image).

Problem: When I interact with the mouse (see source code) the source (image) does not change any more…..no idea… while the source was changing before mouse interaction. I checked the in the debugger the source line is never reached after mouse interaction.

I guess its not the right way to change to source image…Please help me to solve it or give me a suggestion for an alternative

Rectangle { //main container
    id: rectangle1
    x: 0
    y: 0

    width: 480
    height: 620
    color: "#ffffff"
   Item { // focus scope container
       id: focus_object
       focus : true

       Image { //  radio button 1
           id: rock
           x: 5
           y: 6
           fillMode: Image.PreserveAspectFit
           smooth: true
           focus:true
           source: focus ? "Radiobutton_unselected_highlighted.png" : "Radiobutton_unselected.png"


           KeyNavigation.right: pop


           MouseArea {
               anchors.fill: parent
               hoverEnabled: true
               onEntered: {
                   parent.source = "Radiobutton_unselected_highlighted.png"
               }
               onExited: {
                   parent.source = "Radiobutton_unselected.png"
               }
               onClicked:{
                }
           }
       }

       Image { // radio button 2
           id: pop
           x: 160
           y: 6
           width: 64
           height: 64
           fillMode: Image.PreserveAspectFit
           smooth: true
           source: focus ?  "Radiobutton_unselected_highlighted.png" : "Radiobutton_unselected.png"




           KeyNavigation.left: rock

           KeyNavigation.right: classic

           MouseArea {
               anchors.fill: parent
               hoverEnabled: true
               onEntered: {
                   parent.source = "Radiobutton_unselected_highlighted.png"
               }
               onExited: {
                   parent.source = "Radiobutton_unselected.png"
               }
               onClicked:{

               }

       }
       Image { // radio button 3
               id: classic
               x: 306
               y: 6
               width: 64
               height: 64
               fillMode: Image.PreserveAspectFit
               smooth: true

               source :  focus ? "Radiobutton_unselected_highlighted.png" : "Radiobutton_unselected.png"
               KeyNavigation.left: pop

               MouseArea {
                   anchors.fill: parent
                   hoverEnabled: true
                   onEntered: {
                       if (true == focus)
                       parent.source = "Radiobutton_unselected_highlighted.png"

                   }
                   onExited: {
                       parent.source = "Radiobutton_unselected.png"
                   }
                   onClicked:{

                   }
               }
           }
       }
    }


  }

Amit Tomar Amit Tomar · Accepted Answer · 2013-05-03T04:41:01

Please note that you are using : , and not an assignment operator = here -

source: focus ? "Radiobutton_unselected_highlighted.png" : "Radiobutton_unselected.png"

This means you are establishing a binding, and not just assigning a fixed value to the property.

So if you have something like

x : y

when you want to change property 'x', instead of changing the property directly, change the property 'y' on which this property 'x' depends, or is binded with.

For your case -

Image 
{ //  radio button 1
       id: rock
       x: 5
       y: 6
       fillMode: Image.PreserveAspectFit
       smooth: true
       focus:true
       source: focus ? "Radiobutton_unselected_highlighted.png" : "Radiobutton_unselected.png"   

       KeyNavigation.right: pop

       MouseArea 
       {
           anchors.fill: parent
           hoverEnabled: true
           onEntered: 
           {
              rock.focus = true
           }

           onExited: 
           {
              rock.focus = false                    
           }

           onClicked:
           {

           }
       }
}

Read about qml property binding in detail.

Qt QML: Keyboard and mouse does not work together to change the source image

1 Answers