ListView model from QVariantList

chimera123

Hello everybody,

I would like to get some feedback on displaying the data from QVariantList that is exposed to QML from C++.

I need to display multi-column data in a ListView in such a way that when scrolling occurs, data of all columns scrolls in sync. The following minimal code does exactly what I want, but with one catch - the data is not displayed in the correct order (please see the comments after the code):

modelclass.h

#ifndef MODELCLASS_H
#define MODELCLASS_H

#include <QObject>
#include <QVariantList>

class ModelClass : public QObject
{
    Q_OBJECT

    Q_PROPERTY(QVariantList data READ data NOTIFY dataChanged)

public:
    explicit ModelClass(QObject *parent = 0);

    QVariantList data() const;

signals:
    void dataChanged();

public slots:

private:
    QVariantList m_data;
};

#endif // MODELCLASS_H

modelclass.cpp

#include "modelclass.h"

ModelClass::ModelClass(QObject *parent)
    : QObject(parent)
{
    QStringList L1;
    L1 << "1" << "2" << "3";
    QStringList L2;
    L2 << "4" << "5" << "6";
    QStringList L3;
    L3 << "7" << "8" << "9";
    
    m_data.append(QVariant(L1));
    m_data.append(QVariant(L2));
    m_data.append(QVariant(L3));
}

QVariantList ModelClass::data() const
{
    return m_data;
}

main.qml

import QtQuick 2.5
import QtQuick.Window 2.2

Window {
    visible: true
    width: 640
    height: 480

    Rectangle {
        id: root
        anchors.fill: parent

        ListView {
            id: listView
            anchors.centerIn: parent
            width: 180
            height: 200

            model: modelClass.data

            delegate: Row {
                Rectangle {
                    id: first
                    width: listView.width / 3
                    height: 30

                    Text {
                        anchors.centerIn: parent
                        text: modelData[0]
                        font.pointSize: 20
                    }
                }
                Rectangle {
                    id: second
                    width: listView.width / 3
                    height: 30

                    Text {
                        anchors.centerIn: parent
                        text: modelData[1]
                        font.pointSize: 20
                    }
                }

                Rectangle {
                    id: third
                    width: listView.width / 3
                    height: 30

                    Text {
                        anchors.centerIn: parent
                        text: modelData[2]
                        font.pointSize: 20
                    }
                }
            }
        }
    }
}

The displayed data in ListView is as follows:

1 2 3
4 5 6
7 8 9

when the desired output is:

1 4 7
2 5 8
3 6 9

Is this even possible using QVariantList?
Would I need to subclass QAbstractItemModel?

Thank you for any suggestions and help. Best regards,
K

ashwasimha

Hi,

As per the code snippet that you have shared, model is providing a QVariantList that has QStringList as elements in it.

QStringList L1;
L1 << "1" << "2" << "3";
QStringList L2;
L2 << "4" << "5" << "6";
QStringList L3;
L3 << "7" << "8" << "9";
    
m_data.append(QVariant(L1));
m_data.append(QVariant(L2));
m_data.append(QVariant(L3));

Since you are appending elements in the order 1,2,3 in each QString list, you are not getting the desired output. Again, I do not know your requirements, can you change the order of insertion to QStringList? like :

QStringList L1;
L1 << "1" << "4" << "7";
QStringList L2;
L2 << "2" << "5" << "8";
QStringList L3;
L3 << "3" << "6" << "9";
    
m_data.append(QVariant(L1));
m_data.append(QVariant(L2));
m_data.append(QVariant(L3));

If this doesn't work for you, then I would suggest that, please inherit the modelclass from either QAbstractItemModel or QAbstractListModel and get the data using role-names.