QML how to set color in a mouseArea

Question

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?

score 1 · Accepted Answer · answered Jun 14 '17 at 09:06

1

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

answered Jun 14 '17 at 09:06

Xatyrian

1,364
8
26

Hi! To improve this answer, you could *actually set the background color* in your example. – derM - not here for BOT dreams Jun 14 '17 at 09:43
Also it might be better to have the `MouseArea` as the root-node (swap `Rectangle` with `MouseArea`) and then expose the `Rectangle`s `color` as a `property alias background: myRect.color`. The reason is, that the `MouseArea` has more signals and properties that might be relevant to expose, than the `Rectangle`. If you want to have a clean interface and expose only a minimum, a `Item` as root would be the alternative. – derM - not here for BOT dreams Jun 14 '17 at 09:43
Yes this works. And like @derM said better to have MouseArea as root. – Abhishek Agarwal Jun 14 '17 at 10:00

score 0 · Answer 2 · answered Apr 27 '21 at 09:01

I think it is easier to read that way:

   MouseArea { id: clickArea
        anchors {
            fill: parent 
            margins: -10   // optional to enlarge the backgound / click zone
        }
        onClicked: {
            console.log("clicked!")
        }
        Rectangle {  // background, also allowing the click
            anchors.fill: clickArea
            border.color: "black"
            color: "lightblue"
            opacity: 0.3
        }
   }

QML how to set color in a mouseArea

2 Answers2