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

How to use loader's loader's element?



  • Hello, everyone, now I come across one problem:
    I have used qml loader to load one window. In the window, I define another loader and use the loader to load another window. I try to use the first loader to get the last loader's loaded element, however, the output shows error, could anyone help me? Thanks a lot!


  • Moderators

    @small_bird said in How to use loader's loader's element?:

    however, the output shows error, could anyone help me?

    help us help you by showing the error and some code...



  • Hi,

    first of all, it's always a good idea to post some snippets of code. Especially if you already have some ideas, but they don't work. Please post also the errors as they might save a lot time to search for your mistakes.

    Anyways, I suppose you problem is that you try to access the inner Loader from it's id.

    ApplicationWindow {
      ...
      Loader {
        Component.onCompleted: loader2.sourceComponent = "otherComponent"
      }
    
      Component {
         id: windowComponent
    
         Window {
          ...
    
           Loader {
             id: loader2
          }
        }
      }
    }
    

    As you can see, here is an attempt to set the second loader's souceComponent property to another Component (not shown here). But it's not working, because the id of the second loader is outside of scope. Same applies to a Component declared in another qml file.

    But from the loader you can access your loaded Window (the root Element) by the loader's item property. If you give your loaded Window a property pointing to your Loader's source/sourceComponent property, you can load the second part.

    import QtQuick 2.10
    import QtQuick.Controls 2.3
    
    ApplicationWindow {
      id: root
      width: 1200; height: 600
      visible: true
    
      Loader {
        id: componentLoader
    
        anchors.fill: parent
    
        Component.onCompleted: item.sourceComponent = testRect2;
      }
    
      Component.onCompleted: componentLoader.sourceComponent = testRect;
    
      Component {
        id: testRect
    
        Rectangle {
          color: "blue"
    
          property alias sourceComponent : componentLoader2.sourceComponent
    
          Loader {
            id: componentLoader2
            anchors.centerIn: parent
          }
        }
      }
    
      Component {
        id: testRect2
    
        Rectangle {
          width: 300
          height: 300
          color: "red"
        }
      }
    }
    
    

    Here is a small Examples with Rects. You have to Components Rect1 and Rect2 to be loaded. If the ApplicationWindow is ready you load Rect1 with componentLoader1. If componentLoader1 is ready you load Rect2 through componentLoader.
    componentLoader1.item gives your Rect1. And with the property alias sourceComponent you can load Rect2.
    Same applies if you move the two components in other qml files except you have to use then the source property instead of the sourceComponent property.



  • @Leon_2001 Thanks a lot, the problem has been solved!


Log in to reply