How do load QML Components when needed?

[LogiSch17]

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. :
-LoginPage.qml
-InfoPage.qml
-ServiceMenu.qml
....

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

       InfoPage{
            id: infoPage
            anchors.left: parent.left
            anchors.top: parent.top
            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.

Thanks,
Logi

[Eeli K]

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

[LogiSch17]

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.

[LogiSch17]

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

application.qml

Item{
  id: infoPage
  anchors.left: parent.left
  anchors.top: parent.top
  height: parent.height
  width: 300
  Loader{
       id: infoPageLoader
       source: "ui/components/InfoPage.qml"
       onLoaded: {
               item.visivle=true
               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?