Important: Please read the Qt Code of Conduct -

How do load QML Components when needed?

  • Hi guys,

    i am working on an embedded Linux device driven by an RPI CM1.
    My problem is that it takes over 10 secs to load my application.qml to my QQmlApplicationEngine.

    I have all my Items in their own *.qml files in qml/ui directory.
    e.g. :

    So when i remove all components out of application.qml and only load the LoginPage.qml which is the first and only i need at startup , the engine only need 600ms to load the gui.

    So my question is, is there a possibility to load all the other components later?

    Actually my gui is controlled by states which are setting the visibility of the components.
    I thought that QML only loads visible Items, but it doesn´t seem so.

    this is how my application.qml is working basicly:

    ApplicationWindow {
        id: window
        width: 800
        height: 480
        color: Style.backgroundColor
        Item {
        id: state
        state: "LOGIN"
        states: [
            State {
                name: "LOGIN"
                PropertyChanges { target: menu; visible: false}
                PropertyChanges { target: cluster; visible: false}
                PropertyChanges { target: infoPage; visible: false}
                PropertyChanges { target: icons; visible: false}
                PropertyChanges { target: rfidLogo; visible: true  }
                PropertyChanges { target: hornIcon; visible: false  }
            State {
                name: "DRIVE"
                PropertyChanges { target: menu; visible: true}
                PropertyChanges { target: cluster; visible: true}
                PropertyChanges { target: icons; visible: true}
                PropertyChanges { target: rfidLogo; visible:false  }
                PropertyChanges { target: hornIcon; visible: true  }
                PropertyChanges { target: infoPage; visible: false}
    Item {
            anchors.fill: parent
                id: infoPage
                anchors.left: parent.left
                height: parent.height
                width: 300
                errorCode: ie.hexError
                errorCode1: errorLogMessage
                voltage: io.batteryVoltage
                ontime: io.onHours
                optime: io.operatingHours
                lowcell: io.batteryLowestCell
                batttemp: io.batteryTemp
                motortemp: io.motorTemp
                celldiff: io.batteryDiff
                cutback: io.voltageCutback
                current: io.batteryCurrent
                brakerelease: io.brakerelease

    So is there a possibility to load for example this InfoPage after changing state from LOGIN to DRIVE?

    Would be really nice if someone has a few advices for me, how to get this thing faster from StartUp.


  • @LogiSch17 The Loader type is just for that, just read the docs.

  • Hi @Eeli-K
    I have allready read about the Loader, but i don´t know how to set an ID to a loaded Item so I can set them Visiblie with my States.
    And i can´t find any example for this.

  • OK,
    I think i figuered it out now is this a correct way to do that?


      id: infoPage
      anchors.left: parent.left
      height: parent.height
      width: 300
           id: infoPageLoader
           source: "ui/components/InfoPage.qml"
           onLoaded: {
                   item.errorCode = ie.hexError

    And at my State I set the Loader to active instead of visible:

    State {
        name: "INFO"
        PropertyChanges { target: infoPageLoader; active: true }

    Is this how the Loader should be used?

Log in to reply