QML-按钮

这是使用qml实现的按钮，将按钮封住成了一个组件，可以进行设置字体、按钮宽高、颜色等等。同时实现了按钮三态 - 正常状态、悬停状态、点击状态。实现按钮看起来有立体感。

直接看效果

代码如下，直接复制可用

大家帮忙点点赞，谢谢

import QtQuick 2.12
import QtQuick.Controls 2.14

Rectangle{
    anchors.centerIn: parent
    property int setWidth: 400
    property int setHeight: 100
    property string setName: "这是一个按钮"
    property int setFontSize: 15
    property string setFontType: "微软雅黑"
    property int setRadius: 5
    property color setColor: "#0066B4"
    property color setHoverColor: "#1874BA"
    property color setPress: "#3183C1"
    property color setBottomColor: "#054B80"
    property int setBottomHight: 2

    width: setWidth
    height: setHeight
    color: setBottomColor
    radius: setRadius + 2

    Rectangle{
        id: btn
        width: parent.width
        height: parent.height - setBottomHight
        color: setColor
        radius: setRadius

        Text {
            id: name
            anchors.centerIn: parent
            text: qsTr(setName)
            font.family: setFontType
            color: "white"
            font.pointSize: setFontSize
        }

        MouseArea{
            anchors.fill: parent
            hoverEnabled: true
            onClicked: {
                clickAnimation.start()
            }

            onEntered: {
                parent.color = setHoverColor
            }

            onExited: {
                parent.color = setColor
            }
        }

        SequentialAnimation {
            id: clickAnimation
            running: false

            ColorAnimation {
                target: btn
                property: "color"
                to: setPress
                duration: 90
                easing.type: Easing.Linear
            }

            ColorAnimation {
                target: btn
                property: "color"
                to: setHoverColor
                duration: 90
                easing.type: Easing.Linear
            }
        }
    }
}

大家帮忙点点赞，谢谢