QML实现带.阴影按钮

最新推荐文章于 2025-07-25 09:00:00 发布

缘如风

最新推荐文章于 2025-07-25 09:00:00 发布

阅读量3k

点赞数

CC 4.0 BY-SA版权

分类专栏： QML

本文链接：https://blog.youkuaiyun.com/chyuanrufeng/article/details/79381304

QML 专栏收录该内容

31 篇文章

订阅专栏

QML自带的按钮效果不是很好，所以自定义了一个按钮。QML也支持这种高度自定义控件。

主要有阴影效果，悬浮变色和按钮动画。效果如下

主要代码如下

MyButton.qml

import QtQuick 2.6
import QtGraphicalEffects 1.0

/****************************************************************************
**自定义按钮功能实现
**主要实现按钮的按压效果，带有阴影效果
**
****************************************************************************/

Item {
    id : mybutton
    width: 100
    height: 50

    signal clicked();

    Rectangle {
        id : bgrect;
        y : 20
        x : 1
        color: "#5CB85C";
        width: mybutton.width-2;
        height: mybutton.height-25
        radius: height/2
    }

    DropShadow {
        id : shadow
        anchors.fill: bgrect
        horizontalOffset: 2
        verticalOffset: 12
        radius: 8.0
        samples: 17
        color: "#999999"
        source: bgrect
    }


    Rectangle{
        id : toprect
        color: "#5CB85C"
        width: mybutton.width;
        height: mybutton.height-2
        radius: height/3

        MouseArea {
            id: mouseArea
            anchors.fill: parent
            hoverEnabled : true
            onClicked: {
               animation.start();
               mybutton.clicked();
            }
            onEntered: {
                toprect.color = "#3e8e41";
                bgrect.color = "#3e8e41";
            }
            onExited: {
                toprect.color = "#5CB85C";
                bgrect.color = "#5CB85C";
            }

        }

    }

    Text {
        id: mytext
        anchors.centerIn: toprect
        text: qsTr("text")
        color: "#ffffff"
        font.pixelSize : toprect.height/2
    }


    SequentialAnimation {

              id : animation
              NumberAnimation { target: toprect; property: "y"; to: toprect.x+2; duration: 100 }
              NumberAnimation { target: toprect; property: "y"; to: toprect.x-2; duration: 100 }
          }

}

使用如下

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("自定义Button")

    MyButton{
        x : 100; y : 100
    }

}