State Transition Problem

[Maxim DC]

I have 2 states, page1 and page2, i want to make a sliding transition so page1 goes ofscreen and a the same time page2 comes in. I use a Loader Component and i don't now where to start. Here is my main code.

ApplicationWindow {
    title: qsTr("Test3")
    width: Screen.desktopAvailableWidth
    height: Screen.desktopAvailableHeight
    visible: true
    Loader {
        id: pageLoader
        anchors.fill: parent
        source: "PageMain.qml"
        states: [
            State {
                name: "MAIN"
                PropertyChanges { target: pageLoader; source: "PageMain.qml"}
            },
            State {
                name: "FAVORITES"
                PropertyChanges { target: pageLoader; source: "PageFavorites.qml"}
            }
        ]
        transitions: [
            Transition {
                to: "*"
                // Transition
            }
        ]
    }
}

[p3c0]

Hi @Maxim-DC and Welcome,
IMO, instead of using a Loader and loading QML's here for sliding purpose would be a bad idea. You may need to maintain a lot of States and Transitions.
Instead I would suggest you to use StackView. To load and unload you just need to push and pop the QML files into it. And yes it provides transitions too. By default it will slide.
If you don't want to use StackView then you can use a ListView with its delegate as a Loader which will load your QML files. Just change ListView's orientation to Qt.Horizontal. By incrementing and decrementing the currentIndex the items in the ListView will slide accordingly. Also just make sure the delegates size is filled to the screen size to get a feel similar to what you are trying.

[Maxim DC]

@p3c0 Thanks for this reply, but would it be possible to load .qml trough Stackview, because putting the whole code in 1 file is very chaotic

[p3c0]

@Maxim-DC Yes it is possible. You can find an example here. The exact file in it where it is used.