Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

How to use QC2 Popup/ApplicationWindow "Overlay"



  • Hey all,

    Trying to figure out how to get overlays working with my custom Style and Popup in my application.

    I am looking to have a 100x100 popup in the center of my application, with the entire background an opaque grey color.

    // MyPage.qml
    // ContentItem for a Page in a StackView of my application.
    Item { 
    
        Popup {
            x: (parent.width - width) / 2
            y: (parent.height - height) / 2
            width: 100
            height: 100
        }
    }
    
    // Popup.qml
    // Style re-implementation of Popup.
    T.Popup {
        parent: Overlay.overlay
        visible: true
    
        background: Rectangle { color: Theme.popupColor }
        
    //    Didn't work
    //    T.Overlay.modal: Rectangle { opacity: 0.5; color: Theme.overlayColor }
    //    T.Overlay.modeless: Rectangle { opacity: 0.5; color: Theme.overlayColor }
    }
    
    // ApplicationWindow.qml
    // Style re-implementation of ApplicationWindow.
    T.ApplicationWindow {
        id: control
        visible: true
        color: Theme.backgroundColor
    
    //    Didn't work
    //    overlay.modal: Rectangle { opacity: 0.5; color: Theme.overlayColor }
    //    overlay.modeless: Rectangle { opacity: 0.5; color: Theme.overlayColor }
        
    //    Didn't work
    //    T.Overlay.modal: Rectangle { opacity: 0.5; color: Theme.overlayColor }
    //    T.Overlay.modeless: Rectangle { opacity: 0.5; color: Theme.overlayColor }
    }
    

    Currently, this does NOT set the modal overlay of the ApplicationWindow correctly. All I see is a Rectangle Popup in the middle of my screen with no dimming effect whatsoever.

    What am I missing here to dim the rest of the window?



  • I figured it out!

    I wasn't setting the "modal: true" value in the Popup.


Log in to reply