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

Question

在Qt5中，使用DropShadow很容易。
但在 Qt6 中，模块 QtGraphicalEffects 被删除了。

Qt6中是否有任何技巧、解决方法或新方法可以在某些组件周围创建阴影？

Answer 1

正如您自己所注意到的，

Qt Graphical Effects

 已被

删除（肯定）：

以下模块已被删除且不打算开发 进一步。

Qt 图形效果
[...]

但是，

Qt Graphical Effects

 与 Qt6 使用的新 

QRhi

（Qt 渲染硬件接口）兼容。 

[1]

请注意，这并不意味着它将在稍后阶段包含在 Qt 6 中。

[2]

尽管如此，我希望从 git 的 dev 或 Qt 5.15 分支使用

DropShadow

会相对容易。

请注意，它将作为

Qt5 Compatibility API

包含在 Qt6.1 中。 （Qt 6.1 最终版本原计划于 2021 年 4 月 27 日发布[3]）

Answer 2

Qt6 阴影

import Qt5Compat.GraphicalEffects
DropShadow {} 

Answer 3

您可以手动将

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 代码中使用以下组件：

亮度对比度
着色
颜色叠加
圆锥形渐变
去饱和度
置换
• 阴影
快速模糊
快速发光
伽玛调整
发光
色相饱和度
级别调整
线性渐变
不透明蒙版
径向渐变
矩形发光
阈值掩模

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
    }