如何在mouseArea中设置颜色

Question

我想设计以下按钮布局：

​

​

它有一个重新启动按钮图像放在蓝色背景之上。我希望使用QML在Qt中复制相同的内容。我使用的是一个MouseArea Quick，在此对象上，我在拉伸填充模式下重叠图像。但是，没有为鼠标区域获取蓝色背景的选项。目前的情况如下：

​

​

相同的相应代码：

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

}

如何在这里设置MouseArea的背景？

Answer 1

您可能需要这样使用Rectangle：

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

查看QML高级教程以获取更多信息

Answer 2

我认为这样读起来更容易：

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