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

在我的示例代码中，我想在{{1}}已更改

上播放过渡动画

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

在QML中使用事务的组件视图

1 个答案: