QML制作圆形的按钮，并带图片

按钮代码如下

import QtQuick 2.15

Rectangle{
    property string imageSource : image.source

    signal buttonClicked()

    id:circleButton
    anchors.fill: parent
    color:"#4091E8"
    radius:width/2

    Image{
        id:image
        x:(circleButton.width - width) / 2
        y:(circleButton.height - height) / 2
        width: parent.width / 2
        height: parent.height / 2
        fillMode: Image.PreserveAspectFit
        horizontalAlignment: Image.AlignHCenter
        verticalAlignment: Image.AlignVCenter
        source: imageSource
    }

    MouseArea {
        id: mouseArea
        anchors.fill: parent
        hoverEnabled: true // 启用悬停事件

        onEntered: {
            circleButton.color = "#7DB8FF"; // 鼠标进入时改变颜色
        }

        onExited: {
            circleButton.color = "#6CADFF"; // 鼠标离开时恢复颜色
        }

        onPressed: {
            circleButton.color = "#6CADFF";
        }

        onReleased: {
            circleButton.color = "#7DB8FF";
        }

        onClicked:{
            circleButton.buttonClicked();
        }
    }
}

应用代码如下

Rectangle{
          x:2 * rectText.width  / 3 + 20
          width: 45
          height: 45
          color:"transparent"
          ircleButton{
                    imageSource: "resources/Add.png"
                    onButtonClicked: {
                        console.log("onClicked add")
                    }
                }
            }