Qml ListView full page smooth transition



  • Hello,
    I'm trying to implement a paged viewer using ListView, but I'm not able to implement transitions between the pages.
    Here's an example qml file:

    import QtQuick 2.0
    import QtQuick.Controls 1.4
    
    Rectangle {
        id: root
        height: 150; width: 300
    
        ListView{
            id: listView
            anchors.fill: parent
            model: listModel
            delegate: listDelegate
            orientation: ListView.Horizontal
            snapMode: ListView.SnapToItem
            highlightMoveDuration: 150
    
            function updatePosition(){
                //positionViewAtIndex(currentIndex);
                //positionViewAtIndex(currentIndex, ListView.Beginning);
                positionViewAtIndex(currentIndex, ListView.Center);
                //positionViewAtIndex(currentIndex, ListView.End);
                //positionViewAtIndex(currentIndex, ListView.Visible);
                //positionViewAtIndex(currentIndex, ListView.Contain);
                //positionViewAtIndex(currentIndex, ListView.SnapPosition);
            }
        }
    
        ListModel{
            id: listModel
            ListElement{ info: "Page1"; colorString:"blue"}
            ListElement{ info: "Page2"; colorString:"red" }
            ListElement{ info: "Page3"; colorString:"grey" }
            ListElement{ info: "Page4"; colorString:"green" }
            ListElement{ info: "Page5"; colorString:"orange" }
        }
    
        Component{
            id: listDelegate
    
            Rectangle{
                height: root.height
                width: root.width
                color: Qt.lighter(colorString)
                Text{
                    id: text
                    anchors.centerIn: parent
                    text: info
                    color: Qt.darker(colorString)
                }
            }
        }
    
        Button{
            id: buttonNext
            anchors.right: parent.right
            anchors.verticalCenter: parent.verticalCenter
            text: "Next Page ->"
            onClicked: {
                if(listView.currentIndex<listModel.count-1){
                    listView.currentIndex++;
                    listView.updatePosition();
                }
            }
        }
    
        Button{
            id: buttonPrevious
            anchors.left: parent.left
            anchors.verticalCenter: parent.verticalCenter
            text: "<- Previous page"
            onClicked: {
                if(listView.currentIndex>0){
                    listView.currentIndex--;
                    listView.updatePosition();
                }
            }
        }
    }
    

    My biggest problem is the updatePosition() function. If I don't pass a second parameter, calling just positionViewAtIndex(currentIndex) i get a nasty "Error: Insufficient arguments", but I have a smooth transition between the pages. If pass any kind of second parameter the page transition is lost.
    I'm seriously considering shipping my application with that nasty error...
    Am I missing something? How can I achieve smooth transition between the pages?

    Best regards,
    Loris


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.