QML StackView：动态更改replaceEnter/Exit动画

Posted 2023-02-16

【中文标题】QML StackView：动态更改replaceEnter/Exit动画

【英文标题】：QML StackView : Changing replaceEnter/Exit animation dynamically

【发布时间】：2020-06-14 16:18:00

【问题描述】：

是否可以根据要在堆栈视图中加载的下一个 QML 文件动态更改 replaceEnter/Exit Transition 动画。 情况：

我有一个 Center QML 文件，在屏幕的 4 个侧面有 4 个按钮。还有其他 4 个 QML 文件，即 Top、Bottm、Right 和 Left。按下中心 QML 上的顶部按钮时，顶部 qml 文件应从上到下转换并替换中心文件。同样，在中心 QML 上按下左键时，左侧 QML 应该从左到右进入那里的显示区域并替换中心的一个。

我尝试使用 replaceEnter/Exit 属性。但无法理解如何根据要显示的下一个 QML 动态更改它。

【参考方案1】：

查看doc，了解有关为 Stackview 自定义过渡的信息。

如果您需要多个过渡，您可以分别定义它们，然后在使用它们之前分配它们。这是一个例子：

StackView 
    id: control

    pushEnter: topTransition

    Transition 
        id: topTransition
        XAnimator 
            from: (control.mirrored ? -1 : 1) * -control.width
            to: 0
            duration: 400
            easing.type: Easing.OutCubic
        
    

    Transition 
        id: bottomTransition
        XAnimator 
            from: 0
            to: (control.mirrored ? -1 : 1) * control.width
            duration: 400
            easing.type: Easing.OutCubic
        
    

    Button 
        text: "Push page from bottom"
        onClicked: 
            control.pushEnter = bottomTransition
            control.push(bottomPage)
        
    

您必须在每次单击按钮之前明确设置所需的所有推送/弹出/替换转换。