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
Forum Updated to NodeBB v4.3 + New Features

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