Component View with transaction in QML

Question

I tries to implement View, which rendering some Component and on change source Component plays fadeout/fadein animation. My code:

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

But it not working (don't plays animation) properly. Please help me.

UDP: I want use this View like StackView from QtQuick.Controls without depth.

Some code:

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{

        }
    }

In my example code I want to play transition animation on compView.source changed

Could you please also post some sample code how you intend to use your view element? — sebasgo

Dcow Dcow · Accepted Answer · 2013-09-25T14:39:50

For now I was @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
    }
}

Component View with transaction in QML

1 Answers