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

import QtQuick 2.15
import QtQuick.Controls 2.15
import QtGraphicalEffects 1.15

Button {
    id: rippleButton
    width: 100
    height: 40
    text: "Ripple Button"

    contentItem: Item {
        width: parent.width
        height: parent.height

        Rectangle {
            id: rippleRect
            width: parent.width
            height: parent.height
            color: "#007bff"
            radius: 5

            MouseArea {
                id: rippleArea
                anchors.fill: parent
                hoverEnabled: true

                onPressed: {
                    rippleEffect.target = rippleRect
                    rippleEffect.start()
                }

                onReleased: {
                    rippleEffect.stop()
                }

                onPositionChanged: {
                    rippleEffect.targetX = mouse.x
                    rippleEffect.targetY = mouse.y
                }
            }

            ShaderEffect {
                id: rippleEffect
                property real targetX: 0
                property real targetY: 0
                property real progress: 0
                property real radius: 0

                fragmentShader: "
                    uniform lowp float qt_Opacity;
                    uniform highp float radius;
                    uniform highp float progress;
                    uniform highp vec2 target;

                    void main() {
                        highp vec2 pos = qt_TexCoord0.st;
                        highp float dist = distance(pos, target);
                        highp float alpha = smoothstep(radius - progress, radius + progress, dist);
                        gl_FragColor = vec4(1.0, 1.0, 1.0, alpha * qt_Opacity);
                    }
                "

                onProgressChanged: {
                    rippleEffect.radius = Math.max(rippleRect.width, rippleRect.height) * progress
                }

                NumberAnimation {
                    id: rippleAnimation
                    target: rippleEffect
                    property: "progress"
                    duration: 500
                    easing.type: Easing.OutQuad
                }
            }
        }
    }
}