qtqmlqtquick2mousearea

QML how to set color in a mouseArea


I want to design the following button layout:

Link

It has a restart button image laid on top of a blue background. I want to replicate the same in Qt using QML. I am using a MouseArea Qt Quick object over which I am overlapping the image in Stretch fill mode. However there is no option to get a blue background for the mouse area. Currently it looks like this:

Link

The corresponding code for the same:

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"
    }

}

How do I set the background for MouseArea here?


Solution

  • You might want to use Rectangle like this :

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

    Take a look at the QML Advanced Tutorial for further informations