如何在 Qml 中插入具有多列的行

Question

I am trying to prepare a tree Model and I have done this:

treemodel.h

#include <QStandardItemModel>

class TreeModel : public QStandardItemModel
{
    Q_OBJECT
public:
    TreeModel( QObject *parent = nullptr );
private:
    QVector<TreeModel *> child_items;
    TreeModel* parent_item;
    static const int DisplayName;
    static const int DisplayInfo;
    static const int DisplayId;
};

treemodel.cpp

#include "treemodel.h"
#include <QStandardItemModel>
#include <QStandardItem>
#include <QAbstractItemModel>
#include <QString>
#include <QTreeView>
#include <iostream>
#include <QList>
#include <QModelIndex>


const int TreeModel::DisplayName = Qt::UserRole+1;
const int TreeModel::DisplayInfo = Qt::UserRole+2;
const int TreeModel::DisplayId = Qt::UserRole+3;

TreeModel::TreeModel( QObject *parent ) : QStandardItemModel(parent)
{
    QStandardItem *parentItem = this->invisibleRootItem();

    QHash<int, QByteArray> roles = roleNames();
    roles.insert(DisplayName, "A");
    roles.insert(DisplayInfo, "B");
    roles.insert(DisplayId, "C");
    setItemRoleNames(roles);

    QStandardItem *c1 = new QStandardItem;
    c1->setData("Sudip", DisplayName);
    QStandardItem *c2 = new QStandardItem;
    c2->setData("Ghimire", DisplayInfo);
    QStandardItem *c3 = new QStandardItem;
    c3->setData("Bahadur", DisplayId);
    QList<QStandardItem *> r1 { c1, c2, c3};
    parentItem->insertRow(0, r1);
}

main.qml

import QtQuick 2.12
import QtQuick.Controls 2.5
import QtQuick.Controls 1.4
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.3
import QtQuick.Window 2.12
import QtQuick 2.0

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Tree View Example")
    id: root
    TreeView{
        id: tree_view
        model: TreeModel
        Layout.fillHeight: true
        Layout.fillWidth: true
        width: root.width
        height: root.height
        sortIndicatorVisible: true
        alternatingRowColors: false
        backgroundVisible: false
        TableViewColumn{
            role: "A"
            title: "Elements"
            width: 300
        }
        TableViewColumn{
            role: "B"
            title: "more"
            width: 300
        }
        TableViewColumn{
            role: "C"
            title: "I am some title"
            width: 300
        }
       /*
        MouseArea{
            anchors.fill: tree_view
            hoverEnabled: true
            onHoveredChanged: function(){
            }
        }
        */

    }
}

main.cpp

QQmlApplicationEngine engine;
TreeModel t_model;
engine.rootContext()->setContextProperty("TreeModel", &t_model);

But the reasult is

But I want to fill all column by a row. I think appendRow in treemodel.cpp should have done the wok. But its wired.

Answer 1

This is because ur model doesn't know how to deal with your custom user role when QStandardItemModel::data() called to bind value in QML. So what you have to do is, override the data() function your TreeModel class and return the data for ur custom roles. You should add below code to ur TreeModel class.

QVariant TreeModel::data(const QModelIndex &index, int role) const
{
    QVariant value;

    if (index.isValid()) {
        if (role <= Qt::UserRole) {
            value = QStandardItemModel::data(index, role);
        }
        else if(role == DisplayName)
        {
            value = QStandardItemModel::data(index, DisplayName);
        }
        else if(role == DisplayInfo)
        {
            int columnIdx = role - Qt::UserRole - 1;
            QModelIndex modelIndex = this->index(index.row(), columnIdx);
            value = QStandardItemModel::data(modelIndex, DisplayInfo);
        }
        else if(role == DisplayId)
        {
            int columnIdx = role - Qt::UserRole - 1;
            QModelIndex modelIndex = this->index(index.row(), columnIdx);
            value = QStandardItemModel::data(modelIndex, DisplayId);
        }
        else
        {
            // undefined role.
        }
    }
    return value;
}