Qt Quick 1.1: How to hide elements from the QML list when deleting?

Question

In the user interface of the application, I display several elements in a QML listview and when one of them is deleted, it should slide behind the element above this in an animated manner. The code for this really looks like this sample from the Qt documentation, only I am animating the y coordinate instead of scale , and I need to reduce z to make sure that the element slides behind and not in front of the element above it:

 Component { id: delegate Item { ListView.onRemove: SequentialAnimation { // enable delayed removal PropertyAction { target: wrapper property: "ListView.delayRemove" value: true } // make box slide up behind rather // than in front of the box above PropertyAction { target: wrapper property: "z" value: wrapper.z - 1 } NumberAnimation { target : wrapper property : "y" from : wrapper.y to : wrapper.y - wrapper.height duration : style.removeTransitionDuration easing.type : style.removeTransitionType } // disable delayed removal PropertyAction { target: wrapper property: "ListView.delayRemove" value: false } } } 

This code basically works, but it has one big drawback: while the element that is being deleted is displaced, the elements under it remain where they are and only “jump” to a new place after the element completely disappears. I would like them to move together up while the element being deleted slides up.

I tried to animate the movement of the element in the y direction by specifying Behavior on y as PropertyAnimation , as shown in this example ; this works when the y property is set explicitly (for example, in the MouseArea::onClicked ), but there is no animation when y changes implicitly because the item has been deleted.

I also tried to animate other properties, such as height or scale , as done in the DynView List ListView , and combine this with opacity , but since the element is somewhat complex, the results look pretty simple - and the design department was pretty specific that the element really have to move up.

How can I promote an item with moving lower? Is this possible in Qt 4.8 / Qt Quick 1.1? Are there any improvements to Qt 5 / Qt Quick 2.0 regarding this particular issue?

Answer 1

ListView has several new features in Qt Quick 2.0:

• remove : "This property contains a transition to apply to elements that are removed from the view."
• removeDisplaced : "This property has a transition to apply to elements in the view that are moved by removing other elements in the view."

removeDisplaced is the property you are looking for. Unfortunately, I do not know the way in Qt Quick 1.0.