I want to design the following button layout:
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:
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?
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