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 ?
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.
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.
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.
ListView has some new Properties in Qt Quick 2.0:
removeDisplaced should be the property that you are looking for. I don't know a way in Qt Quick 1.0 unfortunately.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With