list of images in qml

Question

I starting now to program using qt/qml and it sound a bit different from java, my area at now, so I need to fill a array of a set of .png files in a folder, but I don't know how I can do that. I have this:

// ...
Image {
    anchors.top: parent.center
    anchors.left: parent.center
    anchors.margins: 0
    width: 22
    height: width
    source: "qrc:/images/img000.png"
}
// ...

[EDIT] This code is part of the calendar example "../Qt-5.9/quickcontrols/controls/calendar, I got it to start because this example is like I need, but I need to put a image in all days in this mount showing in the calendar grid, so I put these image in a folder and referenced these images in my recources.qrc file in a respective folder, so I need to loop in this folder to get all images and as they are sequentially named "img000.png" to "img029.png" so I think to fill a array of these images and then put these images to fit one by one in each appropriate representative day for this month showing in the calendar grid. I dont know if I use a List ... or like @eyllanesc iterating the folder files, I believe which manipulate list is very different form java and this is making in java in my project for android.

I have no idea about QT, but I need it because I need to migrate this project for IOs?

Thanks in advance!

Answer 1

Since the source of the image are elements of type 0xx.png could be iterate with the index of a Repeater and to accommodate them you could use a GridLayout.

GridLayout {
        columns: 5
        Repeater {
            model: 30
            Rectangle{
                width: 100
                height: 100
                Image{
                    anchors.fill: parent
                    source: {
                        var str = "%1".arg(index);
                        var format = "000";
                        return "qrc:/images/img%1.png".arg(format.substring(0,format.length- str.length) + str)}
                }
            }
        }
    }

I do not want to iterate through a loop since it is not elegant when implementing a GUI, it is better to take a particular element, for example in your case the days of the month and take as "index". To add an image every day to the calendar example you only need to make the following changes:

Note: I have considered that the images are img001.png, img002.png,..., img031.png

source code

Image {
    //visible: eventModel.eventsForDate(styleData.date).length > 0
    anchors.top: parent.top
    anchors.left: parent.left
    anchors.margins: -1
    width: 12
    height: width
    //anchors.fill: parent
    source: {
        var str = "%1".arg(styleData.date.getDate());
        var format = "000";
        return "qrc:/images/img%1.png".arg(format.substring(0,format.length- str.length) + str)
    }
}

Screenshot: