QML:StackView中的水平可滑动视觉徘徊

时间:2019-02-10 10:18:05

标签: qt user-interface animation qml

假设您的内容水平较长,因此您可以将其轻拂以使用户能够快速浏览。这可能是图片,图形或其他东西。当内容向右滑动,以便其左侧被隐藏,并且您从堆栈中弹出页面时,就会发生一个堆栈动画,其中所有内容都向右移动。但是,可轻拂内容之前隐藏的部分也会向右滑动,直到动画结束为止才可见。我想找到一种防止这种情况的方法。

这是一个红色矩形徘徊的照片,以每秒25帧的速度被仔细捕获:

enter image description here

以下是说明问题的最小示例代码:

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 个答案:

答案 0 :(得分:0)

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

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