如何在Qt6的QML中创建DropShadow效果？

Question

在Qt5中，使用DropShadow非常容易。
但是，在Qt6中，已删除了QtGraphicalEffects模块。

在Qt6中是否有任何技巧、解决方法或新的方式来创建某个组件周围的投影效果？

- user123445151156

---

嗯，这绝对不是一件容易的事情，但你仍然可以在Qt6中编写自己的ShaderEffects。我相信QtGraphicalEffects将会在以后的版本中回归，但现在你必须自己动手了。 - JarMan

或者你可以使用半透明图像来实现。 - JarMan

是的，看起来是这样。如果有效，我会尝试您的建议并将其添加为答案。谢谢。 - user123445151156

@user123445151156，如果您成功创建阴影，能否请您发布ShaderEffects的使用示例？ - peco

Answer 1

正如您自己注意到的那样，Qt Graphical Effects已经被彻底删除：[1]。然而，Qt Graphical Effects已与新的QRhi（Qt渲染硬件接口）兼容，在Qt6中使用[2]。请注意，这并不意味着它将在后期包括在Qt 6中。[3]。

尽管如此，我希望使用git的dev或Qt 5.15分支中的DropShadow相对容易。

请注意，在Qt6.1中，它将被作为Qt5 Compatibility API包含进来（Qt 6.1的最终版本计划于2021年4月27日发布）。[4]

- m7913d

Answer 2

您可以手动将QtGraphicalEffects模块添加到Qt6中，然后在代码中使用DropShadow。

通常，要在Qt 6中非官方地使用QtGraphicalEffects，请执行以下操作：

$ git clone git://code.qt.io/qt/qtgraphicaleffects.git
$ cd qtgraphicaleffects/
$ git checkout 59ab3e11433a5157aac0f3af7c0d7fe70a373373 & cd ..
$ ~/Qt/<VERSION>/gcc_64/bin/qmake qtgraphicaleffects
$ make
$ find qtgraphicaleffects/src/effects/ -maxdepth 1 -name \*.qml -exec cp {} qml/QtGraphicalEffects \;
$ cp -r qtgraphicaleffects/src/effects/private/ qml/QtGraphicalEffects
$ cp -r qml/QtGraphicalEffects ~/Qt/<VERSION>/gcc_64/qml/

这将获取模块源代码，直到它尚未从存储库完全删除为止。然后进行构建，并使用所需文件将其复制到Qt安装目录中。

因此，要使用DropShadow组件，请添加：

import QtGraphicalEffects 1.0

您可以在QML代码中使用以下组件：

• BrightnessContrast（亮度对比度）
• Colorize（颜色化）
• ColorOverlay（颜色叠加）
• ConicalGradient（圆锥渐变）
• Desaturate（去饱和度）
• Displace（位移）
• DropShadow（投影阴影）
• FastBlur（快速模糊）
• FastGlow（快速发光）
• GammaAdjust（伽马调整）
• Glow（发光）
• HueSaturation（色相饱和度）
• LevelAdjust（级别调整）
• LinearGradient（线性渐变）
• OpacityMask（透明度遮罩）
• RadialGradient（径向渐变）
• RectangularGlow（矩形发光）
• ThresholdMask（阈值遮罩）

- AmirMohammad Biuki

---

如果任何人都可以做到那为什么他们删除了它？ - ניר

Answer 3

Qt6投影

这是关于Qt6中的投影效果。

import Qt5Compat.GraphicalEffects
DropShadow {} 

- Alexander Dyagilev

---

innershadow 有何建议？ - eddym

Answer 4

说到2D效果，熟悉MultiEffect。对于最常见的效果，如模糊或投影，这应该是首选。 避免使用Qt5Compat模块中的传统Qt图形效果类型。

来源：https://www.qt.io/blog/post-processing-effects-for-3d-in-qt-6.5

import QtQuick
import QtQuick.Effects

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello Shadow")

    Rectangle {
        id: sourceItem
        width: 100
        height: 100
        radius: 10
        y: 40
        x: 40
        color: "red"
    }

    MultiEffect {
        source: sourceItem
        anchors.fill: sourceItem
        shadowBlur: 1.0
        shadowEnabled: true
        shadowColor: "black"
        shadowVerticalOffset: 15
        shadowHorizontalOffset: 11
    }

- TadejP