QML | 自定义圆形图片按钮

 在一个项目中需要做一个圆形图片按钮的列表，就自己实现了下。

此按钮有两个自定义属性，分别表示按钮按下时和未按下时候显示的图片，还有一个rbClicked信号为按钮点击的响应信号。

//RoundButton.qml
import QtQuick 2.12
import QtQuick.Controls 2.12

Rectangle {
    id:roundButton
    width: 30  
    height: width
    radius: width / 2

    property url imageUrlHover: ""     //按下显示的图片路径
    property url imageUrlNormal: ""    //正常显示的图片路径
    signal rbClicked           //自定义信号rbClicked,用来表示鼠标点击事件

    color: backcolor
    Image {
        id: img
        anchors.fill: parent
        source: area.containsMouse ? roundButton.imageUrlHover : roundButton.imageUrlNormal
    }

    MouseArea
    {
        id: area
        anchors.fill: parent
        hoverEnabled: parent.enabled
        onClicked:{
            rbClicked()
        }
    }

}

在其他qml中使用

RoundButton{
    id: diskButton
    imageUrlHover: "qrc:/res/disk_hover.png"
    imageUrlNormal: "qrc:/res/disk.png"

    onRbClicked: {
        //响应按钮的点击事件
    }
}