How to use loader's loader's element?

small_bird

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!

raven-worx

@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...

Leon_2001

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.

small_bird

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