Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. Qml ListView full page smooth transition
Forum Updated to NodeBB v4.3 + New Features

Qml ListView full page smooth transition

Scheduled Pinned Locked Moved Unsolved QML and Qt Quick
1 Posts 1 Posters 824 Views
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • I Offline
    I Offline
    Illogica
    wrote on last edited by
    #1

    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

    1 Reply Last reply
    0

    • Login

    • Login or register to search.
    • First post
      Last post
    0
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    • Get Qt Extensions
    • Unsolved