[Interest] listview in qml

[Bo Thorsen]

Den 03-10-2012 12:17, Ramakanthreddy_Kesireddy skrev:
>
> Hi,
>
> I'm trying to arrange list items in the form of arc as shown below and 
> want to scale each element with an OutQuad animation, and highlight 
> each element on key down event with a background image with 
> a background image which moves forward and backword on key down and up 
> respectively.
>
>                                  ListItem1
>
> *ListItem2    ---> *highlighted on key down pressed it should also 
> conatain a highlight image
>
>                           ListItem3
>
>                      ListItem4
>
>             ListItem5
>
> can someone help me with exercise Please...., This is troubing me a 
> lot.  :-(
>
>

Hi,

I've done something similar for a customer. I have a listview that moves 
with the highlight sitting in a fixed position under the selected item.

I found that the easiest way to do this is to use a separate item for 
the highlight image. Don't try using a decoration on the selected item. 
Instead, you need to calculate the position of the selected item and 
move the highlight to it.

For the arc, I would probably use a delegate item which has the space in 
it. You can calculate the correct amount of space for the item by using 
the index of the item.

Item { // This is the delegate
     TextItem {
         x: Math.sqrt(index - 5) * 30 // Or whatever...
         anchors.top: parent.top
         anchors.bottom: parent.bottom
         anchors.right: parent.right
         text: model.text
     }
}

Finally, for the scaling, you normally need to do something like

height: selected ? 30 : 20

and set an animation on the height. The problem with this is that the 
item losing the selection should get smaller with exactly the same speed 
as the new selected item grows, or the other items will change position, 
which will look bad. I don't think this is possible to do with the 
normal way.

If someone already did this, I'd be very happy to hear about the 
solution, because this seems pretty difficult to do. Things I'd try include:

- put the size decrease and increase in a list and let the item sizes 
change by indexes to that list
- set a separate variable for the size increase per item and let the 
decrease happen by subtracting the increase and add that result to the 
base size
- If the items don't move as the selected items grow, this is actually 
trivial. So, if possible, changing the look slightly would make this 
very simple to implement

I know designers hate that last bullet, but sometimes you just have to 
hit them with the big "this is not worth the extra development effort" 
hammer.

I hope this helps.

Bo.

-- 
Bo Thorsen.
Fionia Software - Qt experts for hire.

-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.qt-project.org/pipermail/interest/attachments/20121004/6c82695b/attachment.html>