Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Qt Quick 1.1: How to slide elements out of a QML listview when removed?

In my application UI, I display a number of elements in a QML listview and when one of them is removed, it is supposed to slide up behind the element above it in an animated manner. The code to achieve this is really similar to this sample from Qt documentation, only I animate the y coordinate instead of the scale and I need to decrement the z value to make sure the element slides up 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 has one massive flaw: While the element being removed slides up, the elements below it stay where they are and only 'jump up' to their new position after the element has disappeared completely. I would like them to move along upwards while the element being removed slides up.

I have tried to animate any element movement in y direction by specifying Behavior on y to be a PropertyAnimation as shown in this sample; this works when the y property is set explicitely (for example in a MouseArea::onClicked handler), but there is no animation when y changes implicitely because an element was removed.

I also tried animating other properties, such as height or scale as is done in the Dynamic List ListView Example and combining that with opacity, but as the element is somewhat complex, the results look plain aweful - and the design department was rather specific that the element really should slide up.

How can I slide up an element with the ones below moving along ? Is this possible in Qt 4.8 / Qt Quick 1.1 at all ? Is there any improvement in Qt 5 / Qt Quick 2.0 with regards to this specific problem ?

like image 938
ssc Avatar asked Sep 09 '13 15:09

ssc


People also ask

What is Modeldata in QML?

Similarly, encapsulating an instance of the data in a delegate allows the developer to dictate how to present or handle the data. Model - contains the data and its structure. There are several QML types for creating models. View - a container that displays the data. The view might display the data in a list or a grid.

What is ListView in QML?

A ListView displays data from models created from built-in QML types like ListModel. A ListView has a model, which defines the data to be displayed, and a delegate, which defines how the data should be displayed. Items in a ListView are laid out horizontally or vertically.

How do I customize a button in QML?

You can create a custom button by replacing the "background" delegate of the ButtonStyle with a custom design. If you need a custom label, you can replace the label item.


1 Answers

ListView has some new Properties in Qt Quick 2.0:

  1. remove: "This property holds the transition to apply to items that are removed from the view."
  2. removeDisplaced: "This property holds the transition to apply to items in the view that are displaced by the removal of other items in the view."

removeDisplaced should be the property that you are looking for. I don't know a way in Qt Quick 1.0 unfortunately.

like image 170
Stoeoef Avatar answered Sep 23 '22 23:09

Stoeoef