Reloading any QML application in pure QML using a Loader component!


Hello. In the previous video I demonstrated
how to reload a QML application from the C++ side using QQmlApplicationEngine. On that video a gentleman named Daniel Kristiano suggested using a Loader for a
simpler and more elegant solution which it is. So the first step is to create a
trigger. In my previous example hooked into the event interface using an
event listener and actually did the reload with a keypress. In this example
I’ll simply add a button to the main screen which is a simpler way to do the same job.
So, Button, as everybody has buttons… right? Woops, if I can type… top: parent.top… and give it some margins so it isn’t too in the way. And text, “R” for reload… As long as we recognize what it means because this is only for debugging, I’ll say “mainLoader.reload()”. And that’s it. So now when I run the program it’ll have a button that doesn’t
really do anything. Well, I might as well show you what it looks like… Now this file “main.qml” should be renamed to something more becoming of a component, such as MainWindow.. there it is, such as “MainWindow.qml” which will be treated via the Loader as a component so it has to have a capital letter as the first letter of the filename, like so. (MainWindow.qml) And the last step is to create (recreate) main.qml which will serve as the Loader component. “id: mainLoader”, which we already had…
Loaders don’t have width and size… Set it to “active” by default…. the source is going to be our old main.qml that was renamed to “MainWindow.qml” and it is hooked to a function called reload which just does… something like… …that. And maybe we’ll say “Reload QML!”, and that’s it, so let’s try it out! And this is something we get to avoid future now because ~reload reload~… beautiful. Perfect. Thanks for watching

4 comments on “Reloading any QML application in pure QML using a Loader component!”

  1. František Patočka says:

    thanks man, you saved my school project

  2. maya fiuza says:

    Wow! Thank you, very direct! :^)

  3. Khuram Ali says:

    if one is using QQmlApplicationEngine. above solution also need to add a function call to clear the cache as QQmlApplicationEngine is maintaining a cache of loaded objects and just clearing the source will not clear the cache.

  4. SooZoodimp says:

    looks simple, but my MainWindow.qml doesn't see id mainLoader … I don't know why
    "ReferenceError: main_Loader is not defined"

Leave a Reply

Your email address will not be published. Required fields are marked *