qt - QML 中带有事务的组件视图

Question

我尝试实现View，它渲染一些Component并在更改源组件时播放淡出/淡入淡出动画。我的代码：

import QtQuick 2.1

Item {
    id: componentViewRoot
    onOpacityChanged: console.log(opacity)
    property Component source: null

        PropertyAnimation {
            id: fadeout
            target: componentViewRoot;
            alwaysRunToEnd: true
            property: "opacity";
            to: 0;
            duration: 1000

        }
        PropertyAnimation {
            id: fadein
            target: componentViewRoot;
            alwaysRunToEnd: true
            property: "opacity";
            to: 1;
            duration: 1000
        }

    onSourceChanged: {
        fadeout.start()
        loader.sourceComponent = source;
    }
    Loader{
        id:loader
        anchors.fill: parent
        onLoaded: fadein.start()
    }
}

但它不能正常工作（不播放动画）。请帮我。

UDP：我想View从不StackView深入QtQuick.Controls地使用它。

一些代码：

Rectangle {
    id: mainObjectRoot
    implicitHeight: 440
    implicitWidth:  720
    color: "#f8f8f8"


    ComponentView{
        id: compView
        height: 265
        width: 680
        onXChanged: console.log("compView"+x)
        onYChanged: console.log("compView"+y)
        anchors.right: parent.right
        anchors.rightMargin: 20
        anchors.bottom: parent.bottom
        anchors.bottomMargin: 45
        anchors.top: parent.top
        anchors.topMargin: 130
        anchors.left: parent.left
        anchors.leftMargin: 20
        source: passwordView

    }

    Connections{
        target: sessionManager
        onRequiredPasswordChanged :{
            if(sessionManager.requiredPassword){

                compView.source = passwordView
            }
            else{
                compView.source = mainview
            }
        }
    }

    Component {
        id: passwordView
        PasswordView{

        }
    }
    Component {
        id: helpview
        HelpView{

        }
    }
    Component{
        id: mainview
        MainView{

        }
    }
    Component{
        id: settingsview
        SettingsView{

        }
    }

在我的示例代码中，我想在compView.source更改时播放过渡动画

Answer 1

现在我是@ComponentView.qml：

import QtQuick 2.1

Item {
    id: componentViewRoot
    //@source for setting
    property Component source: null
    //@item for acces rendering item
    property alias item: loader.item

    function __changeItem(component){
        anim._component = component
        anim.start()

    }

    SequentialAnimation {
        id:anim
        property Component _component: null
        NumberAnimation {
            id: fadeout
            target: componentViewRoot
            alwaysRunToEnd: true
            property: "opacity"
            from : 1
            to: 0
        }
        PropertyAction{
            target: loader
            property: "sourceComponent"
            value: anim._component
        }

        NumberAnimation {
            id: fadein
            target: componentViewRoot
            alwaysRunToEnd: true
            property: "opacity"
            from : 0
            to: 1
        }
    }
    onSourceChanged: {
        __changeItem(source)
    }
    Loader{
        id:loader
        anchors.fill: parent
    }
}