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?

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 will be included as a Qt5 Compatibility API in Qt6.1. (Final release of Qt 6.1 is originally planned for 27.04.2021 [3] )

Answer 2

Qt6 DropShadow

import Qt5Compat.GraphicalEffects
DropShadow {} 

Answer 3

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