How do I scroll a ListView when an image is clicked

[modeldancecontroller]

I have a got a ListView with some images in it. Its horizontal like in the FlickrView example. I have got an arrow at the left side which when clicked should make the list scroll right

I tried

@ onClicked: {
listviewObjectPalette.flick(20.0,0.0);
}@

Also listviewObjectPalette.incrementCurrentIndex(), did not work.

I think I will need to find the last element visible and then use positionViewAtIndex() but I am not sure how to find the last visible element.

[onek24]

I would go for incrementing or decrementing the current index. Why didn't incrementCurrentIndex() work?

[modeldancecontroller]

Well I tried decrementCurrentIndex() and it did not work. But I will come up with a simple repro script tonight. Even if the index is incremented/decremented, there may be no current selection. So what would be incremented/decremented anyway ?

[onek24]

Why shouldn't there be a current selection? Since i know a ListView has always got a index. So you could increment and decrement it by the listview function or your own javascript function which sets the current index to index+1 or index-1.

[modeldancecontroller]

Here is the QML file:
https://code.google.com/p/rapid-concepts/source/browse/trunk/qml/main.qml

The UI it produces is : !http://s29.postimg.org/xk5owzohz/frame.png(Interface)!

I have added your suggestion in line 96 : https://code.google.com/p/rapid-concepts/source/browse/trunk/qml/main.qml#96

I wonder if I am doing this right.

[onek24]

Yes, this line:
@listviewObjectPalette.currentIndex = 7;@
sets the current index to 7. The current index is the index of the active Item, so we have to increment or decrement it. What you are probably searching for is:

Left Mousearea
@onClicked: {
console.log("Positioning")
listviewObjectPalette.currentIndex -= 1 // Use this
//listviewObjectPalette.decrementCurrentIndex() // Otherwise this
}@

Right Mousearea
@onClicked: {
console.log("Positioning")
listviewObjectPalette.currentIndex += 1 // Use this
//listviewObjectPalette.incrementCurrentIndex() // Otherwise this
}@

I'm not sure if it's decrementCurrentIndex() or decrementIndex(). Just try it out.

[modeldancecontroller]

Wow !! That does work !! Thanks so much :)

Now what I want is to find the index of the last visible item and set the index to 1 after that always. So right arrow bring a new item into view at the right.

[onek24]

I'm sorry, i missunderstand your last two sentences. If you explain me for what you need the next index of the last visible item i probably could help you out a bit more.

bq. Now what I want is to find the index of the last visible item and set the index to 1 after that always.

Setting the index to 1 will force the ListView to switch to the first Item but that's probably what we want here.

bq. So right arrow bring a new item into view at the right.

That's what we managed with incrementCurrentIndex(). It gets the next item because it increments the current index.

[modeldancecontroller]

Actually incrementCurrentIndex() does not get the next item because the next item may already be visible.

So ideally what an user would want is to press the right arrow and bring the next item into view. That is pressing the right arrow scrolls the list right, irrespective of the currentIndex. Its how a photo viewer would behave.

Lets assume that the following items are currently visible:
1 2 3 4

There are a total of 7 items in the list so 5 6 7 is hidden.
Lets assume currentIndex = 1
The incrementing currentIndex to 2 will not scroll the list right. Because 2 is visible already :)

What we need to do is set the currentIndex to 5 here. But how can we know that the last visible item is 4. There is no function to find that.

[modeldancecontroller]

I am thinking of using

Index lastItem = listView.indexAt(listView.view.contentTop + (listView.view.height/2, listView.view.contentRight - 1)

Basically I check at the right most part of the list and midline of the list for an item. That will be the last item.

After that I set currentIndex = lastItem + 1

[modeldancecontroller]

Hallo there again :)

So I got the scroll on click issue partially licked:

https://code.google.com/p/rapid-concepts/source/browse/trunk/qml/main.qml#84

@ onClicked: {
console.log("moving right >>>");

            var lastVisibleItem = ((listviewObjectPalette.visibleArea.xPosition +
                               listviewObjectPalette.visibleArea.widthRatio) *
                               listviewObjectPalette.contentWidth)/84;

            console.log("lastVisibleItem :", lastVisibleItem);

            listviewObjectPalette.currentIndex = lastVisibleItem + 1;

        }@

So I just find the views current position in the co-ordinate frame of the parent list view and then use it to find the first and last item, as I do know the width of each item in the view(its 84). Note that each icon rectangle is 74 units wide and they are spaced 10 units apart, so spacing has to be taken into account,

units = pixels I think !

Its pretty slow though, takes 2 seconds before it scrolls left or right ....no idea why :(
I would assume this piece of code is remarkably simple :/

[modeldancecontroller]

Solved !!

@
listviewObjectPalette.positionViewAtIndex(lastVisibleItem + 1, ListView.Visible)
listviewObjectPalette.currentIndex = lastVisibleItem + 1;
@

Its so freaking fast now, the list is a blurrrr !!

Thanks to Martinj : http://qt-project.org/forums/viewreply/15600/