How I can i have access role of QAbstractListModel that is an Array?

Maybe my question isn't clear but i hope that with the code my problem become more clear. I have a created these two structs and i use them in FormModel class :

struct Tile
{
    QString name;
    QString color;
};  Q_DECLARE_METATYPE(Tile)

struct Form
{
    QString nameForm;
    Tile grid[9] ;   // i want for each form 4 tile that in qml are 4 rectangles
}; Q_DECLARE_METATYPE(Form)



class FormModel : public QAbstractListModel
{
    Q_OBJECT
public:
    explicit FormModel(QObject *parent = 0);

    ~FormModel();
    enum dashBoardRoles {

        NameForm=Qt::UserRole+1,
        Grid,

     };

    int rowCount(const QModelIndex &parent=QModelIndex()) const;
    QVariant data(const QModelIndex &index, int role) const;
    Q_INVOKABLE bool insertRows(int row, int count, const QModelIndex &parent = QModelIndex()) Q_DECL_OVERRIDE;
    Q_INVOKABLE bool removeRows(int row, int count, const QModelIndex &parent = QModelIndex()) Q_DECL_OVERRIDE;
    QHash<int, QByteArray> roleNames() const;

signals:

public slots:

private:

  QList<Form> dashboard;


};

This is data method of QAbstractListModel:

QVariant FormModel::data(const QModelIndex &index, int role) const
{
    if(index.row()>0 && index.row() >= dashboard.count())
        return QVariant();
    Form dashTemp = dashboard[index.row()];

    if(role== NameForm)
        return dashTemp.nameForm;
    if(role== Grid)
    {
        QVariant gridVect = QVariant::fromValue(dashTemp.grid);
        return gridVect;
    }
    return QVariant();
}

QHash<int, QByteArray> FormModel::roleNames() const
{
    QHash <int,QByteArray> roles;
    roles [NameForm]="nameForm";
    roles [Grid]="grid";

    return roles;
}

this is the qml code:

Window {
    id:app
    visible: true
    width: 480
    height: 800
    title: qsTr("Hello World")

    ListView {

     model: myForms  // i have defined the name in main.cpp
     anchors.fill: parent

     delegate:  ColumnLayout{
          spacing: 30
          // nome Form
          Text{

              text: nameForm
              font.pointSize:20
              color: "red"
              font.capitalization: Font.Capitalize

          }
          // grigla mattonelle
          GridView {
              id:grid

              width: 300; height: 300
              cellWidth: 100 ; cellHeight: 100
              model: 9
              delegate: Item{
                  width : grid.cellWidth
                  height: grid.cellHeight
                  Rectangle{
                      anchors.centerIn: parent
                      width:parent.width-10
                      height: parent.height-10
                      color: grid[index].color
                  }

              }
         }
       }
    }

}

How i can get the color from the data of role Grid? that in qml i call with grid[index].color....

Solution

QML does not directly recognize the struct, for this you have to use Q_GADGET with Q_PROPERTY, it is also advisable to use QVariantList instead of an array since QML can cast it directly. All the above I have implemented it in the following code:

formmodel.h

#ifndef FORMMODEL_H
#define FORMMODEL_H

#include <QAbstractListModel>

struct Tile
{
    Q_GADGET
    Q_PROPERTY(QString name MEMBER name)
    Q_PROPERTY(QString color MEMBER color)
public:
    QString name;
    QString color;
    Tile(const QString& name="", const QString& color=""){
        this->name = name;
        this->color = color;
    }
};
Q_DECLARE_METATYPE(Tile)

struct Form
{
    Q_GADGET
    Q_PROPERTY(QString nameForm MEMBER nameForm)
    Q_PROPERTY(QVariantList grid MEMBER grid)
public:
    Form(){
    }
    QString nameForm;
    QVariantList grid;
};
Q_DECLARE_METATYPE(Form)

class FormModel : public QAbstractListModel
{
    enum dashBoardRoles {
        NameForm=Qt::UserRole+1,
        Grid
    };
public:
    FormModel(QObject *parent = Q_NULLPTR);
    QHash<int, QByteArray> roleNames() const;
    int rowCount(const QModelIndex &parent=QModelIndex()) const;
    QVariant data(const QModelIndex &index, int role=Qt::DisplayRole) const;
private:
    QList<Form> dashboard;
};

#endif // FORMMODEL_H

formmodel.cpp

#include "formmodel.h"

#include <QColor>

FormModel::FormModel(QObject *parent):QAbstractListModel(parent)
{
    for(int i=0; i<10; i++){
        Form form;
        form.nameForm = QString("name %1").arg(i);
        for(int j=0; j<9; j++){
            QColor color(qrand() % 256, qrand() % 256, qrand() % 256);
            Tile tile{QString("name %1 %2").arg(i).arg(j), color.name()};
            form.grid<< QVariant::fromValue(tile);
        }
        dashboard<< form;
    }
}


QHash<int, QByteArray> FormModel::roleNames() const
{
    QHash <int,QByteArray> roles;
    roles [NameForm]="nameForm";
    roles [Grid]="grid";
    return roles;
}

int FormModel::rowCount(const QModelIndex &parent) const
{
    Q_UNUSED(parent)
    return dashboard.count();
}

QVariant FormModel::data(const QModelIndex &index, int role) const
{
    if(index.row()<0 && index.row() >= dashboard.count())
        return QVariant();
    Form dashTemp = dashboard[index.row()];
    if(role== NameForm)
        return dashTemp.nameForm;
    else if(role== Grid)
        return dashTemp.grid;
    return QVariant();
}

main.qml

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Layouts 1.3


Window {
    id:app
    visible: true
    width: 480
    height: 800
    title: qsTr("Hello World")

    ListView {

        model: myForms
        anchors.fill: parent
        delegate:  ColumnLayout{
            spacing: 30
            Text{
                text: nameForm
                font.pointSize:20
                color: "red"
                font.capitalization: Font.Capitalize
            }
            GridView {
                id:gr
                width: 300; height: 300
                cellWidth: 100 ; cellHeight: 100
                model: grid // grid.length
                delegate: Item{
                    width : gr.cellWidth
                    height: gr.cellHeight
                    Rectangle{
                        anchors.centerIn: parent
                        width:parent.width-10
                        height: parent.height-10
                        color: grid[index].color
                        Text {
                            id: name
                            anchors.fill: parent
                            text: grid[index].name
                        }
                    }

                }

            }
        }
    }

}

The complete example can be found in the following link.