Get index of displayed delegate - QML ListView

Question

I created a ListView that displays a couple of pages of user-defined content (plain text). The page displayed is a delegate. Only one page is displayed at a time. I decided to use it to get binding to one element, just like the iOS launcher works. The user simply clicks between the pages. (this should be used on touch screens)

I need to have the index of the currently displayed page for some operation. currentIndex ListView always remains 0. How can I get it?

For those who prefer the code:

ListView { onCurrentIndexChanged: console.log(currentIndex) // this gets called only once - at startup delegate: Column { // The page displayed, only one page at a time } } 

thanks

Answer 1

There are many ways to get the index of the current item that is displayed on the screen. If you can get the xy coordinate of the current page, you can use the indexAt method in the ListView.

And in each delegate, you can find the index using the index role within the delegate. index is similar to the role you declared in your model and ListView is automatically assigned. For instance,

 ListView { delegate: Column { property int indexOfThisDelegate: index //... } } 

The index role is introduced here :

A special index role containing the index of an element in the model is also available to the delegate. Note that this index is set to -1 if the item is removed from the model ...

Another way is to explicitly assign a value to the currentItem property in the ListView, so that the view can scroll by itself. Here is a simple example in the Qt documentation that looks like your application.

Answer 2

You can use the attached properties of the ListView ( ListView ) class. They are attached to each instance of the delegate.

See an example ListView.isCurrentItem or ListView.view:

     ListView {
         width: 180;  height: 200

         Component {
             id: contactsDelegate
             Rectangle {
                 id: wrapper
                 width: 180
                 height: contactInfo.height
                 color: ListView.isCurrentItem?  "black": "red"
                 Text {
                     id: contactInfo
                     text: name + ":" + number
                     color: wrapper.ListView.isCurrentItem?  "red": "black"
                 }
             }
         }

         model: ContactModel {}
         delegate: contactsDelegate
         focus: true
     }

Answer 3

You can do this:

 QModelIndex index =this->indexAt(event->pos()); this ->setCurrentIndex(index); 

Answer 4

I know this is pretty old, but I had the same problem, and it took me a while to find a way to get currentIndex that would work for me. In my case, I need to change the width of my ListView, so I have to retell currentIndex manually each time.

But then I found the highlightRangeMode property. When it is set to ListView.StrictlyEnforceRange , currentIndex is always updated automatically and contains the correct index of the current visible item.

 ListView { highlightRangeMode: ListView.StrictlyEnforceRange // ... }