QML：從設計感知的qml頁面之間的導航

我們需要開發一個QtQuick項目，我們有大約100個屏幕。QML：從設計感知的qml頁面之間的導航

我曾嘗試爲按鈕單擊上有三個屏幕的導航進行演示項目。我在頁面之間的導航中使用了「國家」的概念。最初，我使用'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++中實現'狀態'邏輯。

來源

2012-10-24 DNamto

你的目標平臺是什麼？ –

目前我們針對的是Windows – DNamto

我的意思是我們針對的是目前Windows上的桌面版本 – DNamto

我建議使用Qt Quick Components的StackView。其文檔是Here。

來源

2012-10-24 14:04:02

我知道的是PageStack是專門針對Symbian平臺的。它可以在Windows操作系統上的桌面平臺上工作嗎？ – DNamto

如果您的導航模式看起來像在手機中，我認爲可以使用它。在我現在下載的桌面Qt Quick組件中，我只看到一個「視圖管理器」 - TabBar。 –

我可以從經驗中得知，PageStack可以在這裏定義爲一個解決方案。但是，這不是一個非常複雜的控制，你總是可以考慮實現你自己的。基本上你創建一個父對象，它有一個數組作爲頁面堆棧，並且你使用QML動態對象創建來創建頁面，並根據需要將它們推送到堆棧上。我強烈建議查看組件中的PageStack代碼。它根本不是很複雜，我的靈感來源於你。 – Deadron

這是簡單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; 
       } 
      } 
     } 
    } 
}

希望它有幫助！

來源

2013-03-27 09:04:31 TheBootroo

爲了更進一步，您可以使用'visible'屬性替換自定義屬性，讓我們假設'shown'將與'scale'或'opacity'和一些'Behavior {}組件一起使用，以創建漂亮的頁面更改轉換... – TheBootroo

如果頁面的QML文件不在同一個文件夾中，則需要在數組中的頁面文件名稱和「currentPage」屬性前提供相對路徑： - 如果在子文件夾中：「文件夾名/文件名」 - 如果在父文件夾中：「../文件夾/文件名」 - 最終是絕對路徑，但不是一個好主意！ – TheBootroo

Bootroo的答案不會在Quick 2中編譯。下面是更改：'main_rectangle.currentPage'和'main_rectangle.pagesList'，看起來像變量現在的作用域。希望這可以幫助某人。 –

QML：從設計感知的qml頁面之間的導航

回答

相關問題