So I have a ListView and ListModel to which I'm adding objects dynamically. I want a displaced
animation to happen to when a new object is added, but from what I can see, only the add
transition is triggered and the displaced
transition is never triggered. Based on the tutorial, this works:
Rectangle {
anchors.fill: parent
ListView {
width: 240; height: 320
model: ListModel {
id: model
}
Component {
id: del
Row {
height: 20
spacing: 20
Text { text: name }
Text { text: age }
}
}
delegate: del
add: Transition {
NumberAnimation { property: "opacity"; from: 0; to: 1.0; duration: 1000 }
}
displaced: Transition {
NumberAnimation { properties: "x,y"; duration: 1000; easing.type: Easing.OutBounce }
}
focus: true
Keys.onSpacePressed: model.insert(0, { "name": "Item " model.count, "age":21})
}
}
But this only triggers the add
transition.
Rectangle {
height: 500
width: 0.90 * parent.width
anchors {
top: parent
topMargin: 30
left: parent.left
leftMargin: 45
}
ListView {
anchors.fill: parent
model: notificationModel
delegate: notificationDelegate
spacing: 30
add: Transition {
NumberAnimation { property: "opacity"; from: 0; to: 1; duration: 1000 }
}
displaced: Transition {
NumberAnimation { properties: "x,y"; duration: 1000; easing.type: Easing.OutBounce }
}
}
}
ListModel {
id: notificationModel
Component.onCompleted: {
notificationModel.append({"name": "Tony"})
}
}
Timer {
interval: 5000; running: true; repeat: true
onTriggered: notificationModel.append({"name": "Stark"})
}
Component {
id: notificationDelegate
Row {
spacing: 20
Text { text: name; color: "white" }
}
}
Any idea why this happens? Thanks!
CodePudding user response:
The displaced
transition is triggered when an item in the list is forced to move because another item is added/removed/etc. The working example works because a single item gets inserted at the beginning of the list causing the remaining items to be displaced.
With the current code you are showing, the problem is that you are using the append
function instead of insert
. Append adds items to the bottom of the list, so no items are getting displaced.
Before you edited your question, you had a different problem. You were using insert
to add items to the beginning of the list, but every time you added one, you were clearing the entire list and rebuilding it. So again, nothing was getting displaced because the entire list was getting recreated every time.