QML: navigazione tra le pagine qml dalla percezione del progetto

Question

Abbiamo bisogno di sviluppare un progetto QtQuick, in cui abbiamo circa 100 schermi.

Avevo provato a creare un progetto dimostrativo per la navigazione che ha tre schermate sul clic del pulsante. Avevo usato i concetti di "Stati" nella navigazione tra le pagine. Inizialmente ho provato lo stesso utilizzando 'Loader' ma il caricatore non era in grado di conservare lo stato precedente della pagina, stava ricaricando l'intera pagina durante la navigazione.

seguito è il frammento di codice di main.qml

// 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; } 
     } 

    ] 

} 

Questo funziona bene con il piccolo POC con tre schermi, ma non è possibile definire stati per 100 schermi.

Dal punto di vista della progettazione, abbiamo concluso di creare un controller C++ controllando gli stati, la visibilità di varie pagine.

Hai bisogno di suggerimenti su come implementare la logica "Stato" in C++.

Answer 1

Suggerisco di utilizzare StackView da Qt Quick Components. Here è la sua documentazione.

Answer 2

Ecco la soluzione più semplice in QML semplice, utilizzando un elenco di pagine configurabili (come un modello) + elementi Repeater + Loader per non caricare tutto all'avvio (lazy instanciation) e non distruggere una pagina dopo averla nascosta (a non devo ricaricarlo se torniamo ad esso):

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; 
       } 
      } 
     } 
    } 
} 

Spero che aiuti!