Nominate our 2022 Qt Champions!

Arrays and structures in QML

  • Hi
    Is it possible to define an array in qml?
    What about structure and array of structures?

  • Yes it is possible to make an array in qml. Here is a link that has an example of how to do it.
    And i am not sure about making a structure and array of structures.

  • Moderators

    @Alper QML has in-built support for Javascript. And then with Javascript objects you can simulate c like structures or array of structures.
    For eg:

    // A Js struct
    var person = { 
           firstName : "John", 
           age : 50, 
           male : true
    // Array of struct
    var array = [
          { firstName : "John", age: 50, male: true },
          { firstName : "Jenny", age: 25, male: false },

  • @p3c0 Thank you
    sorry for my bad English
    I am working on a project that needs an application like windows explorer (win8 large icons style), the application window contains small windows inside(like file icons in windows explorer), i used Grid and scrollView. Icons,/small windows /components in main window can dragged by mouse, its working but my problem is on positioning the components, it can be dragged on another component and cover it (it must not be covered.)

    I think that i can use an array of structures and using of dragging event to positioning the components and sorting, grouping, arranging etc.
    Also the components are dynamic. (separate qml files load when need)
    Is there another/better way to do that?

    Thanks in advance

  • Moderators

    @Alper Ok. But what do you intend to store in array of structures ?

  • @p3c0
    The width of container rectangle divides into width of component (number of columns : C) and height of container divides into height of container(number of rows: R).
    So i get a table width C columns and R rows, each Row covers y coordinate from y1 to y2 and each Column from x1 to x2.
    When a component dragged, its x,y coordinate will be checked to position in suitable place.

    for (i = 0 ; i<elementsOfTable;i++)
    if(component.x in array[i].x and component.y in array[i].y)
    setComponentPosition in position i (position i x,y coordinates is in table)

    i don't want do that in C++.
    Another thing i need is a scroll bar in thish manner. i don't know how to add it in this manner. because the Flickable and Grid will be removed.

  • Moderators

    @Alper Perhaps an array of point's ?

    Another thing i need is a scroll bar in thish manner. i don't know how to add it in this manner. because the Flickable and Grid will be removed.

    What type is the container then ?

  • @p3c0 rectange

    an array of ranges of points.

  • Moderators

    @Alper Well how do you intend to scroll a rectangle ? Why not Flickable then ?

  • Moderators

    @Alper Array of points

    var arr = [

  • @p3c0 said:


    :) i intend to use every thing that does it!
    But i don't know HOW!
    I tried it but not worked:

        function createComponent(){ //the app calls this function several times when running
                yCoord += 100;    //i used it to check scrolling
                var component = Qt.createComponent("qrc:/MyQML.qml");
                var obj  = component.createObject(flickableContainer, {"x": 0, "y": yCoord });
        Flickable {
            anchors.fill: parent // parent is a rectangle
            anchors.margins: 5
        ScrollView {
            contentItem :flickableContainer
            width: parent.width
            height: parent.height

  • Moderators

    Flickable should be inside ScrollView.
    For eg:

    ScrollView {
        width: 200; height: 200
        Flickable {
            anchors.fill: parent
            contentWidth: image.width; contentHeight: image.height
            Image { id: image; source: "\"Qt\"" }

    And set ScrollView as a parent to dynamic component.
    Btw. You can completely replace Flickable with ScrollView.

  • @p3c0 Thanks for your reply
    It works for image as static object/element, how to use it for dynamic component?

  • Moderators

    @Alper It seems the scrollbars are not enabled when a component is added to it dynamically. Might be a bug or we are missing something? Will find it out.

  • Moderators

    Hi @Alper,
    Here is what works.
    Use ScrollView instead of Flickable for scrollbars. Then as per this we need to explicitly set the contentItem as this newly created component.
    A very minimal example:

    import QtQuick 2.6
    import QtQuick.Controls 1.4
    Item {
        id: root
        width: 200
        height: 200
        ScrollView {
            id: scroll
            anchors.fill: parent
        Button {
            text: "Load"
            onClicked: {
                var component = Qt.createComponent("Dummy.qml");
                var obj  = component.createObject(scroll);
                scroll.contentItem = obj
    import QtQuick 2.6
    Image {
        id: image;
        source: "\"Qt\""