Multi-page apps in QML

Question

I've been asked to create an app for a client which could potentially be on both android and iOS (concentrating on iOS first). So I thought that Qt may be the answer. I would like to use Qt Quick to create the app but I can't seem to find a way to efficiently handle multiple pages, baring in mind that each page could be fairly heavyweight.

So far I've tried:

• Pagination with loaders i.e. dynamically pulling in the needed screen. This works but there is a noticeable delay the first time a screen is loaded
• Making each page a component and showing only the necessary screen. This loads all pages on startup which is too memory heavy
• Making each page a component and displaying them through a ListView. Same problem as above.

There has to be a middle ground where views can essentially go to a low memory mode like in native iOS apps. Any suggestions welcome.

NOTE: The progression of the screens is not necessarily linear

Answer 1

My experience with QML is rather limited but from other UX experiences I would think the solution would involve re-factoring your pages to utilize the Loader item for their inner children/Components. From what I read it sounds like you are using the Loader item on each page itself.

For example, when your program starts load in your pages, it should be pretty light on memory otherwise there many still be large components that need to be dynamically loaded.

When the user provides input to go to a specific page, animate/show as you would normally which shouldn't be delayed. The page itself should then utilize a Loader item for each component that needs to be loaded (i.e. ones with large memory footprints).

While components are loading you could show a progress bar/wheel animation. Once the component has finished loading via the onLoaded signal you can hide the progress bar/wheel.

You may also want to look at the Loader item's asynchronous property to ensure any animation (i.e. the progress bar/wheel) while the component loads avoid glitches.

Finally when the page needs to be hidden simply set each Loader item's active property to false and it should release the loaded component.

Hope that helps and isn't repeating something you've already tried.