QML按钮渐变及多种状态实现（附完整工程）

效果

 QButton.qml

import QtQuick 2.0
Rectangle
{
    id: root
    width: 90
    height: 40
    property alias textSize:buttonText.font.pointSize //导出按钮文字字体大小、颜色、内容等属性
    property alias textColor:buttonText.color
    property alias text:buttonText.text


    signal clicked   //可以在外部通过onClicked:等方式获取按钮状态
    signal released
    signal hovered
    signal pressed

    Text{
        id:buttonText
        text:"Button"
        anchors.centerIn: parent
        color:"white"
        font.pointSize: 15
    }

    gradient:leave.gradient
    //这里想设置不同状态下的渐变，不可以直接在gradient:中通过if判断的方式设置，也不能在MouseArea状态改变时设置，
    //均会报错，只能在下面两个Rectangle中设置，然后状态改变时直接“借用”
    Rectangle{
        id:leave
        gradient: Gradient {
                    GradientStop { position: 0.0;   color: "#787878" }
                    GradientStop { position: 0.495; color: "#000000" }
                    GradientStop { position: 0.495; color: "#000000" }
                    GradientStop { position: 1.0;   color: "#787878" }
              }
    }
    Rectangle{
        id:hover
        gradient: Gradient {
                    GradientStop { position: 0.0;   color: "#AAAAAA" }
                    GradientStop { position: 0.495; color: "#000000" }
                    GradientStop { position: 0.495; color: "#000000" }
                    GradientStop { position: 1.0;   color: "#AAAAAA" }
              }
    }

    MouseArea{
        anchors.fill:parent;
        hoverEnabled:true;
        onPressed: {
            parent.gradient=leave.gradient
            root.pressed()
            }
        onEntered:{
            parent.gradient=hover.gradient
            root.hovered()
        }
        onExited:{
            parent.gradient=leave.gradient
        }
        onReleased:{
            parent.gradient=hover.gradient
            root.released()
        }
        onClicked:
        {
            root.clicked();
        }
    }

}

 main.qml

import QtQuick 2.12
import QtQuick.Window 2.12


Window {
    visible: true
    width: 480
    height: 240
    title: qsTr("Hello QButton")
    QButton{
        id:btn1
        x:100
        y:100
        textSize:15
        onClicked: console.log("---------被点击")
        onPressed: console.log("---被按下")
        onHovered: console.log("*****指针来了*****")
    }
    QButton{
        anchors.left: btn1.right
        anchors.top:btn1.top
        anchors.leftMargin: 4
        text:"胡皓天"
        width:140
        height:40
    }
}

 

文字下沉效果

如果想要按钮被按下时，文字下沉，按钮释放，文字恢复，效果及代码如下：

只需修改QButton.qml几处代码即可，修改后的全部代码如下： 

import QtQuick 2.0
Rectangle
{
    id: root
    width: 90
    height: 40
    property alias textSize:buttonText.font.pointSize //导出按钮文字字体大小、颜色、内容等属性
    property alias textColor:buttonText.color
    property alias text:buttonText.text


    signal clicked   //可以在外部通过onClicked:等方式获取按钮状态
    signal released
    signal hovered
    signal pressed

    Text{
        id:buttonText
        text:"Button"
        visible:false
        anchors.centerIn: parent
        color:"white"
        font.pointSize: 15
    }
    Text{
        id:buttonText1
        text:buttonText.text
        x:buttonText.x
        y:buttonText.y
        color:buttonText.color
        font.pointSize: buttonText.font.pointSize
    }

    gradient:leave.gradient
    //这里想设置不同状态下的渐变，不可以直接在gradient:中通过if判断的方式设置，也不能在MouseArea状态改变时设置，
    //均会报错，只能在下面两个Rectangle中设置，然后状态改变时直接“借用”
    Rectangle{
        id:leave
        gradient: Gradient {
                    GradientStop { position: 0.0;   color: "#787878" }
                    GradientStop { position: 0.495; color: "#000000" }
                    GradientStop { position: 0.495; color: "#000000" }
                    GradientStop { position: 1.0;   color: "#787878" }
              }
    }
    Rectangle{
        id:hover
        gradient: Gradient {
                    GradientStop { position: 0.0;   color: "#AAAAAA" }
                    GradientStop { position: 0.495; color: "#000000" }
                    GradientStop { position: 0.495; color: "#000000" }
                    GradientStop { position: 1.0;   color: "#AAAAAA" }
              }
    }

    MouseArea{
        anchors.fill:parent;
        hoverEnabled:true;
        onPressed: {
            parent.gradient=leave.gradient
            root.pressed()
            buttonText1.x=buttonText1.x+1
            buttonText1.y=buttonText1.y+1
            }
        onEntered:{
            parent.gradient=hover.gradient
            root.hovered()
        }
        onExited:{
            parent.gradient=leave.gradient
        }
        onReleased:{
            parent.gradient=hover.gradient
            root.released()
            buttonText1.x=buttonText1.x-1
            buttonText1.y=buttonText1.y-1
        }
        onClicked:
        {
            root.clicked();
        }
    }

}

两个完整工程链接

链接：https://pan.baidu.com/s/1bPabyFfbtgt-9M6jtv6kIQ 
提取码：0000