Loading...

XML

Word

Printable

Details

Type: Bug
Resolution: Invalid
Priority: Not Evaluated
Fix Version/s: None
Affects Version/s: 6.5.2
Component/s: Quick: Controls 2
Labels:
None
Environment:
Operating System: openSUSE Tumbleweed 20230926
Qt Version: 6.5.2

Platform/s:

Linux/X11
Commits:
6d0e545d7 (dev), 22b3c9533 (6.6), e5c56b2eb (6.5), 57dd88b9a (tqtc/lts-6.2)

Description

Run the code example below.

You will notice that there is no transition after clicking Push or Replace on an empty StackView.
For both transitions the property `x` is instantly set to the transition's `to` value.
If you uncomment the OpacityAnimator then the property `x` is instantly set to it's `from` value and the opacity is set to 0.
This behaviour is not observed when there is at least 1 item already on the stack.

import QtQuick
import QtQuick.Controls as Controls

Controls.ApplicationWindow {
    id: root
    width: 800
    height: 600
    visible: true

    property real x: -1
    readonly property int transitionDuration: 500
    Component {
        id: myComponent
        Rectangle {}
    }
    Column {
        anchors.verticalCenter: parent.verticalCenter
        Controls.Button {
            text: "Push red"
            onClicked: stackView.push(myComponent, {color: "red", opacity: 1})
        }
        Controls.Button {
            text: "Push blue"
            onClicked: stackView.push(myComponent, {color: "blue", opacity: 1})
        }
        Controls.Button {
            text: "Replace green"
            onClicked: stackView.replace(null, myComponent, {color: "green", opacity: 1})
        }
        Controls.Button {
            text: "Replace yellow"
            onClicked: stackView.replace(null, myComponent, {color: "yellow", opacity: 1})
        }
        Controls.Button {
            text: "Clear"
            onClicked: {stackView.clear(); root.x = -1;}
        }
        Controls.Label {
            text: "Stack items: " + stackView.depth + ", current opacity: " + stackView.currentItem?.opacity + ", value of x: " + root.x
        }
        Controls.StackView {
            id: stackView
            width: 300
            height: 300
            pushEnter: Transition {
                NumberAnimation {
                    from: 0
                    to: 1
                    duration: root.transitionDuration
                    target: root
                    property: "x"
                }
            }
            replaceEnter: Transition {
                //OpacityAnimator {
                //     from: 0
                //    to: 1
                //    duration: root.transitionDuration
                //}
                NumberAnimation {
                    from: 2
                    to: 3
                    duration: root.transitionDuration
                    target: root
                    property: "x"
                }
            }
        }
    }
}