CODEWITHSUNDEEP
qtqmlshadowqt6
user123445151156
user123445151156

Reputation: 361

How to create DropShadow effect in QML with Qt6?

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?

Upvotes: 5

Views: 7415

Answers (4)

m7913d
m7913d

Reputation: 11064

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.

Upvotes: 6

TadejP
TadejP

Reputation: 1042

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
    }

Upvotes: 8

AmirMohammad Biuki
AmirMohammad Biuki

Reputation: 25

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

Upvotes: 2

Alexander Dyagilev
Alexander Dyagilev

Reputation: 1425

Qt6 DropShadow

import Qt5Compat.GraphicalEffects
DropShadow {}

Upvotes: 3

Related Questions