QML：在 StackView 中，水平可滑动的视觉效果会持续存在

Posted 2023-02-14

【中文标题】QML：在 StackView 中，水平可滑动的视觉效果会持续存在

【英文标题】：QML: horizontal flickable visually lingers in StackView

【发布时间】：2019-02-10 10:18:05

【问题描述】：

假设您有一个较长的水平内容，因此您将其置于可滑动的状态以供用户滑动浏览。这可能是一张图片或图表或其他东西。当内容向右滑动以隐藏其左侧时，从堆栈中弹出页面时，会出现堆栈动画，其中所有内容都向右移动。然而，可滑动内容的之前隐藏的部分随后也会向右滑动并变得可见，直到动画结束。我想找到一种方法来防止这种情况发生。

这是一个红色矩形挥之不去的图片，以每秒 25 帧的速度仔细捕捉：

这是说明问题的最小示例代码：

import QtQuick 2.9
import QtQuick.Controls 2.2

ApplicationWindow 
    id: window
    visible: true
    width: 640
    height: 480

    header: ToolBar 
        contentHeight: toolButton.implicitHeight

        ToolButton 
            id: toolButton
            text: "<"
            onClicked: 
                stackView.pop()
            
        
    

    StackView 
        id: stackView
        initialItem: pageZero
        anchors.fill: parent
    

    Component 
        id: pageZero

        Column 
            Label 
                text: "Page zero"
            
            Button 
                text: "next"
                onClicked:  stackView.push(pageOne) 
            
        
    
    Component 
        id: pageOne

        Flickable 
            height: 200
            width: 200
            contentHeight: 200
            contentWidth: 300

            Rectangle 
                height: 200
                width: 300
                color: "red"
            
        
    

问题是，我应该放置什么处理程序来隐藏可轻弹在动画开始之前？

【参考方案1】：

好的，我发现了，实际上这个解决方案并不难。 (= 我需要做的是在过渡期间隐藏我的 flickable，并在过渡结束后显示，所以我添加了两行：

        Flickable 
            height: 200
            width: 200
            contentHeight: 200
            contentWidth: 300
            // watch this next line
            StackView.onDeactivating: rect.visible = false
            StackView.onActivating: rect.visible = true

            Rectangle 
                id: rect
                height: 200
                width: 300
                color: "red"