CODEWITHSUNDEEP
qtqmlqt5qtquick2
A.J
A.J

Reputation: 348

How dynamically creates Popup in QML

When I try to dynamically creates Popup with Qt.createQmlObject(...) or Qt.createComponent(...), I got exception:

QML Popup: cannot find any window to open popup in.

Here is my code:

var popup1 = Qt.createQmlObject('import QtQuick 2.8; import QtQuick.Controls 2.1; Popup { id: popup; x: 100; y: 100; width: 200; height: 300; modal: true; focus: true; closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutsideParent; visible: false }',
                                window,
                                "DynamicPopup");
popup1.open()

var popupComponent = Qt.createComponent("qrc:/TestPopup.qml")
var popup2 = popupComponent.createObject(window);
popup2.open()

TestPopup.qml:

import QtQuick.Window 2.2
import QtQuick.Controls 2.1

Popup {
    x: 100
    y: 100
    width: 200
    height: 300
    modal: true
    focus: true
    closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutsideParent
    visible: false
}

Upvotes: 6

Views: 20672

Answers (4)

Musa
Musa

Reputation: 524

A good approach to dynamically load a popup with a Loader:

Loader {
    id: popupLoader

    active: false
    source: "qrc:/TestPopup.qml"
    onLoaded: item.open()
}

function openMyPopup() {
    if( popupLoader.active )
        popupLoader.item.open()
    else
        popupLoader.active = true
}

Upvotes: 1

Andrei R.
Andrei R.

Reputation: 2462

Popup is not inheriting QQuickItem, and by default it is parented by QML Window, which is not instantiated if you are using QQuickWidget. Thus passing parent should be done as follows:

var popupComponent = Qt.createComponent("qrc:/TestPopup.qml")
var popup2 = popupComponent.createObject(window, {"parent" : window});
popup2.open()

Upvotes: 7

GrecKo
GrecKo

Reputation: 7170

A Popup needs to be be parented to an Item, window isn't one. You should use window.contentItem instead.

Upvotes: 2

eyllanesc
eyllanesc

Reputation: 244369

The parent must be an element that inherits from QQuickItem

Example:

import QtQuick 2.6
import QtQuick.Window 2.2
import QtQuick.Controls 2.1

Window {
    id: win
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    Row{
        Button{
            id: item1
            text: "btn1"
            onClicked: {
                var popup1 = Qt.createQmlObject('import QtQuick 2.8; import QtQuick.Controls 2.1; Popup { id: popup; x: 100; y: 100; width: 200; height: 300; modal: true; focus: true; closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutsideParent; visible: false }',
                                                item1,
                                                "DynamicPopup");
                popup1.open()

            }
        }

        Button{
            id: item2
            text: "btn2"
            onClicked: {
                var popupComponent = Qt.createComponent("qrc:/TestPopup.qml")
                var popup2 = popupComponent.createObject(item2);
                popup2.open()
            }

        }

    }
}

method 1:

enter image description here

method 2:

enter image description here

Upvotes: 5

Related Questions