[Qt-qml] Animate Listview Highlight transition when interactive is false

Vinayakam Murugan mvinayakam at gmail.com
Fri Feb 25 12:28:34 CET 2011


Hello

I have a requirement to manage the navigation within the listview. Also I
want to have a scroll effect when the highlight moves .

A snippet is given below.

 ListView {

    id:currentList


     width:parent.width

    height:parent.height

    anchors.top:parent.top

    anchors.bottom:parent.bottom

    highlightMoveDuration:1

    highlightMoveSpeed:500

    interactive:false

    highlightFollowsCurrentItem:true

    highlightRangeMode: ListView.StrictlyEnforceRange

    preferredHighlightBegin:0

    preferredHighlightEnd: parent.height

    smooth:true

    delegate: FocusScope{

        id:currentMenuItem

            Column{

                anchors.fill:parent

                Image {

                    source: Style.imagePath + "category_o.png"

                    anchors{top:parent.top}

                    height:parent.height

                    visible:!currentMenuItem.activeFocus

                }

                 Text {

                    id:mmText

                    width:parent.width

                    anchors{top:parent.top; horizontalCenter:
parent.horizontalCenter;}
//x:list.currentItem.x

                    height:parent.height

                    horizontalAlignment:Text.AlignHCenter

                    verticalAlignment:Text.AlignVCenter

                    text: title

                 }

                 Image {

                    anchors.top:parent.top

                    anchors.topMargin:Style.arrows.rtTopMargin

                    anchors.right:mmText.right

                    anchors.rightMargin:Style.arrows.rtRightMargin

                    source:Style.imagePath + "arrow_right.png"

                }

            }

              Keys.onUpPressed:{

                moveUp()

             }

             Keys.onDownPressed:{

                moveDown()

            }

        }

      highlight:catHighlight

    Component

    {

        id:catHighlight

        Image

        {

            source: Style.imagePath + "category_h.png"

            y:currentList.currentItem.y

            Behavior on y {

                SpringAnimation {

                    spring: 3

                    damping: 0.1

                }

            }

         }

     }



Warm Regards
~~~~~~~~~~~~~~~
Vinayak

http://www.flickr.com/photos/rightplacerighttime/
-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://lists.qt.nokia.com/pipermail/qt-qml/attachments/20110225/06a83683/attachment.html 


More information about the Qt-qml mailing list