QML : 디자인 인식에서 qml 페이지 간 이동

Question

약 100 개의 화면이있는 QtQuick 프로젝트를 개발해야합니다.

버튼 클릭시 3 개의 화면이있는 탐색을위한 데모 프로젝트를 만들려고했습니다. 나는 페이지들 사이의 네비게이션에서 'States'의 개념을 사용했다. 처음에는 'Loader'를 사용하여 동일하게 시도했지만 로더는 이전 페이지 상태를 유지할 수 없었으며 탐색 중에 전체 페이지를 다시로드했습니다.

다음은 100 화면에 대한 상태를 정의하기는 가능하지이 세 가지 스크린이 작은 POC 잘 실행 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; } 
     } 

    ] 

} 

의 코드이지만.

디자인 측면에서 우리는 C++ 컨트롤러를 만들기 위해 다양한 페이지의 상태, 가시성을 제어합니다.

C++에서 '상태'논리를 구현하는 방법에 대한 제안이 필요합니다.

Answer 1

Qt 빠른 구성 요소에서 StackView를 사용하는 것이 좋습니다. Here은 해당 설명서입니다.

Answer 2

구성 가능한 페이지 목록 (모델과 같은) + 리피터 + 로더 항목을 사용하여 시작시 모든 것을로드하지 않고 (지연 인스턴스화) 숨기고 페이지를 파기하지 않는 간단한 QML 솔루션 다시 방문하면 다시로드해야합니다.) :

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

희망이 있습니다.