I’m also not working that long on QML but this is how I do it.
I make the dialog as a new .qml file. This will be created dynamically and added on top of the parent.
You could also use the QML Loader component to load a QML file if you want.
The dialog component qml file contains a overlay that will cover the ‘parent control’ as you call it. That overlay has a MouseArea with no handler to disable clicking outside of the dialog.
I prepared a simple demo consisting of the main screen that will popup the dialog and the dialog qml file itself.
MainWindow.qml
// This is the main window that will show a dialog as a popup
// It simple contains a rectangle that acts as a button
// The dialog will be created dynamically (i.s.o. using a Loader)
// The dialog is destroyed in the Dialog.qml itself
import QtQuick 2.0
// We start with a Rectangle so that we can set color etc
Rectangle {
id: mainWindow
width: 360
height: 360
// This rectangle acts as the button
// It has no states, so no pressed states, etc
// Added rounded corners (radius) for button appearance
Rectangle {
id: myButton
x: 125
y: 84
width: 100
height: 30
color: "#000000"
Text {
anchors.centerIn: parent
color: "#FFFFFF"
text: "dialog"
}
// This mouse area fills the complete myButton
// when clicked it will create Dialog.qml dynamically
// adding it to the rectangle with the id=mainWindow
MouseArea {
anchors.fill: parent
onClicked: {
// now we create a dialog QML object dynamically
// we do not pass any properties to the dialog so we use {}
Qt.createComponent("Dialog.qml").createObject(mainWindow, {});
}
}
}
}
Now we need a QML file for the dialog itself. Create a file called Dialog.qml
// This QML file (called Dialog.qml) is used to create a simple popup
// It will show an overlay on top of the parent and a small white area
// that is the dialog itself. For demo purposes no fancy stuff in the popup
import QtQuick 2.0
// Use an item as container to group both the overlay and the dialog
// I do this because the overlay itself has an opacity set, and otherwise
// also the dialog would have been semi-transparent.
// I use an Item instead of an Rectangle. Always use an 'Item' if it does not
// display stuff itself, this is better performance wise.
Item {
id: dialogComponent
anchors.fill: parent
// Add a simple animation to fade in the popup
// let the opacity go from 0 to 1 in 400ms
PropertyAnimation { target: dialogComponent; property: "opacity";
duration: 400; from: 0; to: 1;
easing.type: Easing.InOutQuad ; running: true }
// This rectange is the a overlay to partially show the parent through it
// and clicking outside of the 'dialog' popup will do 'nothing'
Rectangle {
anchors.fill: parent
id: overlay
color: "#000000"
opacity: 0.6
// add a mouse area so that clicks outside
// the dialog window will not do anything
MouseArea {
anchors.fill: parent
}
}
// This rectangle is the actual popup
Rectangle {
id: dialogWindow
width: 100
height: 62
radius: 10
anchors.centerIn: parent
Text {
anchors.centerIn: parent
text: "This is the popup"
}
// For demo I do not put any buttons, or other fancy stuff on the popup
// clicking the whole dialogWindow will dismiss it
MouseArea{
anchors.fill: parent
onClicked: {
// destroy object is needed when you dynamically create it
dialogComponent.destroy()
}
}
}
}
I hope this is what you’re looking for.
Happy coding
↧