QML转换导致多次设置属性，这种不良行为的根源在哪里？

我有一个浏览器和播放器（每个都在一个加载器中）。我希望每当用户从浏览器单击媒体时，都会加载并显示播放机。
因此，我使用了如下状态：

            ╔═>>>╣middle state: load player╠>>>══╗  
            ║                                    ║
            ╩                                    ╩
first state: display browser         second state: display player
            ╦                                    ╦
            ║                                    ║
            ╚═<<<╣middle state: load browser╠<<<═╝

import QtQuick 2.6

Item {
    id: root
    signal back()

    Row {
        id: row
        height: parent.height
        Loader {
            id: videoBrowserLoader
            width: root.width
            height: root.height
            asynchronous: true
            active: false
            focus: active
            onStatusChanged: {}
            sourceComponent: videoBrowserComponent
            onActiveChanged: console.log("Browser Loader is active:"+active)
        }
        Loader {
            id: videoPlayerLoader
            width: root.width
            height: root.height
            asynchronous: true
            active: false
            focus: active
            onStatusChanged: {}
            sourceComponent: videoPlayerComponent
            onActiveChanged: console.log("Player Loader is active:"+active)
        }
        states: [
            State {
                name: "start"
                PropertyChanges {
                    target: videoBrowserLoader
                    active: true
                    asynchronous: false
                }
                PropertyChanges {
                    target: videoPlayerLoader
                    active: false
                }
                PropertyChanges {
                    target: row
                    x: 0
                }
            },
            State {
                name: "browser"
                PropertyChanges {
                    target: videoBrowserLoader
                    active: true
                    asynchronous: true
                }
                PropertyChanges {
                    target: videoPlayerLoader
                    active: false
                }
                PropertyChanges {
                    target: row
                    x: 0
                }
            },
            /*State {
                extend: row.oldState
                name: "middleState"
                PropertyChanges {
                    target: videoBrowserLoader
                    active: true
                    asynchronous: true
                }
                PropertyChanges {
                    target: videoPlayerLoader
                    active: true
                }
            },*/
            State {
                name: "middleState_browserToPlayer"
                PropertyChanges {
                    target: videoBrowserLoader
                    active: true
                    asynchronous: true
                }
                PropertyChanges {
                    target: videoPlayerLoader
                    active: true
                }
                PropertyChanges {
                    target: row
                    x: 0
                }
            },
            State {
                name: "player"
                PropertyChanges {
                    target: videoBrowserLoader
                    active: false
                    asynchronous: true
                }
                PropertyChanges {
                    target: videoPlayerLoader
                    active: true
                }
                PropertyChanges {
                    target: row
                    x: -root.width
                }
            },
            State {
                name: "middleState_playerToBrowser"
                PropertyChanges {
                    target: videoBrowserLoader
                    active: true
                    asynchronous: true
                }
                PropertyChanges {
                    target: videoPlayerLoader
                    active: true
                }
                PropertyChanges {
                    target: row
                    x: -root.width
                }
            }
        ]
        property string oldState: ""
        state: "start"
        onStateChanged: console.log("$$$$State: "+state)
        transitions: [
            Transition {
                id: problematicTransition
                from: "middleState_browserToPlayer"
                to: "player"
                SequentialAnimation {
                    NumberAnimation { target: row; property: "x"; duration: 1000; easing.type: Easing.InOutQuint }
                    PropertyAction { target: videoBrowserLoader; property: "active" }
                    ScriptAction { script: console.log("%%%%FINISHED"); }
                }
            },
            Transition {
                from: "middleState_playerToBrowser"
                to: "browser"
                SequentialAnimation {
                    NumberAnimation { target: row; property: "x"; duration: 1000; easing.type: Easing.InOutQuint }
                    PropertyAction { target: videoPlayerLoader; property: "active" }
                    ScriptAction { script: console.log("%%%%FINISHED"); }
                }
            },
            Transition {
                from: "middleState"
                to: "player"
                SequentialAnimation {
                    NumberAnimation { target: row; property: "x"; duration: 1000; easing.type: Easing.InOutQuint }
                    PropertyAction { target: videoBrowserLoader; property: "active" }
                }
            },
            Transition {
                from: "middleState"
                to: "browser"
                SequentialAnimation {
                    NumberAnimation { target: row; property: "x"; duration: 1000; easing.type: Easing.InOutQuint }
                    PropertyAction { target: videoPlayerLoader; property: "active" }
                }
            }
        ]
    }

    Component {
        id: videoPlayerComponent
        VideoPlayer {
            id: videoPlayer
            width: root.width
            height: root.height
            visible: true
            onBack: { /*row.oldState = row.state; row.state = "middleState";*/row.state = "middleState_playerToBrowser"; }
            Component.onCompleted: {
                videoPlayer.focus = true;
                console.log("####MAKE PLAYER ON");
                row.state = "player";
            }
        }
    }
    Component {
        id: videoBrowserComponent
        VideoBrowser {
            id: videoBrowser
            width: root.width
            height: root.height
            visible: true
            onBack: { root.back(); }
            onOpenMedia: { /*row.oldState = row.state; row.state = "middleState";*/row.state = "middleState_browserToPlayer" /*mediaController.openMedia(url);*/ }
            Component.onCompleted: {
                videoBrowser.focus = true;
                console.log("####MAKE BROWSER ON");
                row.state = "browser" ;
            }
        }
    }
}

qml: $$$$State: middleState_browserToPlayer
qml: Player Loader is active:true
qml: ####MAKE PLAYER ON
qml: $$$$State: player
qml: Browser Loader is active:false
qml: Browser Loader is active:true
qml: ####MAKE BROWSER ON
qml: $$$$State: browser
qml: Player Loader is active:false

qml: $$$$State: middleState_browserToPlayer
qml: Player Loader is active:true
qml: ####MAKE PLAYER ON
qml: $$$$State: player
qml: Browser Loader is active:false
qml: $$$$State: middleState_playerToBrowser
qml: Browser Loader is active:true

如果我运行此代码，输出将如下所示：

            ╔═>>>╣middle state: load player╠>>>══╗  
            ║                                    ║
            ╩                                    ╩
first state: display browser         second state: display player
            ╦                                    ╦
            ║                                    ║
            ╚═<<<╣middle state: load browser╠<<<═╝

import QtQuick 2.6

Item {
    id: root
    signal back()

    Row {
        id: row
        height: parent.height
        Loader {
            id: videoBrowserLoader
            width: root.width
            height: root.height
            asynchronous: true
            active: false
            focus: active
            onStatusChanged: {}
            sourceComponent: videoBrowserComponent
            onActiveChanged: console.log("Browser Loader is active:"+active)
        }
        Loader {
            id: videoPlayerLoader
            width: root.width
            height: root.height
            asynchronous: true
            active: false
            focus: active
            onStatusChanged: {}
            sourceComponent: videoPlayerComponent
            onActiveChanged: console.log("Player Loader is active:"+active)
        }
        states: [
            State {
                name: "start"
                PropertyChanges {
                    target: videoBrowserLoader
                    active: true
                    asynchronous: false
                }
                PropertyChanges {
                    target: videoPlayerLoader
                    active: false
                }
                PropertyChanges {
                    target: row
                    x: 0
                }
            },
            State {
                name: "browser"
                PropertyChanges {
                    target: videoBrowserLoader
                    active: true
                    asynchronous: true
                }
                PropertyChanges {
                    target: videoPlayerLoader
                    active: false
                }
                PropertyChanges {
                    target: row
                    x: 0
                }
            },
            /*State {
                extend: row.oldState
                name: "middleState"
                PropertyChanges {
                    target: videoBrowserLoader
                    active: true
                    asynchronous: true
                }
                PropertyChanges {
                    target: videoPlayerLoader
                    active: true
                }
            },*/
            State {
                name: "middleState_browserToPlayer"
                PropertyChanges {
                    target: videoBrowserLoader
                    active: true
                    asynchronous: true
                }
                PropertyChanges {
                    target: videoPlayerLoader
                    active: true
                }
                PropertyChanges {
                    target: row
                    x: 0
                }
            },
            State {
                name: "player"
                PropertyChanges {
                    target: videoBrowserLoader
                    active: false
                    asynchronous: true
                }
                PropertyChanges {
                    target: videoPlayerLoader
                    active: true
                }
                PropertyChanges {
                    target: row
                    x: -root.width
                }
            },
            State {
                name: "middleState_playerToBrowser"
                PropertyChanges {
                    target: videoBrowserLoader
                    active: true
                    asynchronous: true
                }
                PropertyChanges {
                    target: videoPlayerLoader
                    active: true
                }
                PropertyChanges {
                    target: row
                    x: -root.width
                }
            }
        ]
        property string oldState: ""
        state: "start"
        onStateChanged: console.log("$$$$State: "+state)
        transitions: [
            Transition {
                id: problematicTransition
                from: "middleState_browserToPlayer"
                to: "player"
                SequentialAnimation {
                    NumberAnimation { target: row; property: "x"; duration: 1000; easing.type: Easing.InOutQuint }
                    PropertyAction { target: videoBrowserLoader; property: "active" }
                    ScriptAction { script: console.log("%%%%FINISHED"); }
                }
            },
            Transition {
                from: "middleState_playerToBrowser"
                to: "browser"
                SequentialAnimation {
                    NumberAnimation { target: row; property: "x"; duration: 1000; easing.type: Easing.InOutQuint }
                    PropertyAction { target: videoPlayerLoader; property: "active" }
                    ScriptAction { script: console.log("%%%%FINISHED"); }
                }
            },
            Transition {
                from: "middleState"
                to: "player"
                SequentialAnimation {
                    NumberAnimation { target: row; property: "x"; duration: 1000; easing.type: Easing.InOutQuint }
                    PropertyAction { target: videoBrowserLoader; property: "active" }
                }
            },
            Transition {
                from: "middleState"
                to: "browser"
                SequentialAnimation {
                    NumberAnimation { target: row; property: "x"; duration: 1000; easing.type: Easing.InOutQuint }
                    PropertyAction { target: videoPlayerLoader; property: "active" }
                }
            }
        ]
    }

    Component {
        id: videoPlayerComponent
        VideoPlayer {
            id: videoPlayer
            width: root.width
            height: root.height
            visible: true
            onBack: { /*row.oldState = row.state; row.state = "middleState";*/row.state = "middleState_playerToBrowser"; }
            Component.onCompleted: {
                videoPlayer.focus = true;
                console.log("####MAKE PLAYER ON");
                row.state = "player";
            }
        }
    }
    Component {
        id: videoBrowserComponent
        VideoBrowser {
            id: videoBrowser
            width: root.width
            height: root.height
            visible: true
            onBack: { root.back(); }
            onOpenMedia: { /*row.oldState = row.state; row.state = "middleState";*/row.state = "middleState_browserToPlayer" /*mediaController.openMedia(url);*/ }
            Component.onCompleted: {
                videoBrowser.focus = true;
                console.log("####MAKE BROWSER ON");
                row.state = "browser" ;
            }
        }
    }
}

qml: $$$$State: middleState_browserToPlayer
qml: Player Loader is active:true
qml: ####MAKE PLAYER ON
qml: $$$$State: player
qml: Browser Loader is active:false
qml: Browser Loader is active:true
qml: ####MAKE BROWSER ON
qml: $$$$State: browser
qml: Player Loader is active:false

qml: $$$$State: middleState_browserToPlayer
qml: Player Loader is active:true
qml: ####MAKE PLAYER ON
qml: $$$$State: player
qml: Browser Loader is active:false
qml: $$$$State: middleState_playerToBrowser
qml: Browser Loader is active:true

如您所见，（问题）浏览器加载程序在输出的第5行和第6行中立即卸载并再次加载。
如果我删除转换

id:problematicstransition

输出如下：

            ╔═>>>╣middle state: load player╠>>>══╗  
            ║                                    ║
            ╩                                    ╩
first state: display browser         second state: display player
            ╦                                    ╦
            ║                                    ║
            ╚═<<<╣middle state: load browser╠<<<═╝

import QtQuick 2.6

Item {
    id: root
    signal back()

    Row {
        id: row
        height: parent.height
        Loader {
            id: videoBrowserLoader
            width: root.width
            height: root.height
            asynchronous: true
            active: false
            focus: active
            onStatusChanged: {}
            sourceComponent: videoBrowserComponent
            onActiveChanged: console.log("Browser Loader is active:"+active)
        }
        Loader {
            id: videoPlayerLoader
            width: root.width
            height: root.height
            asynchronous: true
            active: false
            focus: active
            onStatusChanged: {}
            sourceComponent: videoPlayerComponent
            onActiveChanged: console.log("Player Loader is active:"+active)
        }
        states: [
            State {
                name: "start"
                PropertyChanges {
                    target: videoBrowserLoader
                    active: true
                    asynchronous: false
                }
                PropertyChanges {
                    target: videoPlayerLoader
                    active: false
                }
                PropertyChanges {
                    target: row
                    x: 0
                }
            },
            State {
                name: "browser"
                PropertyChanges {
                    target: videoBrowserLoader
                    active: true
                    asynchronous: true
                }
                PropertyChanges {
                    target: videoPlayerLoader
                    active: false
                }
                PropertyChanges {
                    target: row
                    x: 0
                }
            },
            /*State {
                extend: row.oldState
                name: "middleState"
                PropertyChanges {
                    target: videoBrowserLoader
                    active: true
                    asynchronous: true
                }
                PropertyChanges {
                    target: videoPlayerLoader
                    active: true
                }
            },*/
            State {
                name: "middleState_browserToPlayer"
                PropertyChanges {
                    target: videoBrowserLoader
                    active: true
                    asynchronous: true
                }
                PropertyChanges {
                    target: videoPlayerLoader
                    active: true
                }
                PropertyChanges {
                    target: row
                    x: 0
                }
            },
            State {
                name: "player"
                PropertyChanges {
                    target: videoBrowserLoader
                    active: false
                    asynchronous: true
                }
                PropertyChanges {
                    target: videoPlayerLoader
                    active: true
                }
                PropertyChanges {
                    target: row
                    x: -root.width
                }
            },
            State {
                name: "middleState_playerToBrowser"
                PropertyChanges {
                    target: videoBrowserLoader
                    active: true
                    asynchronous: true
                }
                PropertyChanges {
                    target: videoPlayerLoader
                    active: true
                }
                PropertyChanges {
                    target: row
                    x: -root.width
                }
            }
        ]
        property string oldState: ""
        state: "start"
        onStateChanged: console.log("$$$$State: "+state)
        transitions: [
            Transition {
                id: problematicTransition
                from: "middleState_browserToPlayer"
                to: "player"
                SequentialAnimation {
                    NumberAnimation { target: row; property: "x"; duration: 1000; easing.type: Easing.InOutQuint }
                    PropertyAction { target: videoBrowserLoader; property: "active" }
                    ScriptAction { script: console.log("%%%%FINISHED"); }
                }
            },
            Transition {
                from: "middleState_playerToBrowser"
                to: "browser"
                SequentialAnimation {
                    NumberAnimation { target: row; property: "x"; duration: 1000; easing.type: Easing.InOutQuint }
                    PropertyAction { target: videoPlayerLoader; property: "active" }
                    ScriptAction { script: console.log("%%%%FINISHED"); }
                }
            },
            Transition {
                from: "middleState"
                to: "player"
                SequentialAnimation {
                    NumberAnimation { target: row; property: "x"; duration: 1000; easing.type: Easing.InOutQuint }
                    PropertyAction { target: videoBrowserLoader; property: "active" }
                }
            },
            Transition {
                from: "middleState"
                to: "browser"
                SequentialAnimation {
                    NumberAnimation { target: row; property: "x"; duration: 1000; easing.type: Easing.InOutQuint }
                    PropertyAction { target: videoPlayerLoader; property: "active" }
                }
            }
        ]
    }

    Component {
        id: videoPlayerComponent
        VideoPlayer {
            id: videoPlayer
            width: root.width
            height: root.height
            visible: true
            onBack: { /*row.oldState = row.state; row.state = "middleState";*/row.state = "middleState_playerToBrowser"; }
            Component.onCompleted: {
                videoPlayer.focus = true;
                console.log("####MAKE PLAYER ON");
                row.state = "player";
            }
        }
    }
    Component {
        id: videoBrowserComponent
        VideoBrowser {
            id: videoBrowser
            width: root.width
            height: root.height
            visible: true
            onBack: { root.back(); }
            onOpenMedia: { /*row.oldState = row.state; row.state = "middleState";*/row.state = "middleState_browserToPlayer" /*mediaController.openMedia(url);*/ }
            Component.onCompleted: {
                videoBrowser.focus = true;
                console.log("####MAKE BROWSER ON");
                row.state = "browser" ;
            }
        }
    }
}

qml: $$$$State: middleState_browserToPlayer
qml: Player Loader is active:true
qml: ####MAKE PLAYER ON
qml: $$$$State: player
qml: Browser Loader is active:false
qml: Browser Loader is active:true
qml: ####MAKE BROWSER ON
qml: $$$$State: browser
qml: Player Loader is active:false

qml: $$$$State: middleState_browserToPlayer
qml: Player Loader is active:true
qml: ####MAKE PLAYER ON
qml: $$$$State: player
qml: Browser Loader is active:false
qml: $$$$State: middleState_playerToBrowser
qml: Browser Loader is active:true

在从播放器向后到浏览器的过程中，将生成以下输出：

qml: ####MAKE BROWSER ON
qml: $$$$State: browser
qml: Player Loader is active:false
qml: %%%%FINISHED

如您所见，从播放机向后移动到浏览器时没有任何问题，工作正常。
我的密码有错误吗？这是虫子吗