我正在使用 QtQuick/QML,我想在单击按钮时创建涟漪效果。我确实知道这在 Material Style 中可用,但我认为当您更改主题时这是一个固有属性,我不想更改项目中的任何其他内容。
有没有办法只在我的按钮上添加涟漪效果,而不改变其他任何东西?如果是这样,我该怎么做?
我正在使用 QtQuick/QML,我想在单击按钮时创建涟漪效果。我确实知道这在 Material Style 中可用,但我认为当您更改主题时这是一个固有属性,我不想更改项目中的任何其他内容。
有没有办法只在我的按钮上添加涟漪效果,而不改变其他任何东西?如果是这样,我该怎么做?
正如 Kostia Hvorov 所说,QtQuick.Controls.Material.impl.Ripple 是最简单的方法。我想添加我的技巧来处理具有半径的矩形背景:
import QtQuick 2.12
import QtQuick.Controls 2.12
import QtQuick.Controls.Material.impl 2.12
import QtGraphicalEffects 1.12
Column
{
spacing: 20
Button
{
anchors.horizontalCenter: parent.horizontalCenter
id: button
text: "ripple demo"
}
Ripple {
id: ripple
anchors.horizontalCenter: parent.horizontalCenter
clipRadius: 4
width: 200
height: 64
pressed: button.pressed
active: button.down || button.visualFocus || button.hovered
color: "#20FFFFFF"
layer.enabled: true
layer.effect: OpacityMask {
maskSource: Rectangle
{
width: ripple.width
height: ripple.height
radius: 4
}
}
}
}
我用一些 PropertyAnimation 做了这个。方法如下:
import QtQuick 2.15
import QtQuick.Controls 2.15
Button {
id: control
opacity: enabled ? 1.0 : 0.2
property int tripleWidth: width * 3
background: Rectangle {
border.width: 1
border.color: "black"
radius: 3
color: "white"
clip: true
Rectangle {
id: ripple
property int diameter: 0
property int pressX: 0
property int pressY: 0
x: pressX - radius
y: pressY - radius
color: "green"
radius: diameter / 2
width: diameter
height: diameter
opacity: 1 - diameter / control.tripleWidth
function animate(x, y, size) {
pressX = x
pressY = y
diameter = size
}
Behavior on diameter {
PropertyAnimation {
duration: 200
onRunningChanged: {
if(!running) {
duration = 0;
ripple.diameter = 0;
duration = 200;
}
}
}
}
}
}
onClicked: {
ripple.animate(pressX, pressY, control.tripleWidth)
}
contentItem: Item {
implicitWidth: txt.implicitWidth
implicitHeight: 20
Text {
id: txt
anchors.centerIn: parent
text: control.text
}
}
}
最简单的方法 - 使用来自 QtQuick.Controls.Material.impl 的 Ripple
因此,只需将 Ripple 添加到您的背景 Rect 中:
Ripple {
clipRadius: height
width: parent.width
height: parent.height
pressed: control.pressed
anchor: control
active: control.down || control.visualFocus || control.hovered
color: control.flat && control.highlighted ? control.Material.highlightedRippleColor : control.Material.rippleColor
}
您可以将“control.Material.rippleColor”或/和“control.Material.highlightedRippleColor”替换为任何颜色并获得任何波纹颜色效果。
但是有一个问题,它只适用于矩形背景(没有圆形),否则看起来很糟糕。