Unsolved basic transition
-
Hi
Being new to QML I would like some advice on transitions.
My main window is defined asimport QtQuick 2.10 import appButton 1.0 Item { width: Constants.width height: Constants.height Screen01 { id: homeScreen } Connections { target: homeScreen onAppActivated:{ console.log("Activated " + appName) homeScreen.destroy(1000) } } }
Screen01 is a 'home' screen' with a series of button like items.
When one of these items is clicked I want to fade the buttons and then display the appropriate page for the button clicked.
Currently after 1 second the 'homeScreen' is destroyed as expected; but without a fade. I believe that it is now destroyed - I would like to be able to return to this screen.Is this where I need OpacityAnimator?
Or are there any other tips?Thanks
-
hi,
@GrahamLa said in basic transition:
Or are there any other tips?
You can use StackView and add transitions
Component{ id: Page1 { id: homeScreen } } Button{ onClicked:{stackview.push(homeScreen)} } StackView { id: stackview anchors{ top:menuLayout.bottom left:parent.left right:parent.right bottom:parent.bottom } pushEnter: Transition { PropertyAnimation { property: "opacity" from: 0 to:1 duration: 1000 } } pushExit: Transition { PropertyAnimation { property: "opacity" from: 1 to:0 duration: 1000 } } popEnter: Transition { PropertyAnimation { property: "opacity" from: 0 to:1 duration: 1000 } } popExit: Transition { PropertyAnimation { property: "opacity" from: 1 to:0 duration: 2000 } } }
-
@LeLev
Thanks
I have tried this with code below but it does not work as expected-
Initially I just want to view the 2 buttons ( the view shown)
-
Pressing either button should result in the corresponding view being displayed.
I keep getting the error - QML StackView: push: nothing to push -
When either button is pressed the button bar should disappear (there will be a back button on the 2 screens
I would be grateful if you would take a look at my code and make suggestions as to how I can make it work
Thanks
Code - Stacks.qml
import QtQuick 2.10 import Stacks 1.0 import QtQuick.Controls 2.3 Item { width: Constants.width height: Constants.height StackView { id: stack anchors.fill: parent } Screen01 { id: view1 } Screen02 { id: view2 } Row { spacing: 10 Button { text: "view 1" onClicked: stack.push(view1) } Button { text: "view 2" onClicked: stack.push(view2) } } }
Screen01.ui.qml
import QtQuick 2.10 import Stacks 1.0 Rectangle { width: Constants.width height: Constants.height color: "blue" Text { id: screen1 text: qsTr("Screen 1") anchors.rightMargin: -48 anchors.bottomMargin: 35 anchors.leftMargin: 48 anchors.topMargin: -35 anchors.fill: parent } }
Screen02.ui.qml
/import QtQuick 2.10 import Stacks 1.0 Rectangle { width: Constants.width height: Constants.height color: "red" Text { id: text2 text: qsTr("Screen 2") anchors.fill: parent } }
-
-
@GrahamLa Hi,
In your Code - Stacks.qml you are creating Screen01 and Screen02 directly, wrap them into a Component to create/add them later to your StackView with push()Component{ id:view1 Screen1{ } } ... stack.push(view1)