2

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

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

4

3 回答 3

0

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

在线试用

于 2020-07-16T07:07:11.343 回答
0

我用一些 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
        }
    }
}
于 2022-01-08T11:22:07.820 回答
-1

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

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

于 2020-07-16T03:24:46.810 回答