Qt的开发过程中，经常会应用到它的模型视图结构，对于初学者来说，马上理解其原理，并且进行基础的应用，还是比较难的。另外，通过网络搜索查看别人发表有关模型视图的介绍，基本上都不能解决个人的一些疑惑。基于此，本文将结合实例来说明模型设计的应用，以便能够更加深刻的理解Qt模型视图的设计原理。
任何知识，如果想要能够应用自如，个人觉得首先需要对该知识，需要有一个整体的认识。所以，首先将对模型视图结构进行总体的说明，然后再结合实例来说明其应用，并且重点介绍代理的两种应用方式，最后再进行总结。
一、模型视图简介
Qt的模型视图与MVC设计模式类似，但是又不相同，MVC设计模式包括模型、视图和控制。模型表示数据，视图表示用户界面，控制定义了用户的操作。它能够有效将数据和显示分离，提高了代码的灵活性。Qt的模型视图同样有这样的效果。但是Qt的模型视图将视图和控制放在一起，以便简化框架。另外，为了能够更好的处理用户输入，Qt的模型视图加入的代理。通过代理能够自定义item的显示和编辑。
Qt的模型视图结构如下图所示，主要包含三个部分，分别为模型、视图和代理。模式与数据源通信，给其他部件提供接口。视图从模型中通过ModelIndex获取信息，代理用来显示和编辑item。
二、模型
模型的抽象基类为QAbstractItemModel, 下图显示了其继承关系。
QAbstractTableModel是表格的抽象基类，QAbstractListMode的列表的抽象基类。QAbstractProxyModel是代理的抽象基类。QDirModel是文件和目录的模型。QSqlQueryModel是有关数据库的模型。
模型的数据可以直接存在模型中，也可以由外部输入，由独立的类管理，还可以存在文件中，甚至是数据库。
模型中角色的功能是，根据不同的角色提供不同的数据。支持以下几种角色。
1、Qt::DisplayRole, 显示文字
2、Qt::DecorationRole，绘制数据
3、Qt::EditRole, 编辑器中的数据
4、Qt::ToolTipRole, 工具提示
5、Qt::StatusTipRole, 状态栏提示
6、Qt::SizeHintRole, 尺寸提示
7、Qt::FontRole, 字体
8、Qt::TextAlignmentRole, 对齐方式
9、Qt::BackgroundRole, 背景画刷
10、Qt::ForegroundRole, 前景画刷
11、Qt::CheckStateRole, 检查框状态
12、Qt::UseRole, 用户自定义数据的起始位置
三、视图
视图的抽象基类为QAbstractItemView, 它由五个基本视图类组成，分别是QTreeeView、QHeaderView、QListView、QColumnView和QTableVie w。为了用户简单方便的使用，还提供了三个模式视图集成的类，分别是QTreeWidget、QListWidget、QTableWidget。对于变动不大，并且简单的需求可以采用这三个类来快速开发。但是对于变动比较大的需求，就不建议使用这三个类，因为它们缺乏灵活性。
四、代理
代理的抽象基类为QAbstractItemDelegate, 如果需要改变item的显示或者item的编辑行为，那么可以考虑自定义代理类。
一般自定义代理类是继承QItemDelegate可以满足大部分的需求，如果直接继承QAbstractItemDelegate，则需要更多的开发工作量。
如果想要改变item的显示，那么可以通过继承QItemDelegate，然后重载paint。
如果想要改变item的编辑行为，同样的可以继承QItemDelegate，然后重载createEditor、setEditorData、setModelData和updateEditorGeometry。
下面的实例将详细介绍代理的这两种应用方式。
五、实例
首先实现模型QAbstractTableModel和表格QtableView的结合显示数据信息的实例。为了代码的清晰度，这里model直接存储了数据。
JWeaponModel模型的定义如下所示，rowCount返回行数，columnCount返回列数，data实现返回item的数据，headerData则是实现返回标题信息。flags和setData函数是为了支持代理而添加的，后面会讲解其作用。这里可以暂时不需要太关注。
class JWeaponModel : public QAbstractTableModel
{
public:
JWeaponModel(QObject *parent = 0);
virtual int rowCount(const QModelIndex& parent = QModelIndex()) const;
virtual int columnCount(const QModelIndex& parent = QModelIndex()) const;
QVariant data(const QModelIndex &index, int role) const;
QVariant headerData(int section, Qt::Orientation orentation, int role) const;
Qt::ItemFlags flags(const QModelIndex &index) const;
bool setData(const QModelIndex &index, const QVariant &value, int role);
private:
void InitData();
private:
QVector<short> m_army; // 军种索引
QVector<short> m_weapon; // 武器索引
QMap<short, QString> m_MapArmy; // 军种映射表
QMap<short, QString> m_MapWeapon; // 武器映射表
QStringList m_header;
};
JWeaponModel模型的实现如下，columnCount默认写死显示三列。date根据角色Qt::DisplayRole来说显示不同数据条目的数据。headerData返回水平标题信息。
JWeaponModel::JWeaponModel(QObject *parent)
: QAbstractTableModel(parent)
{
m_MapArmy[1] = tr("海军");
m_MapArmy[2] = tr("空军");
m_MapWeapon[1] = tr("战斗机");
m_MapWeapon[2] = tr("轰炸机");
InitData();
}
int JWeaponModel::rowCount(const QModelIndex& parent) const
{
return m_MapArmy.size();
}
int JWeaponModel::columnCount(const QModelIndex& parent) const
{
return 3;
}
QVariant JWeaponModel::data(const QModelIndex &index, int role) const
{
if (!index.isValid())
{
return QVariant();
}
if (role == Qt::DisplayRole)
{
switch (index.column())
{
case 0:
{
return m_MapArmy[m_army[index.row()]];
}
case 1:
{
return m_MapWeapon[m_weapon[index.row()]];
}
default:
{
return QVariant();
}
}
}
return QVariant();
}
QVariant JWeaponModel::headerData(int section, Qt::Orientation orentation, int role) const
{
if (role == Qt::DisplayRole && orentation == Qt::Horizontal)
{
return m_header[section];
}
return QAbstractTableModel::headerData(section, orentation, role);
}
void JWeaponModel::InitData()
{
m_header << tr("军种") << tr("种类") << tr("部门") ;
m_army << 1 << 2;
m_weapon << 1 << 2;
}
// 需要添加ItemIsEditable属性，否则代理创建的部件显示不出来
Qt::ItemFlags JWeaponModel::flags(const QModelIndex &index) const
{
return Qt::ItemIsEditable | QAbstractTableModel::flags(index);
}
bool JWeaponModel::setData(const QModelIndex &index, const QVariant &value, int role)
{
if (role == Qt::EditRole)
{
int row = index.row();
m_MapArmy[row+1] = value.toString();
//LOG(INFO) << "row :" << row;
return true;
}
return false;
}
主程序添加如下代码，QTableView设置模式为JWeaponModel。
JWeaponModel *p_weapon_model = new JWeaponModel();
QTableView *p_view = new QTableView();
p_view->setModel(p_weapon_model);
p_view->resize(640, 480);
p_view->show();
编译运行之后的效果如下，显示的数据均来自模型JWeaponModel。
如果想要改变item的编辑行为，支持双击的时候，变成选择框QComboBox，那么考虑使用代码，其定义如下,createEditor创建控件，setEditorData设置控件初始数据，setModelData将编辑数据写入model, 则model需要实现setData（参加JWeaponModel类的实现），这样才能将数据显示到视图。updateEditorGeometry管理控件位置。
#include <QModelIndex>
#include <QVariant>
#include <QItemDelegate>
class JEditorDelegate : public QItemDelegate
{
Q_OBJECT
public:
JEditorDelegate(QObject *parent = 0);
~JEditorDelegate() 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;
void updateEditorGeometry(QWidget *editor,
const QStyleOptionViewItem &option,
const QModelIndex &index) const override;
};
JEditorDelegate对应的实现如下，这里只针对表格第一列进行处理。
JEditorDelegate::JEditorDelegate(QObject *parent)
: QItemDelegate(parent)
{
}
JEditorDelegate::~JEditorDelegate()
{
}
QWidget *JEditorDelegate::createEditor(QWidget *parent,
const QStyleOptionViewItem &option,
const QModelIndex &index) const
{
if (index.column() == 0)
{
QComboBox *p_editor = new QComboBox(parent);
p_editor->addItem(tr("one"));
p_editor->addItem(tr("two"));
return p_editor;
}
else
{
return QItemDelegate::createEditor(parent, option, index);
}
}
void JEditorDelegate::setEditorData(QWidget *editor, const QModelIndex &index) const
{
if (index.column() == 0)
{
QComboBox *p_combobox = qobject_cast<QComboBox*>(editor);
if(p_combobox)
{
int i = p_combobox->findText("one");
p_combobox->setCurrentIndex(i);
}
}
else
{
return QItemDelegate::setEditorData(editor, index);
}
}
void JEditorDelegate::setModelData(QWidget *editor, QAbstractItemModel *model, const QModelIndex &index) const
{
if (index.column() == 0)
{
QComboBox *p_combobox = qobject_cast<QComboBox*>(editor);
if(p_combobox)
{
model->setData(index, p_combobox->currentText());
}
}
else
{
return QItemDelegate::setModelData(editor, model, index);
}
}
void JEditorDelegate::updateEditorGeometry(QWidget *editor,
const QStyleOptionViewItem &option,
const QModelIndex &index) const
{
(void)index;
editor->setGeometry(option.rect);
}
主程序添加代理，进行如下所示的修改，调用QTableView的setItemDelegate来添加代理。
JWeaponModel *p_weapon_model = new JWeaponModel();
QTableView *p_view = new QTableView();
p_view->setModel(p_weapon_model);
p_view->setItemDelegate(new JEditorDelegate());
p_view->resize(640, 480);
p_view->show();
编译运行之后，双击第一列第一行的item, 则出现如下的效果
如果想要改变item的显示，那么也是通过代理的方式来支持，其代理类定义如下，继承QItemDelegate，并重载paint。
#include <QModelIndex>
#include <QItemDelegate>
class JArrowDelegate : public QItemDelegate
{
Q_OBJECT
public:
JArrowDelegate(QObject* parent = 0);
virtual void paint(QPainter* painter, const QStyleOptionViewItem& option, const QModelIndex& index) const;
};
对应的实现如下，paint实现再item中画一个黑色的竖线。
JArrowDelegate::JArrowDelegate(QObject *parent)
: QItemDelegate(parent)
{
}
void JArrowDelegate::paint(QPainter* painter, const QStyleOptionViewItem& option, const QModelIndex& index) const
{
(void)index;
//int i_row = index.row();
int i_x = option.rect.x();
int i_y = option.rect.y();
int i_width = option.rect.width();
int i_height = option.rect.height();
QPen pen;
pen.setWidth(2);
pen.setColor(QColor(Qt::black));
QStyleOptionViewItem my_option = option;
QPainterPath path;
QPoint point_one;
QPoint point_two;
point_one.setX(i_x + i_width / 2);
point_one.setY(i_y);
point_two.setX(i_x + i_width / 2);
point_two.setY(i_y + i_height);
path.moveTo(point_one);
path.lineTo(point_two);
painter->setPen(pen);
painter->drawPath(path);
}
主程序添加代理JArrowDelegate，调用QTableView的接口setItemDelegateForColumn只对表格的第三列添加代理。
JWeaponModel *p_weapon_model = new JWeaponModel();
QTableView *p_view = new QTableView();
p_view->setModel(p_weapon_model);
p_view->setItemDelegate(new JEditorDelegate());
p_view->setItemDelegateForColumn(2, new JArrowDelegate());
p_view->resize(640, 480);
p_view->show();
编译运行效果如下，第三列显示了一条竖线。
六、总结
QT模型视图的原理以及使用说明的讲解就到这里。本文先说明了模型视图的结构，然后再依次说明模型、视图和代理的类层次结构。最后结合具体实例来说明其应用方式，从中可以看出模型提供数据给视图显示，而代理则可以改变数据条目的显示，并通知视图，代理还可以改变数据条目的编辑行为，并通知模型。
