QML wie Farbe eingestellt in einem mouseArea

Question

Ich möchte folgende Tasten-Layout entwerfen:

Es hat ein Bild Restart-Taste oben auf einem blauen Hintergrund gelegt. Ich möchte dasselbe in Qt mit QML replizieren. Ich benutze ein MouseArea Qt Quick-Objekt, über das ich das Bild in Stretch Füllmodus überlappen. Es gibt jedoch keine Möglichkeit, einen blauen Hintergrund für den Mausbereich zu erhalten. Derzeit sieht es wie folgt aus:

Der entsprechende Code für die gleiche:

MouseArea { 
    id: restartbutton 
    x: 669 
    width: 50 
    height: 50 
    opacity: 1 
    antialiasing: false 
    hoverEnabled: true 
    anchors.top: parent.top 
    anchors.topMargin: 8 
    z: 1 

    Image { 
     id: image2 
     anchors.fill: parent 
     source: "restart_icon.png" 
    } 

} 

Wie kann ich den Hintergrund für MouseArea hier?

Answer 1

Vielleicht möchten Rectangle wie folgt verwenden:

Rectangle { 
    width:50 
    height: 50 
    Image { 
    anchors.fill:parent 
    source: "restart_icon.png" 
    } 
    MouseArea { 
    anchors.fill:parent 
    onClicked: {...} 
    } 
} 

Werfen Sie einen Blick auf die QML Advanced Tutorial für weitere Informationen