[Solved] Read all files inside a resources directory in and load them to a list model in QML

[alex-97]

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!

[dheerendra]

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.

[p3c0]

Hi,

If you are familiar with C++ models, id say stick with it. It would more effective and fast.

[alex-97]

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&#40;&#41;;

}
@

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!