QML之带回弹的button按钮

1.先qml自带的button上扩展一个ButtonExt.qml

import QtQuick 2.0
import QtQuick.Controls 2.0
import QtGraphicalEffects 1.0

Button {
    id: root

    property color backgroundDefaultColor: "#FFFFFF"
    property color backgroundPressedColor: Qt.darker("#4E5BF2", 1.2)
    property color contentItemTextColor: "black"
    property bool  pressing: false

    text: "Button"
    contentItem: Text {
        text: root.text
        color: root.contentItemTextColor
        font.pixelSize: 15
        font.family: "Arial"
        font.weight: Font.Thin
        horizontalAlignment: Text.AlignHCenter
        verticalAlignment: Text.AlignVCenter
        elide: Text.ElideRight
    }

    background: Rectangle {
        implicitWidth: 83
        implicitHeight: 37
        color: pressing ? root.backgroundPressedColor : root.backgroundDefaultColor
        radius: 3
        layer.enabled: true
        layer.effect: DropShadow {
            transparentBorder: true
            color: !pressing ? root.backgroundPressedColor : root.backgroundDefaultColor
            samples: 20
        }
    }
}

2.引用和使用这个控件

ButtonExt
            {
                id:grade1
                implicitHeight: 40
                implicitWidth: 80
                text:"1级"

                onClicked: {
                    pressing = !pressing
                }

            }

3.效果如下