QML: горизонтальное мерцание визуально задерживается в StackView

Question

Предположим, у вас длинный горизонтальный контент, поэтому вы можете быстро его пролистать.Это может быть картинка или график или что-то еще.Когда содержимое проведено вправо так, что его левая сторона скрыта, и вы извлекаете страницу из стека, происходит анимация стека, когда весь контент перемещается вправо.Тем не менее, ранее скрытая часть прокручиваемого контента затем тоже сдвигается вправо и становится видимой, пока анимация не закончится.Я хочу найти способ предотвратить это.

Вот изображение затянувшегося красного прямоугольника, тщательно снятого со скоростью 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"
            }
        }
    }
}

Вопрос в том, какие обработчики следует установить, чтобы скрыть мерцающий до анимации?

Answer 1

Хорошо, я обнаружил, что на самом деле это решение не было таким сложным.(= Что мне нужно сделать, так это чтобы мой фликбэк был скрыт во время перехода, а также отображался после его завершения, поэтому я добавляю две строки:

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