Qt QML: клавиатура и мышь не работают вместе, чтобы изменить исходное изображение.

Question

Я борюсь с проблемой, я думаю, ее не так сложно, но я не могу ее решить. Мой опыт работы с QML очень мал. Буду признателен за вашу помощь.

У меня есть три переключателя в качестве изображений. Фокус перемещается между переключателями, когда я нажимаю клавиши, и поэтому кнопки подсвечиваются. (Поскольку фокус переключателя изменяется, исходные изображения также изменяются, поэтому переключатель с фокусом будет выделен другим изображением).

Проблема: когда я взаимодействую с мышью (см. Исходный код), источник (изображение) больше не меняется ... ..не идея ... пока источник менялся перед взаимодействием с мышью. Я проверил, что в отладчике исходная строка никогда не достигается после взаимодействия с мышью.

Я думаю, его не правильный путь, чтобы изменить исходное изображение ... Пожалуйста, помогите мне решить эту проблему или дать мне предложение альтернативного

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:{ 

        } 
       } 
      } 
     } 
    } 


    } 

Answer 1

Пожалуйста, обратите внимание, что вы используете :, а не задание оператор = здесь -

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

Это означает, что вы создаете привязку, а не только назначая фиксированное значение свойства.

Так что если у вас есть что-то вроде

x : y 

, когда вы хотите изменить свойство «х», вместо того, чтобы изменить свойство непосредственно изменить свойство «у», на котором это свойство «х» зависит, или связывается с.

В вашем случае -

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: 
      { 

      } 
     } 
}  

Читайте о qml property binding в деталях.