Swipe View getting stuck

[Anita]

I am using swipe view under which i have three qml's loaded in each page. Total no of pages are 5. One Qml has three waveforms displayed, which changes to 1 waveform in the next page. While Swiping the view, the view gets stuck in between. Is there a signal or function to know if the swipe view has completed the swipe(i.e the page is moved to the next page)?

[J.Hilk]

hi @Anita

currentIndex and/or currentItem should change only after the transition finished.
So you can listen/react to the onCurrentIndexChanged: signal

[Anita]

@J-Hilk said in Swipe View getting stuck:

onCurrentIndexChanged

@J-Hilk Currently i have used a repeater for the 5 pages of the swipeview.
Can i load a page dynamically after the current index has changed? and is there a signal to indicate a start of the swipe as well?

[J.Hilk]

@Anita
sure:

import QtQuick 2.12
import QtQuick.Controls 2.12
import QtQuick.Window 2.2

Window {
    visible: true
    width: 400
    height: 100
    title: qsTr("Hello World")

    id:window

    Component {
        id:myComponent
        Rectangle{
            property alias pageIndex: name.text
            Component.onCompleted: console.log("Just completed")
            Component.onDestruction: console.log("Destructed", pageIndex)
            Text {
                id: name
                anchors.centerIn: parent
                onTextChanged: console.log("new text:", text)
            }
        }
    }

    SwipeView{
        id:swipeView
        anchors.fill: parent

        Repeater{
            model: 10
            delegate: Loader{
                active: index === swipeView.currentIndex
                onLoaded: item.pageIndex = index
                sourceComponent: myComponent
            }
        }
    }
}

and is there a signal to indicate a start of the swipe as well

That, I'm unsure about

[Anita]

@J-Hilk Thank you. I will use currentIndex to know if the transition has been completed.

[IntruderExcluder]

@J-Hilk said in Swipe View getting stuck:

currentIndex and/or currentItem should change only after the transition finished.
So you can listen/react to the onCurrentIndexChanged: signal

This seems isn't true. Here is an example, which illustrates that current index of view changes before swipe transition ends:

    SwipeView {
        anchors.fill: parent

        onCurrentIndexChanged: console.log("CURRENT INDEX", currentIndex)

        Rectangle { color: "red"; opacity: 0.5 }
        Rectangle { color: "green"; opacity: 0.5 }
        Rectangle { color: "blue"; opacity: 0.5 }

        Component.onCompleted: {
            contentItem.flickEnded.connect(() => console.log("FLICK ENDED"));
        }
    }

[Anita]

@IntruderExcluder
Thanks for this solution, this helped me solve the issue.

[J.Hilk]

@IntruderExcluder
uh, interesting.
Hard to tell, this would require a deeper dive into the source code. To see, when what signal is emitted when exactly 🤔

[IntruderExcluder]

Keep in mind, that there is different logic between changing index programmatically and by user interaction. The question is why it is made so? I didn't get it, too complicated.

[Anita]

@IntruderExcluder ,
yes the current index changes before the flick has been ended.
but i there a property to get to know if the flick has been done in a positive or a negative direction?

[IntruderExcluder]

You can define additional property, like:

    SwipeView {
        anchors.fill: parent

        currentIndex: 0
        property int lastIndex: 0
        onCurrentIndexChanged: {
            if (currentIndex > lastIndex) {
                console.log("INCREASED");
            } else {
                console.log("DECREASED");
            }
            lastIndex = currentIndex;
        }

        Rectangle { color: "red"; opacity: 0.5 }
        Rectangle { color: "green"; opacity: 0.5 }
        Rectangle { color: "blue"; opacity: 0.5 }
    }