When I need to create any QML component in runtime, I can use that guide: http://qt-project.org/doc/qt-5/qtqml-javascript-dynamicobjectcreation.html
i.e. just call Qt.createComponent and component.createObject
But I couldn't find how to create ListModel at runtime? with qml, not in c++.
You can ask, why I need it. So, I have a nested ListModel: there is outer model, which delegates contained inner models. So when I'm calling outer_model.append({}), I must pass newly created ListModel for inner model. I cannot use statically defined inner model in outer delegate, because I cannot access such model in runtime. By the way, can it be accessed somehow?
P.S. Maybe it's completely wrong idea to try managing models in javascript?
I am a JS developer who writes QtQuick applications and this is something I have tried on with multiple solutions.
Short answer to managing models in JavaScript inside QML is that it's a nightmare. I would advice you to write a small sub-class of QAbstractListModel which internally uses QJsonArray as its data source, so that it makes it easier to understand the data structure in C++ as well as in its usage inside QML. Follow the instructions to create QML types from C++ here.
If you still want to do it inside JavaScript, another approach is the following:
function createNewList() {
var newListModel = Qt.createQmlObject('import QtQuick 2.2; \
ListModel {}', parent);
return newListModel;
}
However this has some serious memory leak problems even after using gc()
If your primary concern is having ListModels inside ListModels, this following simple thing works for me (there is an implicit type conversion between array of objects and ListModels inside ListModels I think)
property ListModel items: ListModel {}
function addComplexItem() {
items.append({
"key": "People",
"arr": [
{
"arrItemName": "John",
"arrItemValue": 18,
},
{
"arrItemName": "Kerry",
"arrItemValue": 21,
},
{
"arrItemName": "Mike",
"arrItemValue": 19,
}
]});
}
// Usage
Component {
id: viewDelegate
Item {
Text {
text: "List of " + key
}
ListView {
model: arr
delegate: Rectangle {
Text {
text: arrItemName
}
}
}
}
}
Try this:
Component {
id: someComponent
ListModel {
}
}
function createModel(parent) {
var newModel = someComponent.createObject(parent);
return newModel;
}
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