QML Page Transition
-
Hello, I want to make an efficient transition between my QML pages. I tried this method but it's too slow and closing the view causes a bad transition. How can I achieve this?
ApplicationWindow{
id:screen
color:"white"
width: Screen.width
height:Screen.height
visible:trueStackView{ id:stackView anchors.fill:parent initialItem: loginPage } Component{ id:loginPage Item { width: parent.width height: parent.height // Buton Rectangle { id: startButtonContainer width: parent.width * 0.1 height: 50 color: "#388E3C" radius: 20 anchors.horizontalCenter: parent.horizontalCenter anchors.top: passwordFieldContainer.bottom anchors.topMargin: 40 // Butonun tıklanabilir alanını tanımlar MouseArea { anchors.fill: parent onClicked: { if(usernameField.text === "" || passwordField.text === ""){ errorMessage.text = "kullanıcı adı veya şifre boş bırakılamaz!" errorMessage.visible = true } else if (usernameField.text === "cnş" && passwordField.text === "1234") { stackView.push(Qt.resolvedUrl("qrc:/qml/MainRootWindow.qml")) screen.visible=false } else { // Hatalı giriş mesajı errorMessage.text = "kullanıcı adı veya şifre yanlış!" errorMessage.visible = true } } }
-
Why are you closing the view, then? I don't think you need to. Instead of closing it, replace the current item in the StackView (like you do in
stackView.push(Qt.resolvedUrl("qrc:/qml/MainRootWindow.qml"))
) . So remove thisscreen.visible=false
By default, StackView implements different transition for different events like popEnter, pushExit, ect. Here's an example of how to implement your own transitions: https://doc.qt.io/qt-6/qtquickcontrols-customize.html#customizing-stackview