How to create DropShadow effect in QML with Qt6?

Question

In Qt5 this was easy with using DropShadow.
But in Qt6 the module QtGraphicalEffects is removed.

Is there any trick, workaround or maybe new way in Qt6 to create drop shadow around some component?

Dupin

Well, it's definitely not easy, but you can still write your own ShaderEffects in Qt6. I'm pretty sure QtGraphicalEffects will come back in later releases, but for now you have to do it yourself. – Bissextile

Or you could do it with translucent images. – Bissextile

yea it looks like that is the way. I will try your suggestion and add it as answer if it works. Thank you – Dupin

@Dupin can you please post example usage of ShaderEffects if you succeed creating Shadow? – Kotz

Answer 1

As you noticed yourself, Qt Graphical Effects is removed (definitely):

The following modules are removed and not planned to be developed further.

• Qt Graphical Effects
• [...]

However, the Qt Graphical Effects is made compatible with the new QRhi (Qt Rendering Hardware Interface) used by Qt6. [1]

Note that this doesn't mean it will be included in Qt 6 at a later stage. [2]

Nevertheless, I expect it would be relatively easy to use DropShadow from the dev or Qt 5.15 branch of git.

Note that it is included as a Qt5 Compatibility API in Qt6.1: DropShadow.

Careful

Now there is a new module QtQuick.Effects since Qt 6.5 – Politic

@danieltakeshi, you may consider adding an answer yourself explaining how it could be done in Qt 6.5 (and newer). – Careful

Answer 2

When it comes to 2D effects, get familiar with MultiEffect. For the most common effects, such as blur or drop shadow, this should be the primary choice. Avoid pulling in the legacy Qt Graphical Effects types from the Qt5Compat module.

Source: 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
    }

Pollypollyanna

Answer 3

Qt6 DropShadow

import Qt5Compat.GraphicalEffects
DropShadow {} 

Cassaundracassava

Answer 4

You can add QtGraphicalEffects module to Qt6 manually and then use DropShadow in your code.

Generally, to unofficially employ QtGraphicalEffects in Qt 6, do the following:

$ 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/

This will obtain the module source code to the point where it wasn't yet completely removed from the repository. Then it is built and copied with the required files to the Qt installed directory.

So to use DropShadow component, add

import QtGraphicalEffects 1.0

You can also use the following components in your QML code:

• BrightnessContrast
• Colorize
• ColorOverlay
• ConicalGradient
• Desaturate
• Displace
• DropShadow
• FastBlur
• FastGlow
• GammaAdjust
• Glow
• HueSaturation
• LevelAdjust
• LinearGradient
• OpacityMask
• RadialGradient
• RectangularGlow
• ThresholdMask

Tatting