16. QML利用DropShadow自定义悬浮按钮

本文主要是介绍16. QML利用DropShadow自定义悬浮按钮，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

1. 说明

一般情况下，QML提供的按钮控件的外观效果比较单一，如果想要做出带有空间感的效果，需要自己定义组件实现。本篇博客记录两种效果的空间感按钮，主要借助阴影达到想要的效果。
效果展示：
在这里插入图片描述

2. 主要代码：

第一种：

import QtQuick 2.0
import QtGraphicalEffects 1.0//自定义阴影按钮，阴影不可跳动
Item {id : shadowButtonwidth: 100height: 50signal clicked();Rectangle {id : bgrect;y : 20x : 1color: Qt.rgba(0.9,0.9,0.9,1)width: shadowButton.width-2;height: shadowButton.height-25radius: height/2}DropShadow {id : shadowanchors.fill: bgrecthorizontalOffset: 2verticalOffset: 12radius: 8.0samples: 17color: Qt.rgba(0.3,0.3,0.3,0.7)source: bgrect}Rectangle{id : toprectcolor: Qt.rgba(0.9,0.9,0.9,1)width: shadowButton.width;height: shadowButton.height-2radius: height/3MouseArea {id: mouseAreaanchors.fill: parenthoverEnabled : trueonClicked: {animation.start();shadowButton.clicked();}onEntered: {toprect.color = Qt.rgba(0.7,0.7,0.7,1)bgrect.color = Qt.rgba(0.95,0.95,0.95,1)shadowText.color = "white"}onExited: {toprect.color = Qt.rgba(0.9,0.9,0.9,1)bgrect.color = Qt.rgba(0.9,0.9,0.9,1)shadowText.color = Qt.rgba(0.3,0.3,0.3,1)}}}Text {id: shadowTextanchors.centerIn: toprecttext: qsTr("click")color: Qt.rgba(0.3,0.3,0.3,1)font.pixelSize : toprect.height/2}SequentialAnimation {id : animationNumberAnimation {target: toprect;property: "y";to: toprect.x+2;duration: 50}NumberAnimation {target: toprect;property: "y";to: toprect.x-2;duration: 50}}}

第二种：

import QtQuick 2.0
import QtGraphicalEffects 1.0
//自定义阴影按钮，阴影可跳动
Item {id : shadowButtonwidth: 100height: 50signal clicked();Rectangle{id : toprectcolor: Qt.rgba(0.9,0.9,0.9,1)width: shadowButton.width;height: shadowButton.height-2radius: height/4MouseArea {id: mouseAreaanchors.fill: parenthoverEnabled : trueonClicked: {animation.start();shadowButton.clicked();}onEntered: {toprect.color = Qt.rgba(0.7,0.7,0.7,1)shadowText.color = "white"}onExited: {toprect.color = Qt.rgba(0.9,0.9,0.9,1)shadowText.color = Qt.rgba(0.3,0.3,0.3,1)}}}DropShadow {id : shadowanchors.fill: toprecthorizontalOffset: 1verticalOffset: 10radius: 8.0samples: 17color: Qt.rgba(0.3,0.3,0.3,0.7)source: toprect}Text {id: shadowTextanchors.centerIn: toprecttext: qsTr("click")color: Qt.rgba(0.3,0.3,0.3,1)font.pixelSize : toprect.height/2}SequentialAnimation {id : animationParallelAnimation {NumberAnimation {target: toprect;property: "y";to: toprect.x+2;duration: 50}NumberAnimation {target: shadowproperty: "scale"to:0.95duration: 50}}ParallelAnimation {NumberAnimation {target: toprect;property: "y";to: toprect.x-2;duration: 50}NumberAnimation {target: shadowproperty: "scale"to:1.0duration: 50}}}
}