qt - 如何在 QML 中创建波纹按钮效果？

Question

我正在使用 QtQuick/QML，我想在单击按钮时创建涟漪效果。我确实知道这在 Material Style 中可用，但我认为当您更改主题时这是一个固有属性，我不想更改项目中的任何其他内容。

有没有办法只在我的按钮上添加涟漪效果，而不改变其他任何东西？如果是这样，我该怎么做？

Answer 1

正如 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
            }
        }
    }
}   

在线试用

Answer 2

我用一些 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
        }
    }
}

Answer 3

最简单的方法 - 使用来自 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”替换为任何颜色并获得任何波纹颜色效果。

但是有一个问题，它只适用于矩形背景（没有圆形），否则看起来很糟糕。