Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. General and Desktop
  4. How to create a drop shadow effect in Qt Quick
Forum Updated to NodeBB v4.3 + New Features

How to create a drop shadow effect in Qt Quick

Scheduled Pinned Locked Moved Unsolved General and Desktop
1 Posts 1 Posters 71 Views
  • 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.
  • T Offline
    T Offline
    thomasGl
    wrote last edited by
    #1

    Hello guys. I can i make a drop shadow effect? I also tried Dropshadow{} but it doesnt work.

    import QtQuick 2.15
    import QtQuick.Controls 2.15
    import QtQuick.Effects 1.15  // Für MultiEffect
    
    ApplicationWindow {
        visible: true
        width: 300
        height: 200
        title: "Button mit MultiEffect Schatten"
    
        // Primärfarbe für Button-Hintergrund
        property color primaryColor: "#3498db"
    
        Button {
            id: button
            x: 100
            y: 75
            width: 48
            height: 48
    
            property alias imageSource: contentImage.source
            property alias backgroundColor: buttonBackground.color
            property bool showShadow: true  // Schatten standardmäßig an
    
            focusPolicy: Qt.NoFocus
    
            contentItem: Item {
                z: 2 // damit Image sichtbar bleibt
                anchors.fill: parent
                Image {
                    id: contentImage
                    anchors.centerIn: parent
                    width: 24
                    height: 24
                    fillMode: Image.PreserveAspectFit
                    source: "qrc:/icons/sample-icon.png"  // Beispielbild (bitte anpassen)
                }
            }
    
            background: Rectangle {
                id: buttonBackground
                anchors.fill: parent
                color: primaryColor
                radius: width / 2
                opacity: button.pressed ? 0.5 : 1.0
            }
    
            MultiEffect {
                anchors.fill: buttonBackground
                source: buttonBackground
                autoPaddingEnabled: true
                shadowEnabled: button.showShadow
                shadowBlur: 8.0
                shadowHorizontalOffset: 1
                shadowVerticalOffset: 3
                opacity: button.pressed ? 0.75 : 1.0
                radius: buttonBackground.radius
            }
        }
    }
    
    
    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