Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. Strange border around popup when adding drop shadow with MultiEffect
Forum Updated to NodeBB v4.3 + New Features

Strange border around popup when adding drop shadow with MultiEffect

Scheduled Pinned Locked Moved Unsolved QML and Qt Quick
qmleffectspopup qmlshadowpyqt6
1 Posts 1 Posters 60 Views 1 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • J Offline
    J Offline
    Jimmy Harrington
    wrote last edited by aha_1980
    #1

    Here's a minimal QML example that shows the problem I'm encountering:

    import QtQuick
    import QtQuick.Controls
    import QtQuick.Effects
    
    ApplicationWindow {
        width: 500
        height: 400
        visible: true
    
        color: "#E0E0E0"
    
        Button {
            text: "Open Popup"
            anchors.centerIn: parent
            onClicked: popup.open()
        }
    
        Popup {
            id: popup
            modal: true
            focus: true
            x: (parent.width - width) / 2
            y: (parent.height - height) / 2
            width: 200
            height: 150
    
            background: Rectangle {
                id: bg
                anchors.fill: parent.item
                color: "white"
                radius: 10
            }
    
            MultiEffect {
                anchors.fill: parent
                source: bg
                shadowEnabled: true
                shadowHorizontalOffset: 5
                shadowVerticalOffset: 5
            }
    
            Column {
                anchors.centerIn: parent
                spacing: 10
    
                Text { text: "This is a popup" }
                Button { text: "Close"; onClicked: popup.close() }
            }
        }
    }
    

    106c8606-3132-4a77-b395-3c0c16399637-image.png

    In the past, I have used RectangularGlow with great success. This item was much easier to work with. For example:

    background: Rectangle {
            anchors.fill: parent
            border.width: 1
            border.color: "black"
            color: root.color
    
            RectangularGlow {
                z: -1
                anchors.fill: parent
                glowRadius: 12
                spread: 0.1
                color: Colors.black
                opacity: 0.6
            }
    }
    

    This works much better. However, unfortunately import Qt5Compat.GraphicalEffects is not available to me on this new project because I am using PyQt6, and Qt5Compat is not available with PyQt6, so I'm forced to resort to MultiEffect that has this strange border.

    I'm not attached to using MultiEffect, so if there's a different way to achieve a dropshadow effect (that is compatible with PyQt6) I'd be happy to use that instead, but MultiEffect is the closest thing I've gotten to achieving this effect.

    1 Reply Last reply
    0

    • Login

    • Login or register to search.
    • First post
      Last post
    0
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    • Get Qt Extensions
    • Unsolved