QT MVC 编程 MODEL/DELEGATE/VIEW（四）

原创已于 2025-03-08 12:12:52 修改 · 1k 阅读

26 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#qt #mvc #开发语言

于 2025-03-08 12:11:41 首次发布

笔记专栏收录该内容

8 篇文章

订阅专栏

一、概述

Qt提供了一种略微不同于MVC（Model-View-Controller）的架构，称之为MVD（Model-View-Delgate）架构。即Controller实际上应由用户自己组合实现，Qt未提供专门的类来处理，Qt提供了一系列的Delegate协调Model和View，实现渲染、数据编辑和转换，不直接参与界面布局，而是与View配合进行细节控制以及将Model数据转换为View可用的格式。Qt 已经提供了一系列的Model、View、Delegate类以实现Model/View/Delegate架构。MVD架构可以实现数据和展示层的分离，使用MVD架构能够带来非常大的性能提升和开发的灵活性。

二、Delegate对Model的渲染应用

关于Model的使用参见之前的文章。

Delegate（委托）决定了Model中数据的展示方式，它控制着数据的显示（渲染）以及数据的编辑（计算、适配），作为从model到view的转换层发挥着重要作用。

Model中数据的展示在Delegate中实现，实现了数据的解耦，使得开发十分灵活。

使用delegate的一个好处是，它并不是在view中创建了众多的控件，而是仅仅绘制了这些控件的外观，在编辑时才会临时创建控件，因此它能够带来性能上的显著提升，这在大量数据的场景下具有重要意义。

下面是一个使用delegate绘制界面的例子。

在这个例子中，通过对Delegete的运用，绘制了多种类别的数据，极大地丰富了数据的展示功能。下面进行简单介绍。

1. 主框架

main十分简单，就是创建一个view，然后设置model、初始化model，最后再设置Delegate。

其中model是标准模型，仅初始化一些测试数据；DelegateCtrls是本例需要实现的部分。

main.cpp

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);

    QTableView view;
    QStandardItemModel* model = new QStandardItemModel();
    initModel(model);

    view.setModel(model);
    view.setItemDelegate(new DelegateCtrls());
    view.resize(QSize(1024,768));
    view.show();

    return a.exec();
}

//Model的初始化，为例子演示而设计了一些测试数据
void initModel(QStandardItemModel* model)
{
    const int ROW = 12;
    const int COLUMN = 10;
    QString textBool[3] = {"True","False","True"};
    QString textStatus[2] = {"Active","Unknow"};

    model->insertRows(0,ROW);
    model->insertColumns(0,COLUMN);

    for(int i=0;i<ROW;i++) {
        model->setData(model->index(i, 0), QVariant(QString("NAME %1").arg(i)), Qt::DisplayRole);
        for(int j=1;j<COLUMN;j++) {
            if(j == 2) {
                model->setData(model->index(i, j),QVariant(textBool[i%3]), Qt::DisplayRole);
            }
            else if(j == 4) {
                model->setData(model->index(i, j),QVariant(textStatus[i%2]), Qt::DisplayRole);
            }
            else {
                model->setData(model->index(i, j),
                               QVariant(QString("%1%2").arg(i).arg(j)), Qt::DisplayRole);
            }
        }
    }
}

2.Delegate的实现

一般对于一个自定义的delegate而言，以下方法一般是必须要重载的：

void paint(QPainter *painter, const QStyleOptionViewItem &option, const QModelIndex &index) const override;

QWidget *createEditor(QWidget *parent, const QStyleOptionViewItem &option,const QModelIndex &index) const override;

void setEditorData(QWidget *editor, const QModelIndex &index) const override;

void setModelData(QWidget *editor, QAbstractItemModel *model,const QModelIndex &index) const override;

paint：实现自定义的绘制；

createEditor：创建响应双击事件的编辑器（控件）

setEditorData：设置控件编辑时的初始值

setModelData：根据控件的值修改model中的数据

本例中的头文件定义如下

delegatectrls.h

#ifndef WIDGET_H
#define WIDGET_H

#include <QStyledItemDelegate>

class DelegateCtrls : public QStyledItemDelegate
{
    Q_OBJECT

public:
    DelegateCtrls(QObject *parent = 0);

    void paint(QPainter *painter, const QStyleOptionViewItem &option,
               const QModelIndex &index) const override;

    QWidget *createEditor(QWidget *parent, const QStyleOptionViewItem &option,
                          const QModelIndex &index) const override;
    void setEditorData(QWidget *editor, const QModelIndex &index) const override;
    void setModelData(QWidget *editor, QAbstractItemModel *model,
                      const QModelIndex &index) const override;

private:
    void drawColoredText(QPainter *painter,const QStyleOptionViewItem &option,
                         const QModelIndex &index) const;
    void drawIconWithText(QPainter *painter,const QStyleOptionViewItem &option,
                         const QModelIndex &index) const;
    void drawCheckBox(QPainter *painter,const QStyleOptionViewItem &option,
                         const QModelIndex &index) const;
    void drawComboBox(QPainter *painter,const QStyleOptionViewItem &option,
                         const QModelIndex &index) const;
    void drawSpinBox(QPainter *painter,const QStyleOptionViewItem &option,
                         const QModelIndex &index) const;

    void drawProgressBar(QPainter *painter,const QStyleOptionViewItem &option,
                         const QModelIndex &index) const;
    void drawStatusIndicator(QPainter *painter,const QStyleOptionViewItem &option,
                         const QString &text) const;
    void drawHighlightColor(QPainter *painter,const QStyleOptionViewItem &option,
                         const QString &text) const;
    void drawCombined(QPainter *painter,const QStyleOptionViewItem &option,
                         const QModelIndex &index,const QList<int> columns) const;
};
#endif // WIDGET_H

下面简要介绍delegate的绘制方法。

如下列代码所示，只需在paint方法中，根据列索引分别编写对应的绘制方法即可。

需要注意的是由于各种自定义的绘制方法有可能用到了单元格填充，因此定义选择条时颜色应设置一定的alpha值。

void DelegateCtrls::paint(QPainter *painter, const QStyleOptionViewItem &option, const QModelIndex &index) const
{
    if (!index.isValid() || option.state == QStyle::State_None )
        return;

    // 根据列索引选择绘制方式
    switch(index.column()) {
        case 0:  // 第一列：带背景色的文本
            drawColoredText(painter, option, index);
            break;
        case 1:  // 第二列：图标+文本
            drawIconWithText(painter, option, index);
            break;
        case 2:  // 第三列：CheckBox
            drawCheckBox(painter, option, index);
            break;
        case 3:  // 第四列：进度条
            drawProgressBar(painter, option, index);
            break;
        case 4:  // 第五列：状态指示
            drawStatusIndicator(painter, option, index.data().toString());
            break;
        case 5:  // 第六列：字体颜色
            drawHighlightColor(painter, option, index.data().toString());
            break;
        case 6:  // 第七列：合并显示
            drawCombined(painter, option, index,{1,3,5});
            break;
        case 7:  // 第八列：SpinBox
            drawSpinBox(painter, option, index);
            break;
        case 8:  // 第九列：QComboBox
            drawComboBox(painter, option, index);
            break;

        default: // 其他列使用默认绘制
            QStyledItemDelegate::paint(painter, option, index);
    }

    //选择条
    if (option.state & QStyle::State_Selected)
        painter->fillRect(option.rect, QColor(255,255,51,100));
}

下面的工作就是分别编写每种绘制方法了。

本例中可以分为三类：

1）一般性绘制

2）系统控件类绘制，如combobox、checkbox、spinbox等

3）数据特殊处理，如涉及到多列的运算及合并显示等

一般性绘制

//------------------------------------------------------------------
// 自定义绘制方法示例
//------------------------------------------------------------------
void DelegateCtrls::drawColoredText(QPainter *painter,
                                    const QStyleOptionViewItem &option,
                                    const QModelIndex &index) const
{
    painter->save();
    // 设置背景色
    painter->fillRect(option.rect, QColor(255,153,0));
    // 绘制文本
    QRect textRect = option.rect.adjusted(5, 0, -5, 0);
    painter->drawText(textRect, Qt::AlignLeft | Qt::AlignVCenter,
                     index.data().toString());
    painter->restore();
}

void DelegateCtrls::drawProgressBar(QPainter *p, const QStyleOptionViewItem &opt, const QModelIndex &index) const
{
    int value = index.data().toInt();

    p->save();
    QRect bar = opt.rect.adjusted(2,2,-2,-2);
    bar.setWidth(bar.width() * value / 200);
    p->fillRect(opt.rect, QColor(230,230,230));
    p->fillRect(bar, QColor(100,200,150));
    p->restore();
}

void DelegateCtrls::drawHighlightColor(QPainter *p, const QStyleOptionViewItem &opt,
                                        const QString &text) const
{
    p->save();
    p->fillRect(opt.rect, QColor(240, 245, 255));
    p->setPen(Qt::red);
    p->drawText(opt.rect.adjusted(5,0,0,0), Qt::AlignRight|Qt::AlignVCenter, text);
    p->restore();
}

void DelegateCtrls::drawIconWithText(QPainter *painter, const QStyleOptionViewItem &option,
                        const QModelIndex &index) const
{
    painter->save();
    const QImage img(":/images/box.png");
    painter->drawImage(option.rect.left()+5, option.rect.center().y()-img.height()/2,img);
    // 绘制文本
    QRect textRect = option.rect.adjusted(42, 0, -5, 0);
    painter->drawText(textRect, Qt::AlignLeft | Qt::AlignVCenter,
                     index.data().toString());
    painter->restore();
}

void DelegateCtrls::drawStatusIndicator(QPainter *p, const QStyleOptionViewItem &opt,
                        const QString &status) const
{
    p->save();
    QColor color = (status == "Active") ? Qt::green : Qt::red;
    p->setBrush(color);
    p->drawEllipse(opt.rect.left()+5, opt.rect.center().y()-5, 10, 10);
    p->drawText(opt.rect.adjusted(20,0,0,0), Qt::AlignLeft | Qt::AlignVCenter, status);
    p->restore();
}

由上述代码可见，一般性绘制比较简单，就是使用painter将设计好的元素绘制出来即可，所需的数据从QModelIndex的data方法可以获得

系统控件绘制

void DelegateCtrls::drawCheckBox(QPainter *painter, const QStyleOptionViewItem &opt, const QModelIndex &index) const
{
    QStyleOptionButton buttonOpt;

    painter->save();
    bool checked = index.data().toBool();
    buttonOpt.rect = opt.rect;
    buttonOpt.state = checked ? QStyle::State_On : QStyle::State_Off;
    buttonOpt.state |= QStyle::State_Enabled;
    buttonOpt.features = QStyleOptionButton::None;
    buttonOpt.text = index.data().toString();

    // 绘制 QCheckBox
    QStyle *style = opt.widget ? opt.widget->style() : QApplication::style();
    style->drawControl(QStyle::CE_CheckBox, &buttonOpt, painter, opt.widget);
    painter->restore();
}

void DelegateCtrls::drawComboBox(QPainter *painter, const QStyleOptionViewItem &opt, const QModelIndex &index) const
{
    QStyleOptionComboBox comboBoxOpt;

    painter->save();
    comboBoxOpt.rect = opt.rect;
    comboBoxOpt.state = opt.state;
    comboBoxOpt.state |= QStyle::State_Enabled;
    comboBoxOpt.currentText = index.data().toString();

    // 绘制 Combobox
    QStyle *style = opt.widget ? opt.widget->style() : QApplication::style();
    style->drawComplexControl(QStyle::CC_ComboBox, &comboBoxOpt, painter, opt.widget);
    style->drawControl(QStyle::CE_ComboBoxLabel, &comboBoxOpt, painter, opt.widget);
    painter->restore();
}

void DelegateCtrls::drawSpinBox(QPainter *painter, const QStyleOptionViewItem &opt, const QModelIndex &index) const
{
    QStyleOptionSpinBox spinBoxOpt;

    painter->save();
    spinBoxOpt.rect = opt.rect;
    spinBoxOpt.state |= QStyle::State_Enabled;
    spinBoxOpt.frame = true;

    // 绘制 QSpinBox 框架
    QStyle *style = opt.widget ? opt.widget->style() : QApplication::style();
    style->drawComplexControl(QStyle::CC_SpinBox, &spinBoxOpt, painter, opt.widget);
    // 绘制文本
    QRect spinTextRect = opt.rect.adjusted(10, 0, -10, 0);
    painter->drawText(spinTextRect, Qt::AlignLeft | Qt::AlignVCenter,
                     index.data().toString());
    painter->restore();
}

系统控件的绘制稍微复杂的地方在于需要调用QStyle预定义的类，同时，仅仅能绘制出指定的外观，并不具有控件的功能，要实现控件功能，需要结合createEditor、setEditorData来使用。

最后是数据处理类

//对 columns 中的列求和
void DelegateCtrls::drawCombined(QPainter *painter, const QStyleOptionViewItem &option,
                        const QModelIndex &index,const QList<int> columns) const
{
    painter->save();
    //求和
    int sum = 0;
    QString sumstr;
    foreach(int col, columns) {
        sumstr += QString::number(col+1);
        sumstr += ",";
        sum +=index.sibling(index.row(),col).data().toInt();
    }

    // 绘制文本
    QRect textRect = option.rect.adjusted(5, 0, -5, 0);
    painter->drawText(textRect, Qt::AlignLeft | Qt::AlignVCenter,
                      QString("sum(%1)=%2").arg(sumstr).arg(sum));
    painter->restore();
}

前面说了如果绘制了系统控件，则需要定义编辑器，代码如下

QWidget* DelegateCtrls::createEditor(QWidget *parent, const QStyleOptionViewItem &option, const QModelIndex &index) const
{
    if (index.column() == 7) { // 第八列: QSpinBox
        QSpinBox *spinBox = new QSpinBox(parent);
        spinBox->setRange(0, 200);
        spinBox->setValue(0);
        return spinBox;
    }
    else if (index.column() == 8) {// 第九列：QComboBox
        QComboBox *combobox = new QComboBox(parent);
        combobox->addItems({"11","22","33","44"});
        return combobox;
    }
    else
    {
        return new QLineEdit(parent);
    }
}

void DelegateCtrls::setEditorData(QWidget *editor, const QModelIndex &index) const
{
    if (index.column() == 7) // QSpinBox
    {
        QSpinBox *spinBox = static_cast<QSpinBox *>(editor);
        spinBox->setValue(index.data().toInt());
    }
    else if (index.column() == 8) // QComboBox
    {
        QComboBox *combobox = static_cast<QComboBox *>(editor);
        combobox->addItem(index.data().toString());
        combobox->setCurrentText(index.data().toString());
    }
    else {
        dynamic_cast<QLineEdit*>(editor)->setText(index.data(Qt::DisplayRole).toString());
    }
}

void DelegateCtrls::setModelData(QWidget *editor, QAbstractItemModel *model, const QModelIndex &index) const
{
    if (index.column() == 7) // QSpinBox
    {
        QSpinBox *spinBox = static_cast<QSpinBox *>(editor);
        model->setData(index,spinBox->value());
    }
    else if (index.column() == 8) // QComboBox
    {
        QComboBox *combobox = static_cast<QComboBox *>(editor);
        model->setData(index,combobox->currentText().toInt());
    }
    else {
        model->setData(index, dynamic_cast<QLineEdit*>(editor)->text(), Qt::DisplayRole);
    }
}

本例代码见 https://download.csdn.net/download/cnbizz/90466827?spm=1001.2014.3001.5503