Question

我需要按顺序从数组中逐个加载组件。在将下一个组件加载到Loader之前，它应该是淡出，加载然后淡入。

上面的代码无法正确闪烁并显示以下消息： “QML状态：检测到属性的绑定循环”时“

我做错了什么？

谢谢

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

这可能对其他完整的校正示例有用（感谢答案作者）：

import QtQuick 2.0

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

    Rectangle {
        id: view
        anchors.fill: parent
        property var sourceComponent
        opacity: 0

        function loadComponent( component, is_first_start ) {
            sourceComponent = component;

            if( is_first_start ) {
                fadeOut.stop(); fadeIn.start();
            }
            else {
                fadeIn.stop(); fadeOut.start();
            }
        }

        Loader {
            id: loader
            onLoaded: {
                fadeOut.stop();
                fadeIn.start();
            }
        }

        NumberAnimation on opacity {
            id: fadeOut;
            to: 0.0;
            duration: 2000;
            onStopped: { loader.sourceComponent=view.sourceComponent; }
        }

        NumberAnimation on opacity {
            id: fadeIn;
            to: 1.0;
            duration: 2000
        }
    }

    Timer {
        id: timer

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

            view.loadComponent( com_array[index], false );
        }
    }

    // -------------------------------------------------------------------
    // 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: { view.loadComponent( com_array[index], true ); }
}

Answer 1

它为您提供错误，因为QML建立了连接以便在更改之间进行通信：

onStateChange由PropertyChanges连接，将不透明度更改为视图的不透明度属性。属性时onOpacityChanged信号将连接到State。 onWhenChanged信号将连接到state属性，从而使绑定循环。

另一件事是，当您在Transition中进行NumberAnimation时，您无需指定from和to属性。 PropertyChanges设置正确的值。

无论如何，你的状态没有意义，你使用它们是错误的。您还应该等待fadeOut，因为它会加载得太快以至于您无法看到效果。只需制作两个动画：

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]); }

但是有更好的解决方案：在更改源代码之前使用ShaderEffectSource获取Loader框架，并在加载组件的同时将其用于fadeOut。

QML组件依次加载淡入淡出

1 个答案: