[Solved] Read all files inside a resources directory in and load them to a list model in QML
-
Hi,
I have a folder in my resources directory that has about 800 images. I have written a grid view to display them inside my QML interface. However, I was looking for a way to automate the process of creating the ListModel used in the Grid View.
For example, in C++ I could use a loop to load all files and add them to a QList. However, I am clueless about how to do something similar in QML.
So my question would be: Is there a way to scan trough a directory and add all the files inside it to a ListModel in QML?
Thanks in advance!
-
Please look at ListModel documentation and see the methods called insert(...) or set(...). or append(..). They will help you do what you are looking for.
-
Hi,
If you are familiar with C++ models, id say stick with it. It would more effective and fast.
-
Hi,
I have searched for many solutions (including the one proposed by Dheerendra). However, most of them worked only while using local files (not resource files inside the binary program).
Finally, I came up with a very easy solution:
C++ code (in main.cpp or where you load the QML interface):
@
int main(int argc, char *argv[]) {
// Initialization code here (& other tasks)
QApplication app(argc, argv);// Create a QDir that points out to your path in the resources folder QDir directory(":/my_qrc_images_prefix/"); // Load all files with the *.PNG extension // (you can modify this to suit your needs. QStringList imagesList = directory.entryList(QStringList("*.png")); // Now load the QML interface (at least I do it in this way) QQmlEngine* engine = new QQmlEngine(); QQmlComponent* component = new QQmlComponent(engine); // Allow the QML interface to access the imagesList as a list model engine->rootContext()->setContextProperty("imageModel",QVariant::fromValue(imagesList)); // Load the window and execute the app QQuickWindow* window = qobject_cast<QQuickWindow*>(component->create()); return app.exec();
}
@QML code
@
import QtQuick 1.0// Create the root item
Item {// Set the size of the item width: 200 height: 250 // Create the list view with the images ListView { anchors.fill: parent // We use as a model with QStringList used // in the initialization of the QML interface. model: imageModel // Represent the data of the model in an image delegate: Image { // Load the image (modelData represents the current image) // Note that in my case I needed to add the full path // of the image in order to make it work. source: "qrc:/my_qrc_images_prefix/" + modelData } }
}
@So, in summary you basically you create a QList in C++ and load it in the QML interface. However, the QList is based on a data that the QDir class gives to us. However, its important to only use ":/" instead of "qrc:/" while working with QDir. This implementation can be modified to load local files (using the "file://" prefix in the QML image).
Thanks to all who helped me solve this problem!
Greetings!