QML: Navigating between qml pages from design perceptions

Question

We need to develop the QtQuick project, where we have about 100 screens.

I tried to create a demo project for navigation that has three screens at the click of a button. I used the concept of "state" in the navigation between pages. Initially, I tried the same with "Loader", but the loader was not able to save the previous state of the page, it reloaded the whole page during navigation.

Below is a snippet of main.qml code

// import QtQuick 1.0 // to target S60 5th Edition or Maemo 5 import QtQuick 1.1 Rectangle { id:main_rectangle width: 360 height: 640 Page1{ id:page1 } Page2{ id:page2 } Page3{ id:page3 } states: [ State { name: "page2" PropertyChanges { target: page3; visible:false; } PropertyChanges { target: page1; visible:false; } PropertyChanges { target: page2; visible:true; } }, State { name: "page1" PropertyChanges { target: page3; visible:false; } PropertyChanges { target: page2; visible:false; } PropertyChanges { target: page1; visible:true; } }, State { name: "page3" PropertyChanges { target: page1; visible:false; } PropertyChanges { target: page2; visible:false; } PropertyChanges { target: page3; visible:true; } } ] } 

This works well with a small POC with three screens, but it is not possible to determine the states for 100 screens.

From the design aspect, we concluded that the C ++ controller controls the state and visibility of various pages.

Need suggestions on how to implement the "State" logic in C ++.

Answer 1

Here is the simplest solution in simple QML, using a custom list of pages (for example, a model) + Repeater + Loader elements, so as not to load everything at startup (lazy instanciation), and not to destroy the page after hiding it (not having to reload it if we go back to him):

 import QtQuick 1.1 Rectangle { id: main_rectangle; width: 360; height: 640; // Put the name of the QML files containing your pages (without the '.qml') property variant pagesList : [ "Page1", "Page2", "Page3", "Page4", "Page5" ]; // Set this property to another file name to change page property string currentPage : "Page1"; Repeater { model: pagesList; delegate: Loader { active: false; asynchronous: true; anchors.fill: parent; visible: (currentPage === modelData); source: "%1.qml".arg(modelData) onVisibleChanged: { loadIfNotLoaded(); } Component.onCompleted: { loadIfNotLoaded(); } function loadIfNotLoaded () { // to load the file at first show if (visible && !active) { active = true; } } } } } 

Hope this helps!

Answer 2

I suggest using StackView from Qt Quick Components. Here is its documentation.