Qt QML组件以淡入顺序加载

我需要按顺序从阵列中逐个加载组件。 在将下一个组件加载到加载器之前，应该先淡出、加载，然后淡入

上述代码未正确闪烁，并显示以下消息： QML状态：检测到属性“when”的绑定循环

我做错了什么

多谢各位

import QtQuick 2.0

Rectangle {
    id: screen
    width: 400
    height: 400
    color: "black"

    Rectangle {
        id: view
        anchors.fill: parent

        Loader {
            id: loader
            onLoaded: { view.state="fadeIn"; }
        }

        states: [
            State {
                name: "fadeOut";
                PropertyChanges { target: view; opacity: 0.1; }
            },
            State {
                name: "fadeIn";
                PropertyChanges { target: view; opacity: 1; }
            },
            State {
                name: "load"; when: view.opacity == 0;
                StateChangeScript { script: { loader.sourceComponent=com_array[index]; } }
            }
        ]

        transitions: [
            Transition {
                to: "fadeIn"
                NumberAnimation { properties: "opacity"; from: 0.0; to: 0.99; duration: 2000 }
            },
            Transition {
                to: "fadeOut"
                NumberAnimation { properties: "opacity"; from: 0.99; to: 0; duration: 2000 }
            }
        ]
    }

    Timer {
        id: timer

        interval: 3000; running: true; repeat: true
        onTriggered:  {
            ++index;
            if( index >= com_array.length ) {
                index = 0
            }

            view.state="fadeOut"
        }
    }

    // -------------------------------------------------------------------
    // Components

    Item {
        id: list

        property Component red_rect_com : Component {
            Rectangle {
                width: screen.width; height: screen.height

                Rectangle {
                    anchors.fill: parent; color: "red";
                }
            }
        }

        property Component blue_rect_com : Component {
            Rectangle {
                width: screen.width; height: screen.height

                Rectangle {
                    anchors.fill: parent; color: "blue";
                }
            }
        }
    }

    property int index: 0
    property var com_array: [ list.red_rect_com, list.blue_rect_com ]
    Component.onCompleted: { loader.sourceComponent = com_array[index]; }
}

UPD

这可能对其他完整示例有帮助，并进行了更正（感谢答案作者）：

---

由于QML建立连接以在更改之间进行通信，因此会出现错误：

onStateChange

通过将不透明度更改为视图的不透明度属性的

PropertyChanges

连接。

onOpacityChanged

信号将连接到状态的when属性。

onWhenChanged

信号将连接到state属性，从而形成绑定循环

另一件事是，当您在Transition中进行

NumberAnimation

时，您不需要指定

from

和

to

属性。

属性更改

设置正确的值

不管怎样，你的州没有意义，你用错了。 您还应该等待淡出，因为它加载速度太快，您将看不到效果。 只需制作两个动画：

Rectangle {
    id: view
    anchors.fill: parent
    property var sourceComponent
    function loadComponent(component){
        fadeIn.stop(); fadeOut.start();
        sourceComponent = component;
    }
    Loader {
        id: loader
        onLoaded: { fadeOut.stop(); fadeIn.start(); }
    }
    NumberAnimation on opacity {
        id: fadeOut
        to: 0.0
        onStopped: { loader.sourceComponent= sourceComponent; }
    }
    NumberAnimation on opacity {
        id: fadeIn
        to: 1.0
    }
}

您还应将加载更改为：

property int index: 0
onIndexChanged:  { view.loadComponent(com_array[index]); }

---

但有更好的解决方案：在更改源代码之前使用加载程序帧，并在加载组件的同时使用它淡出。

ShaderSource，你是说ShaderEffectSource吗？我在帮助中找不到它。哦，是的，它可以单独使用，如果使用live:false，它将冻结。但从磁盘加载组件通常非常快您可能不需要它。@Dmitry我试图解释错误发生的原因，但我不太确定。Shader对我来说是新的，如果您知道如何将更新源示例转换为ShaderEffectSource方法，那就太好了！

property int index: 0
onIndexChanged:  { view.loadComponent(com_array[index]); }