Alternatives to Component inside a Component

  • Hello,

    I have the following code in Dialog.qml:
    @Rectangle {
    anchors.centerIn: parent
    width: 150
    height: 150
    color: "lightblue"
    Button {
    anchors.bottom: parent.bottom
    anchors.horizontalCenter: parent.horizontalCenter
    text: "Show another dialog"
    onClicked: {
    Component {
    id: dialogComponent
    Dialog {

    I gives me error: qrc:///Dialog.qml:19 Dialog is instantiated recursively
    If I understand correctly, this is a bug in Qt Quick, right? ( )

    The motivation behind this code is to write a Dialog element, which can be opened from any other element, including elements that are already shown inside a Dialog.

    So if this won't work, are there any alternatives/workarounds?

  • Hi,

    What are you want to do? If you trying to create Dialog dynamically and then show it you can use this code:
    /** @brief Create window to add a new controller view.
    * @param parent The parent object on which centeral widget will be shown.
    * @author Andrew Shapovalov*/
    function createControllerWindow(parent)
    var tmp = Qt.createComponent("MslQmlControllerWindow.qml");
    var options = { "id": "newControllerWindow"};
    var controllerWindow = tmp.createObject(parent, options);
    if(controllerWindow !== null)
    return controllerWindow;

        return null;


    Where MslQmlControllerWindow.qml (in my case) is a Window object. In options variable you can set any properties for your dialog.
    I'm using this function:
    var wnd = createControllerWindow(<parent element id here>);
    if(wnd !== null)
    {; //I'm using the Window element for dialog it's can be different.

  • Yes, this really is kinda solution, because it creates the Component only when dialog is about to be opened.

    However this way I can customize the Dialog only through property-value pairs (your options variable). I was thinking of making an empty dialog with only OK and Cancel buttons, where I could add different controls in different situations.

  • Hm....

    I'm using Window component to create dialogs. So, when I need to create custom dialog I use something like this:
    import QtQuick 2.2
    import QtQuick.Controls 1.2
    import QtQuick.Window 2.0

    Window {
    id: controllerWindow
    width: 600
    height: 300
    minimumWidth: 600
    maximumWidth: 600
    minimumHeight: 300
    maximumHeight: 300
    modality: Qt.WindowModal
    title: qsTr("Window title")
    color: "#e8e8e8"

    //Any properties, functions etc.

    Rectangle {
        id: generalTabContent
        anchors {fill: parent; margins:10}
        color: "transparent"
        Rectangle {
            id: generalContentView
            width: parent.width
            height: parent.height - 10 - buttonsRow.height

    color: "red"

        Row {
            id: buttonsRow
            anchors {top: generalContentView.bottom; right: parent.right; topMargin: 10}
            width: btnClose.width + btnSave.width
            height: btnClose.height
            Button {
                id: btnClose
                text: qsTr("Close")
                onClicked: {
            Button {
                id: btnSave
                text: qsTr("Save")
                onClicked: {
                    //Some code here


    Certainly, you can create qml file with code upper and implement all logic in this qml file. If you need to return some datas in this case you can use "signal/slot.": Also you can set any properties (custom properties you must implement in you Window qml file) in opitions variable.

    If you have any question let me know and I'll try to help you.

Log in to reply

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.