How to have transition animations when using QML ListView and C ++ QList <QObject *>?
I use QtQuick 2.0 and QML ListView, which I connected to my model in C ++ (QList of Objects). The connection was made through QQmlContext :: setContextProperty ().
Now the documentation said that the interface does not have a direct way to learn about the changes, so I only updated the context whenever I changed my model. However, when I do this, the view acts directly, without triggering any event (for example, add or remove events), which annoys me a bit because I cannot control any transitions.
Simply put, this is my qml code:
ListView {
id : list
boundsBehavior: Flickable.StopAtBounds
anchors {
top: titleBar.bottom
topMargin: -1
bottom: mainWindow.bottom
bottomMargin: -1
}
width: mainWindow.width
model: episodes
delegate: Episode {
id: myDelegate
onShowClicked: episodes.append(episodes[index])
}
ScrollBar {
flickable: list;
}
}
where Episode is my user delegate. It contains the following code:
ListView.onAdd: SequentialAnimation {
PropertyAction { target: episodeDelegate; property: "height"; value: 0 }
NumberAnimation { target: episodeDelegate; property: "height"; to: 80; duration: 250; easing.type: Easing.InOutQuad }
}
ListView.onRemove: SequentialAnimation {
PropertyAction { target: episodeDelegate; property: "ListView.delayRemove"; value: true }
NumberAnimation { target: episodeDelegate; property: "height"; to: 0; duration: 250; easing.type: Easing.InOutQuad }
// Make sure delayRemove is set back to false so that the item can be destroyed
PropertyAction { target: episodeDelegate; property: "ListView.delayRemove"; value: false }
}
which is a direct copy of the Qt examples.
, , QML.
- - ?
reset setContextProperty, populate. .
, , . :
class SomeList : public QObject
{
Q_OBJECT
public:
explicit SomeList(QObject *parent = 0);
void Add(QString color, QString value)
{
emit addNew(color,value);
}
signals:
void addNew(QString data1,QString data2);
};
main.cpp :
int main(int argc, char *argv[])
{
QApplication app(argc, argv);
QQmlApplicationEngine engine;
engine.load(QUrl(QStringLiteral("qrc:/main.qml")));
engine.rootContext()->setContextProperty("cppInstance",new SomeList);
return app.exec();
}
QML:
ListModel{
id:someListModel
}
Rectangle{
width: 600
height: 600
ListView{
model:someListModel
delegate:Rectangle{
width: parent.width
height: parent.height/10
color: model.color
Text{
text: value
}
}
}
Connections{
target: cppInstance
onAddNew: { someListModel.insert(0,{"color":data1,"value":data2})}
}
}
SomeList QList, , QML.