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 为view 实例化Items，您可以选择通过将Items 添加到persistedItems-group 中来保持Items 的持久性。

由于我们可能想要使用模型的动态实例化，对于这个例子，我只将那些Items 添加到这个组中，当Path 将切换时，它们被实例化，并将它们从组中删除切换之后。

正如我所说：我没有找到（但没有看太多）强制重新布局的好方法。所以目前，我会稍微移动一下视图，否则代表的 x 和 y 值将不会更新。

如果您的所有Items 仍然可见，您可以在Component.onCompleted-slot 中将它们全部标记为persistent

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