QML - change how transition between pages looks

Question

I know this is probably super basic, but I am new to learning QML and have a question about transition between pages. In this example I have a button with which I want to switch between my 3 pages. the transition works, but the pages always move from the right-to-the-left-side of the window. how can I change this? I need the new page to appear as a whole right away. (e.g. when changing from firstPage to secondPage, for the user it looks like only the AppText changes, because the button is at the same position in both cases)

code example:

App {
    id: app
    width: px(250); height: px(250)

    NavigationStack {
        Page {
            id: page
            navigationBarHidden: true
            AppText { text: "startpage" }
            SimpleButton{
                x: 220; y: 0
                onClicked: page.navigationStack.push(firstPage)
            }
        }
    }

    Component {
        id: firstPage
        Page {
          navigationBarHidden: true
          AppText { text: qsTr("1st page") }
          SimpleButton{
              x: 220; y: 0
              onClicked: page.navigationStack.push(secondPage)
          }

        }
    }

    Component {
        id: secondPage
        Page {
          navigationBarHidden: true
          AppText { text: qsTr("2nd page") }
          SimpleButton{
              x: 220; y: 0
              onClicked: page.navigationStack.push(page)
          }
        }
    }
}

Any help would be greatly appreciated!

score 0 · Answer 1 · answered Nov 17 '21 at 14:11

It looks like you're using Felgo, which I think is an extra library on top of Qt. For instance, there is no built-in QML component called NavigationStack. That comes from Felgo. You should mention that in your question to get better help with it.

I've never used Felgo myself, but just looking at the documentation real quick, it looks like you need to define a new transitionDelegate for your needs. Here is the example they give where new pages fade in/fade out.

   NavigationStack {
     // custom transition delegate
     transitionDelegate: StackViewDelegate {

       pushTransition: StackViewTransition {
         NumberAnimation {
           target: enterItem
           property: "opacity"
           from: 0
           to: 1
           duration: 1000
         }
       }

       popTransition: StackViewTransition {
         NumberAnimation {
           target: exitItem
           property: "opacity"
           from: 1
           to: 0
           duration: 1000
         }
       }
     }

     initialPage: pageComponent
   }

QML - change how transition between pages looks

1 Answers1