QML正在改變Pathview的路徑無需重新加載內容

Question

我正面臨着Pathview的問題。我需要更改路徑屬性以重新組織子項目，但是當我這樣做時，會導致所有創建的元素（由模型指定）被銷燬並重新創建。

有沒有辦法做到這一點，而無需重新加載內容，或者'掩蓋'眨眼效果？

例子：

import QtQuick 2.6 
import QtQuick.Window 2.2 
import QtQuick.Controls 1.2 

Window { 
    visible: true 
    width: 640 
    height: 480 
    title: qsTr("PathView path test") 

    Path { 
     id: path1 
     startX: 100; startY: 100 
     PathLine{ x: 300; y: 100 } 
    } 
    Path { 
     id: path2 
     startX: 100; startY: 100 
     PathLine{ x: 100; y: 300 } 
    } 

    ListModel { 
     id: pvModel 
     ListElement{ name: "rectangle" } 
     ListElement{ name: "rectangle" } 
     ListElement{ name: "rectangle" } 
    } 

    Component { 
     id: pvDelegate 
     Rectangle { 
      width: 50 
      height: 50 
      color: "red" 
      border.width: 1 
      Component.onCompleted: console.log("Rectangle created") 
      Component.onDestruction: console.log("Rectangle deleted") 
     } 
    } 

    property bool currentPath; 
    PathView { 
     anchors.fill: parent 
     model: pvModel 
     delegate: pvDelegate 
     path: (currentPath ? path1 : path2) 
    } 

    Button { 
     width: 100 
     height: 40 
     text: "Switch path" 
     onClicked: currentPath = !currentPath 
    } 
} 

Answer 1

的PathView似乎使用這一招，來強制重新佈局Path更改後。我發現沒有理想的方法來做這個沙發，但是爲了阻止PathView免於破壞您的代表，可以使用中間的DelegateModel來完成。

的DelegateModel實例化Item S爲view，你可以選擇，有Item小號持續性，將它們添加到persistedItems -group。

我們可能想使用一個模型的動態實例，在這個例子中，我只添加那些Item s到這個組中，被實例化，當Path將切換，並在之後的從小組中刪除開關。

正如我所說：我沒有找到（但沒有看太多），以強制重新佈局的好方法。因此，目前，我採取了一些措施來移動視圖，否則代表的x和y值將不會更新。

如果所有Item s爲可見的，無論如何，你可以標記所有的人都爲persistent在Component.onCompleted -Slot

import QtQuick 2.6 
import QtQuick.Window 2.2 
import QtQuick.Controls 1.2 
import QtQml.Models 2.2 

Window { 
    visible: true 
    width: 640 
    height: 480 
    title: qsTr("PathView path test") 

    Path { 
     id: path1 
     startX: 100; startY: 100 
     PathLine{ id: line1; x: 300; y: 100 } 
    } 
    Path { 
     id: path2 
     startX: 100; startY: 100 
     PathLine{ x: 100; y: 300 } 
    } 

    ListModel { 
     id: pvModel 
     ListElement{ name: "rectangle" } 
     ListElement{ name: "rectangle" } 
     ListElement{ name: "rectangle" } 
    } 

    DelegateModel { 
     id: pvDelegateModel 
     model: pvModel 
     delegate: Rectangle { 
      id: delegate 
      width: 50 
      height: 50 
      color: 'red' 
      border.width: 1 

      Component.onCompleted: console.log("Rectangle created") 
      Component.onDestruction: console.log("Rectangle destroyed") 
      Connections { 
       target: button 
       onStart: delegate.DelegateModel.inPersistedItems = true // Make them persistent befor the switch 
       onEnd: delegate.DelegateModel.inPersistedItems = false // Make them non-persistent after the switch 
      } 
     } 
    } 

    PathView { 
     id: pv 
     anchors.fill: parent 
     model: pvDelegateModel 
     path: path1 
     clip: true 
    } 

    Button { 
     id: button 
     width: 100 
     height: 40 
     text: "Switch path" 
     signal start 
     signal end 
     onClicked: { 
      start() 
      pv.path = (pv.path === path1 ? path2 : path1) 
      end() 
      pv.currentIndex +=1 // To force a refresh of the layout 
      pv.currentIndex -= 1 
     } 
    } 
} 

Answer 2

我不知道，如果它只是在上面的測試案例的路徑，或者這是否可能與你在真正的應用程序具有的路徑，但一種選擇可能是改變路徑的屬性而不是改變整個路徑。看起來你甚至可以動畫的路徑屬性：

import QtQuick 2.6 
import QtQuick.Window 2.2 
import QtQuick.Controls 1.2 

Window { 
    visible: true 
    width: 640 
    height: 480 
    title: qsTr("PathView path test") 

    Path { 
     id: pvPath 
     startX: 100; startY: 100 
     PathLine{ 
      x: currentPath ? 300 : 100 
      y: currentPath ? 100 : 300 
      Behavior on x { SmoothedAnimation { duration: 125 } } 
      Behavior on y { SmoothedAnimation { duration: 125 } } 
     } 
    } 

    ListModel { 
     id: pvModel 
     ListElement{ name: "rectangle" } 
     ListElement{ name: "rectangle" } 
     ListElement{ name: "rectangle" } 
    } 

    Component { 
     id: pvDelegate 
     Rectangle { 
      width: 50 
      height: 50 
      color: "red" 
      border.width: 1 
      Component.onCompleted: console.log("Rectangle created") 
      Component.onDestruction: console.log("Rectangle deleted") 
     } 
    } 

    property bool currentPath; 
    PathView { 
     anchors.fill: parent 
     model: pvModel 
     delegate: pvDelegate 
     path: pvPath 
    } 

    Button { 
     width: 100 
     height: 40 
     text: "Switch path" 
     onClicked: currentPath = !currentPath 
    } 
}