[Qt-qml] Add Remove animations in ListView

Martin Jones martin.jones at nokia.com
Tue Mar 30 02:31:14 CEST 2010


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.

-- 
Martin.



More information about the Qt-qml mailing list