diff options
| author | Erik Prabowo Kamal <erik@darapsa.org> | 2025-12-12 18:40:48 +0800 |
|---|---|---|
| committer | Erik Prabowo Kamal <erik@darapsa.org> | 2025-12-12 18:40:48 +0800 |
| commit | 70eefa50f9a70554d9db7004e48555858dfc008c (patch) | |
| tree | 4989a20b6676ab297bd5cffa75a1fdee33e53be2 | |
| parent | e8f2d82e994973a274ec3a72cbb568baffb91ffc (diff) | |
Reimplement Qt5 DropShadow using Qt6 MultiEffect
https://stackoverflow.com/questions/66145143/how-to-create-dropshadow-effect-in-qml-with-qt6#66162760
Didn't follow the checked answer cause it's still using Qt5Compat.
Follow the 1st answer instead.
Don't know how to reimplement DropShadow's samples & radius yet.
Opacity needs to be separated, don't set it on Qt.rgba, otherwise the
resulting colour would be too soft/light/invisible.
| -rw-r--r-- | Course/Grid/Card.ui.qml | 10 | ||||
| -rw-r--r-- | DropShadow/Box.ui.qml | 14 | ||||
| -rw-r--r-- | Home/Default.ui.qml | 8 | ||||
| -rw-r--r-- | imports/Eduport/Eduport.qml | 3 |
4 files changed, 19 insertions, 16 deletions
diff --git a/Course/Grid/Card.ui.qml b/Course/Grid/Card.ui.qml index 36893c2..dbc32ad 100644 --- a/Course/Grid/Card.ui.qml +++ b/Course/Grid/Card.ui.qml @@ -6,13 +6,13 @@ import Qt5Compat.GraphicalEffects Item { id: item1 - DropShadow { - color: "#4d000000" + MultiEffect { source: cardItem - verticalOffset: 4 - radius: 40 - samples: 81 anchors.fill: cardItem + shadowEnabled: true + shadowColor: "#4d0000" + shadowOpacity: .0 + shadowVerticalOffset: 4 } Rectangle { id: cardItem diff --git a/DropShadow/Box.ui.qml b/DropShadow/Box.ui.qml index b14aaa2..1fe1265 100644 --- a/DropShadow/Box.ui.qml +++ b/DropShadow/Box.ui.qml @@ -1,11 +1,11 @@ import QtQuick -import Qt5Compat.GraphicalEffects +import QtQuick.Effects import Eduport -DropShadow { - horizontalOffset: Eduport.bsBoxShadowOffsetX - verticalOffset: Eduport.bsBoxShadowOffsetY - radius: Eduport.bsBoxShadowBlurRadius / 5 - samples: radius * 2 + 1 - color: Eduport.bsBoxShadowColor +MultiEffect { + shadowEnabled: true + shadowHorizontalOffset: Eduport.bsBoxShadowOffsetX + shadowVerticalOffset: Eduport.bsBoxShadowOffsetY + shadowColor: Eduport.bsBoxShadowColor + shadowOpacity: Eduport.bsBoxShadowOpacity } diff --git a/Home/Default.ui.qml b/Home/Default.ui.qml index 3ff4e84..0381e9d 100644 --- a/Home/Default.ui.qml +++ b/Home/Default.ui.qml @@ -1,7 +1,7 @@ import QtQuick import QtQuick.Controls import QtQuick.Layouts -import Qt5Compat.GraphicalEffects +import QtQuick.Effects import Bootstrap import Eduport import ".." @@ -107,10 +107,12 @@ Flickable { Layout.fillWidth: true implicitHeight: image.height - DropShadow { + MultiEffect { source: angularRectangle anchors.fill: angularRectangle - color: Qt.rgba(.113, .227, .325, .15) + shadowEnabled: true + shadowColor: Qt.rgba(.113, .227, .325, 1.0) + shadowOpacity: .15 } Rectangle { diff --git a/imports/Eduport/Eduport.qml b/imports/Eduport/Eduport.qml index d8a3354..df53c10 100644 --- a/imports/Eduport/Eduport.qml +++ b/imports/Eduport/Eduport.qml @@ -54,7 +54,8 @@ QtObject { property real bsBoxShadowOffsetX: 0 property real bsBoxShadowOffsetY: 0 property int bsBoxShadowBlurRadius: 40 - property color bsBoxShadowColor: "#261d3a53" + property color bsBoxShadowColor: "#261d3a" + property real bsBoxShadowOpacity: .33 readonly property real bsBtnPaddingX: 16 readonly property real bsBtnPaddingY: 8 |