[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.

  • Moderators


    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
    // 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!

Log in to reply

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.