MVC是一种与用户界面相关的设计模式。通过使用此模型,可以有效地分离数据和用户界面。MVC设计模式包含三要素:表示数据的模型(Model)、表示用户界面的视图(View)和定义了用户在界面上的操作控制(Controller)。
Qt的设计了一种与MVC类似的设计模式:使用模型/视图结构完成数据和界面的分离,即InterView框架。Qt的InterView框架把视图和控制部件结合在一起,使得框架更为简洁。Qt引入了代理(delegate)更灵活的处理用户的输入,能够自定义数据条目(item)的显示和编辑方式。
Qt的模型/视图结构分为三个部分:模型、视图、代理。模型与数据源通信并为其他部件提供接口;视图从模型中获得用来引用数据条目的条目索引;在视图中,代理负责绘制数据条目。编辑条目时,代理和模型直接通信;各个部件之间使用信号和槽的方式进行通信。
使用模型/视图结构实现一个简单的小案例:文件浏览器
#include <QApplication> #include <QAbstractItemModel> #include <QAbstractItemView> #include <QItemSelectionModel> #include <QDirModel> #include <QTreeView> #include <QListView> #include <QTableView> #include <QSplitter> int main(int argc, char *argv[]) { QApplication a(argc, argv); // QDirModel类继承自QAbstractItemModel类,为访问本地文件系统提供数据模型,它提供了与文件操作相关的函数 QDirModel model; // 新建三种不同的View对象,以便文件对象可以以三种不同方式显示 QTreeView tree; QListView list; QTableView table; tree.setModel(&model); list.setModel(&model); table.setModel(&model); // 设置treeView对象的选择方式为多选 //tree.setSelectionMode(QAbstractItemView::MultiSelection); //list.setSelectionModel(tree.selectionModel()); //table.setSelectionModel(tree.selectionModel()); // 实现双击对象中某个项目时,QListView和QTableView对象显示选定目录下的文件和目录 QObject::connect(&tree, SIGNAL(doubleClicked(QModelIndex)), &list, SLOT(setRootIndex(QModelIndex))); QObject::connect(&tree, SIGNAL(doubleClicked(QModelIndex)), &table, SLOT(setRootIndex(QModelIndex))); QSplitter *splitter = new QSplitter; splitter->addWidget(&tree); splitter->addWidget(&list); splitter->addWidget(&table); splitter->setWindowTitle(QObject::tr("InterView")); splitter->resize(1500, 600); splitter->show(); return a.exec(); }实例效果如图:
实现一个将数值装换为文字的模型,此模型保存各种武器和不同军种对应。 头文件:
#include <QAbstractTableModel> #include <QVector> #include <QMap> #include <QList> class ModelEx : public QAbstractTableModel { Q_OBJECT public: ModelEx(QObject *parent = 0); // 重定义QAbstractTableModel的虚函数 virtual int rowCount(const QModelIndex &parent) const; virtual int columnCount(const QModelIndex &parent) const; QVariant data(const QModelIndex &index, int role) const; QVariant headerData(int section, Qt::Orientation orientation, int role) const; private: QVector<short> army; QVector<short> weaponType; QMap<short, QString> armyMap; QMap<short, QString> weaponTypeMap; QStringList weapon; QStringList header; // 完成表格数据的初始化填充 void populateModel(); }; #include "ModelEx.h" ModelEx::ModelEx(QObject *parent) : QAbstractTableModel(parent) { armyMap[1] = tr("空军"); armyMap[2] = tr("陆军"); armyMap[3] = tr("海军"); armyMap[4] = tr("海军陆战队"); weaponTypeMap[1] = tr("轰炸机"); weaponTypeMap[2] = tr("战斗机"); weaponTypeMap[3] = tr("航空母舰"); weaponTypeMap[4] = tr("驱逐舰"); weaponTypeMap[5] = tr("直升机"); weaponTypeMap[6] = tr("坦克"); weaponTypeMap[7] = tr("两栖攻击舰"); weaponTypeMap[8] = tr("两栖战车"); populateModel(); } int ModelEx::rowCount(const QModelIndex &parent) const { // 返回行数 return army.size(); } int ModelEx::columnCount(const QModelIndex &parent) const { // 返回列数 return 3; } // 返回指定索引的数据,即将数字映射为文字 QVariant ModelEx::data(const QModelIndex &index, int role) const { if (!index.isValid()) { return QVariant(); } if (role == Qt::DisplayRole) { switch(index.column()) { case 0: return armyMap[army[index.row()]]; break; case 1: return weaponTypeMap[weaponType[index.row()]]; break; case 2: return weapon[index.row()]; default: return QVariant(); } } return QVariant(); } // 设置表头数据 QVariant ModelEx::headerData(int section, Qt::Orientation orientation, int role) const { if (role == Qt::DisplayRole && orientation == Qt::Horizontal) { return header[section]; } return QAbstractTableModel::headerData(section, orientation, role); } void ModelEx::populateModel() { header << tr("军种") << tr("种类") << tr("武器"); army << 1 << 2 << 3 << 4 << 2 << 4 << 3 << 1; weaponType << 1 << 3 << 5 << 7 << 4 << 8 << 6 << 2; weapon << tr("B-2") << tr("尼米兹级") << tr("阿帕奇") << tr("黄蜂级") << tr("阿利伯克级") << tr("AAAV") << tr("M1A1") << tr("F-22"); }主函数:
#include <QApplication> #include "ModelEx.h" #include <QTableView> int main(int argc, char *argv[]) { QApplication a(argc, argv); ModelEx modelEx; QTableView view; view.setModel(&modelEx); view.setWindowTitle(QObject::tr("weapon")); view.resize(600, 600); view.show(); return a.exec(); }此实例实现为:
