QML 使用 QSqlTableModel 删除 ListView 项目的动画
QML Remove Animation of ListView Item with a QSqlTableModel
我在后台使用带有 QSqlTableModel 的列表视图。我还为列表视图元素使用 SwipeDelegate 来提供 "delete button",如下所示:
现在按下按钮时,使用 QSqlTableModel 子类中的以下代码从数据库中删除该项目:
void qsoModel::deleteQSO(int id) {
removeRow(id);
submitAll();
}
附带问题:当我理解正确时,removeRow 是在隐式调用 beginRemoveRows(...) 和 endRemoveRows() 吗?
对于 ListView,我使用了移除转换:
ListView {
id: listView
anchors.fill: parent
model: qsoModel
//...
delegate: QSOItem {}
remove: Transition {
NumberAnimation { property: "opacity"; from: 1.0; to: 0; duration: 400 }
NumberAnimation { property: "scale"; from: 1.0; to: 0.0; duration: 400 }
}
但是,如果我按下删除按钮,则不会显示动画。列表元素很快就消失了。知道为什么会这样吗?
完整的源代码可以在这个提交中找到:https://github.com/myzinsky/cloudLogOffline/tree/b501d41a0f23d40139cfca9a6d4f724f4ab251b2
从 github 上的代码来看,模型似乎正在执行 beginRemoveRows()
和 endRemoveRows()
方法,所以我认为这不是问题所在。而且你说记录从数据库中删除所以我认为问题与qml有关。
所以关于qml动画有几件事:
首先,如果您希望不透明度和缩放动画平行,您需要将它们包裹在 ParallelAnimation
中。第二件事是你需要为 removeDisplaced
指定一个转换,否则当你从列表中删除一个项目时,将在列表中向上移动的项目只是被推到覆盖正在执行的记录的新位置移除动画。
如果您将转换分配给 removeDisplaced
看起来像这样,您应该能够看到这一点。
removeDisplaced:Transition{
NumberAnimation{
property:"y" // Specifying "y" so the displaced records slowly proceed upwards
duration:5000 // 5s should be enough to see what's actually happening
easing.type: Easing.InOutQuad
}
}
编辑:
我在原文 post 中提到的问题并不是唯一的问题。问题是 removeRow()
函数没有调用 beginRemoveRows()
和 endRemoveRows()
!如果将这些调用包裹在 removeRow()
调用周围,您将看到动画发生。但是您仍然需要将过渡分配给 removeDisplaced
才能看到发生的一切。
问题作者编辑
想法是在 QML 端的动画之后更新模型:
remove: Transition {
SequentialAnimation {
NumberAnimation {
property: "opacity"
from: 1.0
to: 0
duration: 400
}
ScriptAction {
script: {
qsoModel.select()
}
}
}
}
当动画从 QML 端完成时,我只调用 select
我在后台使用带有 QSqlTableModel 的列表视图。我还为列表视图元素使用 SwipeDelegate 来提供 "delete button",如下所示:
现在按下按钮时,使用 QSqlTableModel 子类中的以下代码从数据库中删除该项目:
void qsoModel::deleteQSO(int id) {
removeRow(id);
submitAll();
}
附带问题:当我理解正确时,removeRow 是在隐式调用 beginRemoveRows(...) 和 endRemoveRows() 吗?
对于 ListView,我使用了移除转换:
ListView {
id: listView
anchors.fill: parent
model: qsoModel
//...
delegate: QSOItem {}
remove: Transition {
NumberAnimation { property: "opacity"; from: 1.0; to: 0; duration: 400 }
NumberAnimation { property: "scale"; from: 1.0; to: 0.0; duration: 400 }
}
但是,如果我按下删除按钮,则不会显示动画。列表元素很快就消失了。知道为什么会这样吗?
完整的源代码可以在这个提交中找到:https://github.com/myzinsky/cloudLogOffline/tree/b501d41a0f23d40139cfca9a6d4f724f4ab251b2
从 github 上的代码来看,模型似乎正在执行 beginRemoveRows()
和 endRemoveRows()
方法,所以我认为这不是问题所在。而且你说记录从数据库中删除所以我认为问题与qml有关。
所以关于qml动画有几件事:
首先,如果您希望不透明度和缩放动画平行,您需要将它们包裹在 ParallelAnimation
中。第二件事是你需要为 removeDisplaced
指定一个转换,否则当你从列表中删除一个项目时,将在列表中向上移动的项目只是被推到覆盖正在执行的记录的新位置移除动画。
如果您将转换分配给 removeDisplaced
看起来像这样,您应该能够看到这一点。
removeDisplaced:Transition{
NumberAnimation{
property:"y" // Specifying "y" so the displaced records slowly proceed upwards
duration:5000 // 5s should be enough to see what's actually happening
easing.type: Easing.InOutQuad
}
}
编辑:
我在原文 post 中提到的问题并不是唯一的问题。问题是 removeRow()
函数没有调用 beginRemoveRows()
和 endRemoveRows()
!如果将这些调用包裹在 removeRow()
调用周围,您将看到动画发生。但是您仍然需要将过渡分配给 removeDisplaced
才能看到发生的一切。
问题作者编辑
想法是在 QML 端的动画之后更新模型:
remove: Transition {
SequentialAnimation {
NumberAnimation {
property: "opacity"
from: 1.0
to: 0
duration: 400
}
ScriptAction {
script: {
qsoModel.select()
}
}
}
}
当动画从 QML 端完成时,我只调用 select