Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

Swipe View getting stuck



  • 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)?


  • Moderators

    hi @Anita

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



  • @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?


  • Moderators

    @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



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



  • @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"));
            }
        }
    


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


  • Moderators

    @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 🤔



  • 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.



  • @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?



  • 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 }
        }
    

Log in to reply