QSqlQueryModel TableView自定义委托

Question

我有一个QSqlQueryModel和一个TableView来显示来自模型的数据。代码和输出数据结果都很好。但是，我只是想在TableView中的每一行前面显示一个图像。但是，使用我当前的QML代码，图像将与表列中的元素一起重复。我增加了一些屏幕截图供参考

电流输出(屏幕)

​

​

我想要什么

​

​

我的代码如下

Test.qml

import QtQuick 2.12
import QtQuick.Controls 2.4
import QtQuick.Layouts 1.3

Page {

    id : somepageid

    TableView{
        id: testTable
        model: QueryModel
        height: 500
        width: 400
        delegate:
            Row{

            Image {
                id: statusImg
                height: 18
                width: 18
                source: "../../../Images/icons/tick.png"
            }

            Text {
                text: display
            }
        }
    }

}

QueryModel.cpp

#include "querymodel.h"


QueryModel::QueryModel(QObject *parent): QSqlQueryModel(parent)
{

}

void QueryModel::setQuery(const QString &query, const QSqlDatabase &db)
{
    QSqlQueryModel::setQuery(query, db);
    generateRoleNames();
}

void QueryModel::setQuery(const QSqlQuery &query)
{
    QSqlQueryModel::setQuery(query);
    generateRoleNames();
}

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

    if(role < Qt::UserRole) {
        value = QSqlQueryModel::data(index, role);
    }
    else {
        int columnIdx = role - Qt::UserRole - 1;
        QModelIndex modelIndex = this->index(index.row(), columnIdx);
        value = QSqlQueryModel::data(modelIndex, Qt::DisplayRole);
    }
    return value;
}

QHash<int, QByteArray> QueryModel::roleNames() const
{
    return {{Qt::DisplayRole, "display"}};
}

void QueryModel::callSql()
{
    QSqlDatabase dbMysql = QSqlDatabase::database();
    this->setQuery(this->tmpSql(), dbMysql);
}

QString QueryModel::tmpSql() const
{
    return m_tmpSql;
}

void QueryModel::setTmpSql(QString tmpSql)
{
    if (m_tmpSql == tmpSql)
        return;

    m_tmpSql = tmpSql;
    emit tmpSqlChanged(m_tmpSql);
}

void QueryModel::generateRoleNames()
{
    m_roleNames.clear();
    for( int i = 0; i < record().count(); i ++) {
        m_roleNames.insert(Qt::UserRole + i + 1, record().fieldName(i).toUtf8());
    }
}

Answer 1

一个可能的解决方案是使用Loader

// ...
delegate: Row{
    Loader{
        active: model.column === 0
        sourceComponent: Image {
            id: statusImg
            height: 18
            width: 18
            source: "../../../Images/icons/tick.png"
        }
    }
    Text {
        text: model.display
    }
}
// ...