QT Le signal QML n'atteint pas un Canvas lorsqu'il est défini dans le style: ButtonStyle

Question

Je suis relativement nouveau à QML et j'essaye de faire un QML Button changer son arrière-plan quand un événement se produit. Le Button utilise style: ButtonStyle et un Canvas pour générer des graphiques (via JavaScript). J'utilise QML State s pour contrôler l'état Button.

je me suis dit que la Canvas ne rafraîchit pas automatiquement alors j'ai essayé d'appeler requestPaint() dans le gestionnaire onStateChanged, mais ce signal ne pas obtenir en quelque sorte à la toile lorsqu'elle est définie dans la propriété style.

Voici mon code:

Button { 
    id: small_rounded_button 
    state: "OFF" 
    states: [ 
     State { 
      name: "ON" 
      PropertyChanges { 
       target: small_rounded_button 
       backgroundColor: "#18243C" 
      } 
     }, 
     State { 
      name: "OFF" 
      PropertyChanges { 
       target: small_rounded_button 
       backgroundColor: "#aaa" 
      } 
     } 
    ] 

    MouseArea { 
     anchors.fill: parent 
     onClicked: { 
      if (small_rounded_button.enabled == true) 
      { 
       if (small_rounded_button.state == "ON") 
       { 
        small_rounded_button.state = "OFF" 
       } 
       else 
       { 
        small_rounded_button.state = "ON" 
       } 
      } 
     } 
    } 

    style: ButtonStyle { 
     background: Item { 
      Canvas { 
       anchors.fill: parent 
       onPaint: { 
        var ctx = getContext("2d"); 
        ctx.reset(); 

        ctx.beginPath(); 
        ctx.lineWidth = height * 0.1; 
        ctx.roundedRect(ctx.lineWidth/2, ctx.lineWidth/2, 
            width - ctx.lineWidth, height - ctx.lineWidth, small_rounded_button.radius, small_rounded_button.radius); 
        ctx.strokeStyle = "grey"; 
        ctx.stroke(); 

        /* this definitely sets the colour when app starts */ 
        ctx.fillStyle = small_rounded_button.backgroundColor; 

        ctx.fill(); 
       } 

       /* This never happens */ 
       onStateChanged: { 
        requestPaint() 
       } 
      } 

      Label { 
       text: small_rounded_button.text 
       color: "#000" 
       font.pixelSize: small_rounded_button.height * 0.5 
       //anchors.centerIn: parent 
      } 
      label: null 
     } 
    } 
} 

Merci à l'avance pour toute aide,

Greg

Answer 1

vous mis en œuvre dans votre gestionnaire onStateChangedCanvas, qui ne change pas l'état, mais votre Button fait.

Vous pouvez utiliser des signaux et slots pour archiver ce que vous voulez:

Canvas { 
    Component.onCompleted: { 
     small_rounded_button.stateChanged.connect(requestPaint); 
    } 
} 

Quoi qu'il en soit, il y avait plus de problèmes dans votre code, voici une version fonctionne correctement:

import QtQuick 2.0 
import QtQuick.Controls 1.3 
import QtQuick.Controls.Styles 1.3 

Button { 
    id: small_rounded_button 
    property string backgroundColor : "#f0f" 
    state: "OFF" 
    states: [ 
     State { 
      name: "ON" 
      PropertyChanges { 
       target: small_rounded_button 
       backgroundColor: "#18243C" 
      } 
     }, 
     State { 
      name: "OFF" 
      PropertyChanges { 
       target: small_rounded_button 
       backgroundColor: "#aaa" 
      } 
     } 
    ] 

    MouseArea { 
     anchors.fill: parent 
     onClicked: { 
      if (small_rounded_button.enabled == true) 
      { 
       if (small_rounded_button.state == "ON") 
       { 
        small_rounded_button.state = "OFF" 
       } 
       else 
       { 
        small_rounded_button.state = "ON" 
       } 
      } 
     } 
    } 

    style: ButtonStyle { 
     background: Item { 
      Canvas { 
       Component.onCompleted: { 
        requestPaint(); 
        small_rounded_button.stateChanged.connect(requestPaint); 
       } 
       anchors.fill: parent 
       onPaint: { 
        var ctx = getContext("2d"); 
        ctx.reset(); 

        ctx.beginPath(); 
        ctx.lineWidth = height * 0.1; 
        ctx.roundedRect(ctx.lineWidth/2, ctx.lineWidth/2, 
        width - ctx.lineWidth, height - ctx.lineWidth, small_rounded_button.radius, small_rounded_button.radius); 
        ctx.strokeStyle = "grey"; 
        ctx.stroke(); 

        /* this definitely sets the colour when app starts */ 
        ctx.fillStyle = small_rounded_button.backgroundColor; 

        ctx.fillRect(0, 0, width, height); 
       } 

      } 

      Label { 
       text: small_rounded_button.text 
       color: "#000" 
       font.pixelSize: small_rounded_button.height * 0.5 
       //anchors.centerIn: parent 
      } 
     } 
    } 
}