Modal pop-up dialogs in QML?
Greets!
I’m trying to create a modal popup in QML and I’m not having a whole lot of luck. It’s easy enough to set up a MouseArea inside of an element, but how do I make it so that any clicks outside of the element are ignored by the application? It seems like if I made a MouseArea that covers the whole screen then that would do it, but I’m not having any luck detecting the bounds of the screen, particularly in relation to the position of the popup element. Help?
6 replies
Hi I’m not sure if it’s an easy-predefined solution. maybe you should wait for qt-components for that, or make your own implementation.
if you want your own implementation you need to disable all the mouseareas when you show the new window, and when you close it enable the mouse areas. this is the quickest solution ever come to my mind
Thanks for this. This is a nice solution to block the mouse clicks
I have a similar scenario where both the user can use both keyboard and mouse. From any screen, this popup can be invoked through the keyboard which works fine. However closing the popup doesn’t return the focus to the calling screen.
Does anyone have an idea of how to do this.
Did you find a solution ? I am working on it. I will past some code soon… The link bellow can be a answer to the popup Use Case :
popup [doc.qt.digia.com]
Here is the QML code I have done. Maybe this code will help.
- import QtQuick 1.1
- Rectangle
- {
- property int opacitypopup: 0
- width: 800
- height: 500
- opacity: 1
- Rectangle
- {
- color:"lightgrey"
- width: parent.width
- height:parent.height
- Text
- {
- anchors
- {
- centerIn:parent
- }
- font.family: "Segoe UI Light"
- font.pixelSize: 20
- text : "Hello World!"
- color: "black"
- }
- MouseArea
- {
- anchors.fill: parent
- onClicked:
- {
- opacitypopup = 1
- }
- }
- Rectangle
- {
- color: "darkgreen"
- width: 200
- height: 100
- opacity: opacitypopup
- Behavior on opacity { NumberAnimation { duration: 500 } }
- anchors
- {
- centerIn:parent
- }
- Text
- {
- anchors
- {
- centerIn:parent
- }
- font.family: "Segoe UI Light"
- font.pixelSize: 20
- text : "POPUP"
- color: "darkgrey"
- }
- MouseArea
- {
- anchors.fill: parent
- onClicked:
- {
- opacitypopup = 0
- }
- }
- }
- }
- }
But I have another question : how can we managed to do such a popup on a Listview ? Because it seems that Delegate always try to be placed above averything other things.
You must log in to post a reply. Not a member yet? Register here!