qt qml 自定义圆形按钮


上图为效果图

支持windows,android,ios

代码如下

 

import QtQuick 2.0

Item {
    property color borderColor: "black"
    property color pressedBorderColor: "#333833"
    property color bgColor: "white"
    property color pressedBgColor: "#98aa99"
    property url imgSource: ""
    signal clicked()

    id: root
    width: 100
    height: 100
    Rectangle
    {
        id: body
        anchors.fill: parent
        radius: width
        border.width: width * 0.05
        border.color: borderColor

        MouseArea{
            hoverEnabled: true
            anchors.fill: parent
            onPressed:{
                body.border.color = pressedBorderColor
                body.color= pressedBgColor
                root.clicked()
            }
            onReleased: {
                body.border.color = borderColor
                body.color= bgColor
            }
        }

        Image {
            id: name
            width: parent.width * 0.6
            height: parent.height * 0.6
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.horizontalCenterOffset: parent.width * 0.05
            anchors.verticalCenter: parent.verticalCenter
            anchors.alignWhenCentered: false
            source: imgSource
        }
    }
}