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. Animate positionViewAtIndex in ListView

Animate positionViewAtIndex in ListView

Scheduled Pinned Locked Moved QML and Qt Quick
1 Posts 1 Posters 1.2k Views 1 Watching
  • 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.
  • E Offline
    E Offline
    ephe
    wrote on last edited by
    #1

    I have a ListView which looks like a Carousel. The centered item is the current item. When the view is flicked and the flicking does not stop exactly in the middle of the item, the item is snapped.
    I would like to have a smooth transition, no snapping. Is this possible?

    I have already read this "post":http://www.qtcentre.org/threads/40680-Animate-ListView-positionViewAtIndex, but for me it did not work and maybe there is a better solution?
    @
    import QtQuick 2.0

    Rectangle {
    width: 800
    height: 300

    ListView
    {
        id: flickable
        clip: true
        anchors.fill: parent
        orientation: ListView.Horizontal
        anchors.topMargin: 50
        anchors.bottomMargin: 50
        cacheBuffer: 800
        boundsBehavior: Flickable.StopAtBounds
        highlightFollowsCurrentItem: true
        onFlickEnded: positionViewAtIndex(currentIndex, ListView.Center)
        onMovementEnded: positionViewAtIndex(currentIndex, ListView.Center)
    
        onCurrentIndexChanged:
        {
            if (!moving && !flicking)
            {
                positionViewAtIndex(currentIndex, ListView.Center)
            }
        }
    
        onContentXChanged:
        {
            var centerItem = indexAt(contentX+width/2, contentY+height/2)
            if ( centerItem <= 0 )
            {
                centerItem = 0
            }
            else if ( centerItem > count )
            {
                centerItem = count-1
            }
            currentIndex = centerItem
        }
    
        spacing: -300/2.5
        focus: true
        header: Item {width: 300; height: 200 }
        footer: Item {width: 300; height: 200 }
    
        model: 10
        delegate:
            Rectangle
            {
            width: 300
            height: 200
            color: "lightgrey"
            border.color: "green"
            border.width: 2
            z: {
                if (flickable.currentIndex == index) flickable.currentIndex
                else if (flickable.currentIndex > index) index
                else flickable.currentIndex-index
            }
            Text
            {
                font.pointSize: 16
                text: index
                anchors.centerIn: parent
            }
    
            scale:
            {
                if(flickable.currentIndex == index)
                {
                    1.0
                }
                else if (flickable.currentIndex-1 == index || flickable.currentIndex+1 == index)
                {
                    0.83
                }
                else if (flickable.currentIndex-2 == index || flickable.currentIndex+2 == index)
                {
                    0.74
                }
                else
                {
                    0.0
                }
            }
    
            Behavior on scale
            {
                NumberAnimation { duration: 200 }
            }
        }
    }
    

    }
    @

    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