qt - 我在使用 DropShadow 和 Ripple 时遇到了冲突

Question

我在 Item 中写了Ripple一个Rectangle项目并启用clip了 Rectangle 的属性，以防止 Ripple 绘图脱离该 Rectangle。

没有 DropShadow：

一切正常，直到我添加DropShadow到那个矩形。虽然它在 Rectangle 项之外，但它中和了 Rectangle 左右两侧的剪辑效果。

使用 DropShadow：

这是我的代码：

import QtQuick 2.12
import QtQuick.Layouts 1.12
import QtGraphicalEffects 1.12
import QtQuick.Controls.Material.impl 2.12

Item{
                    width: 400
                    height: 100

                    DropShadow {
                        anchors.fill: itemRect
                            horizontalOffset: 0
                            verticalOffset: 0
                            radius: 12.0
                            samples: 17
                            color: "#50000000"
                            source: itemRect
                        }

                    Rectangle{
                        id:itemRect
                        anchors.fill: parent;
                        anchors.margins: 8;
                        border.width: 1
                        radius: 5;
                        clip: true;


                        MouseArea{
                            id: button
                            anchors.fill: parent
                            onPressed: {
                                ripple.x=mouseX-(ripple.width/2);
                                ripple.y=mouseY-(ripple.height/2);
                            }


                            Ripple {
                                id: ripple
                                clipRadius: 2
                                x:40
                                width: itemRect.width*2
                                height: itemRect.height*2
                                pressed: button.pressed
                                active:  false
                                color: "#10000000"
//                                layer.enabled: true
//                                layer.effect: OpacityMask {
//                                            maskSource: Rectangle
//                                            {
//                                                width: ripple.height
//                                                height: ripple.height
//                                                radius: ripple.height
//                                            }
//                                        }
                            }
                        }
                    }

                }

我测试OpacityMask了layer.effect涟漪项目。但它没有任何影响。

Answer 1

最后我写了自己的波纹。它可以在任何地方使用，没有任何问题。

https://github.com/mmjvox/Another-Ripple

这是我的代码：

import QtQuick 2.12
import QtQuick.Layouts 1.12
import QtGraphicalEffects 1.12
import AnotherRipple 1.0

Item{
                    width: 400
                    height: 100

                    DropShadow {
                        anchors.fill: itemRect
                            horizontalOffset: 0
                            verticalOffset: 0
                            radius: 12.0
                            samples: 17
                            color: "#50000000"
                            source: itemRect
                        }

                    Rectangle{
                        id:itemRect
                        anchors.fill: parent;
                        anchors.margins: 8;
                        border.width: 1
                        radius: 5;
                        clip: true;
                        
                        SimpleRipple{
                            id: ripple
                            anchors.fill: parent;
                            color: "#50ffa070"
                        }

                        MouseArea{
                            id: button
                            anchors.fill: parent
                            onClicked: {

                                // In this example MouseArea accepts pressed event to provide clicked(released) event.
                                // Ripple can't sense pressed event, so I called pressed method of Ripple.
                        
                                ripple.pressed(mouse.x,mouse.y);
                                
                                // Some Other Operations
                            }

                        }
                    }

                }