[Qt-qml] Add Remove animations in ListView

aaron.kennedy at nokia.com aaron.kennedy at nokia.com
Tue Mar 30 02:54:32 CEST 2010


Hi,

On 30/03/10 10:31 AM, "Jones Martin (Nokia-D-Qt/Brisbane)"
<martin.jones at nokia.com> wrote:

> On Tuesday 30 March 2010, ext Adriano Rezende wrote:
>> Hi everyone,
>> 
>> Is there a way to apply add/remove animations in the ListView when an
>> item is added or removed from a model?
>> 
>> The use cases most wanted by designers are:
>> 
>> 1. When an item is added: All items below it will move down and the
>> new item will fade in in the new empty space
>> 2. When an item is removed: The removed item will fade out, and all
>> items below it will move up to reorganize the list
>> 3. When an item is moved: A sequential animation of (2) and (1) will take
>> place
>> 
>> A big problem that raises in this scenario is how to keep model and
>> list in 'synchrony', since the model accepts synchronous operations
>> and the list will handle these operations asynchronously.
>> If the model does not have a freeze operation, to avoid other
>> add/remove requests while animating, at some point some animations in
>> the queue will be dropped since the model data/order does not match
>> anymore, unless you keep a model snapshot for each operation which
>> will result in a much more complex task.
>> 
>> Is there an official way to handle this kind of use case or a possible
>> workaround to implement this?
> 
> There are two properties attached to the delegates: onAdd and onRemove.  You
> can trigger an animation when these handlers are called.  There is one
> trick - normally delegates are destroyed immediately when removed from the
> model.  You can delay this by setting delayRemove = true for the duration of
> the animation:
> 
> http://qt.nokia.com/doc/4.7-snapshot/qml-listview.html#delayRemove-prop
> 
> Unfortunately there is not currently a way to animate move.

I've attached a modified version of the
examples/declarative/listview/dynamic.qml example to demonstrate this.  As
Martin says, for now you will have to model move as a remove followed by an
add.

Can you explain your "synchrony" problem in more detail?

Cheers,

Aaron

-------------- next part --------------
A non-text attachment was scrubbed...
Name: dynamic.qml
Type: application/octet-stream
Size: 6606 bytes
Desc: dynamic.qml
Url : http://lists.qt.nokia.com/pipermail/qt-qml/attachments/20100330/c3e82b35/attachment.obj 


More information about the Qt-qml mailing list