QML：从设计感知的qml页面之间的导航

Question

我们需要开发一个QtQuick项目，我们有大约100个屏幕。

我曾尝试为按钮单击上有三个屏幕的导航进行演示项目。我在页面之间的导航中使用了“国家”的概念。最初，我使用'Loader'尝试了相同的功能，但是加载程序无法保留之前的页面状态，它在导航期间重新加载整个页面。

下面是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; } 
     } 

    ] 

} 

的代码片断这与小POC与三分屏运行良好，但它不是可行的定义100米的屏幕状态。

从设计方面来看，我们总结出一个C++控制器，它控制着各种页面的状态和可见性。

需要建议如何在C++中实现'状态'逻辑。

Answer 1

我建议使用Qt Quick Components的StackView。其文档是Here。

Answer 2

这是简单QML中最简单的解决方案，它使用可配置的页面列表（如模型）+ Repeater + Loader项目在启动时不加载所有内容（懒惰实例），并且在隐藏页面后不破坏页面如果我们回到它必须重新加载它）：

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

希望它有帮助！