Qt 模型視圖結構

會計學1Qt模型視圖結構Qt的模型/視圖結構分為三部分：模型（Model）、視圖（View）和代理（Delegate）。其中，模型與數據源通信，并為其他部件提供接口；而視圖從模型中獲得用來引用數據條目的模型索引（ModelIndex）。在視圖中，代理負責繪制數據條目，當編輯條目時，代理和模型直接進行通信。模型/視圖/代理之間通過信號和槽進行通信，如圖8.1所示。第1頁/共42頁8.1概述8.1.1基本概念1．模型（Model）InterView框架中的所有模型都基于抽象基類QAbstractItemModel類，此類由QProxyModel、QAbstractListModel、QAbstractTableModel、QAbstractProxyModel、QDirModel、QFileSystemModel、QHelpContentModel

和

QStandardItemModel類繼承。其中，QAbstractListModel類和QAbstractTableModel類是列表和表格模型的抽象基類，如果需要實現列表或表格模型，則應從這兩個類繼承。第2頁/共42頁8.1.1基本概念2．視圖（View）InterView框架中的所有視圖都基于抽象基類QAbstractItemView類，此類由QColumnView、QHeaderView、QListView、QTableView和QTreeView類繼承。其中，QListView類由QUndoView類和QListWidget類繼承；QTableView類由QTableWidget類繼承；QTreeView類由QTreeWidget類繼承。而QListWidget類、QTableWidget類和QTreeWidget類實際上已經包含了數據，是模型/視圖集成在一起的類。3．代理（Delegate）InterView框架中的所有代理都基于抽象基類QAbstractItemDelegate類，此類由QItemDelegate

和

QStyledItemDelegate類繼承。其中，QItemDelegate類由表示數據庫中關系代理的QSqlRelationalDelegate類繼承。第3頁/共42頁8.1.2【實例】：模型/視圖類使用【例】（簡單）實現一個簡單的文件目錄瀏覽器，完成效果如圖8.2所示。實例文件見光盤CH801。創(chuàng)建工程“DirModeE”，其源文件“main.cpp”中的具體代碼。最后運行結果如圖8.2所示。第4頁/共42頁8.2模型（Model）【例】（難度一般）通過實現將數值代碼轉換為文字的模型來介紹如何使用自定義模型。此模型中保存了不同軍種的各種武器，實現效果如圖8.3所示。實例文件見光盤CH802。第5頁/共42頁8.2模型（Model）具體操作步驟如下。（1）ModelEx類繼承自QAbstractTableModel類，頭文件“modelex.h”中的具體代碼。（2）源文件“modelex.cpp”中的具體代碼。populateModel()函數的具體實現代碼如下：voidModelEx::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");}第6頁/共42頁8.2模型（Model）columnCount()函數中，模型的列固定為“3”，所以直接返回“3”。intModelEx::columnCount(constQModelIndex&parent)const{ return3; }rowCount()函數返回模型的行數。intModelEx::rowCount(constQModelIndex&parent)const{returnarmy.size();}data()函數返回指定索引的數據，即將數值映射為文字。第7頁/共42頁8.2模型（Model）表8.1列出了Item主要的角色及其描述。常

量描

述Qt::DisplayRole顯示文字Qt::DecorationRole繪制裝飾數據（通常是圖標）Qt::EditRole在編輯器中編輯的數據Qt::ToolTipRole工具提示Qt::StatusTipRole狀態(tài)欄提示Qt::WhatsThisRoleWhat’sThis文字Qt::SizeHintRole尺寸提示Qt::FontRole默認代理的繪制使用的字體Qt::TextAlignmentRole默認代理的對齊方式Qt::BackgroundRole默認代理的背景畫刷Qt::ForegroundRole默認代理的前景畫刷Qt::CheckStateRole默認代理的檢查框狀態(tài)Qt::UserRole用戶自定義的數據的起始位置第8頁/共42頁8.2模型（Model）headerData()函數返回固定的表頭數據，設置水平表頭的標題，具體代碼如下：QVariantModelEx::headerData(intsection,Qt::Orientationorientation,introle)const{if(role==Qt::DisplayRole&&orientation==Qt::Horizontal)returnheader[section];returnQAbstractTableModel::headerData(section,orientation,role);}第9頁/共42頁8.2模型（Model）（3）在源文件“main.cpp”中，將模型和視圖關聯，具體代碼如下：#include<QApplication>#include"modelex.h"#include<QTableView>intmain(intargc,char*argv[]){QApplicationa(argc,argv);ModelExmodelEx;QTableViewview;view.setModel(&modelEx);view.setWindowTitle(QObject::tr("modelEx"));view.resize(400,400);view.show();returna.exec();}（4）運行結果如圖8.3所示。第10頁/共42頁8.3視圖（View）【例】（難度中等）通過利用自定義的View，實現一個對TableModel的表格數據進行顯示的柱狀統(tǒng)計圖例子，以此介紹如何應用自定義的View。實現效果如圖8.4所示。實例文件見光盤CH803。第11頁/共42頁8.3視圖（View）具體實現步驟如下。（1）完成主窗體，以便顯示View的內容。MainWindow類繼承自QMainWindow類，作為主窗體。以下是頭文件“mainwindow.h”的具體代碼。（2）下面是源文件“mainwindow.cpp”中的具體代碼。setupModel()函數新建一個Model，并設置表頭數據，其具體實現代碼如下：voidMainWindow::setupModel(){model=newQStandardItemModel(4,4,this);model->setHeaderData(0,Qt::Horizontal,tr("部門"));model->setHeaderData(1,Qt::Horizontal,tr("男"));model->setHeaderData(2,Qt::Horizontal,tr("女"));model->setHeaderData(3,Qt::Horizontal,tr("退休"));}第12頁/共42頁8.3視圖（View）setupView()函數的具體實現代碼如下：voidMainWindow::setupView(){table=newQTableView; //新建一個QTableView對象table->setModel(model); //為QTableView對象設置相同的ModelQItemSelectionModel*selectionModel=newQItemSelectionModel(model); //(a)table->setSelectionModel(selectionModel);connect(selectionModel,SIGNAL(selectionChanged(QItemSelection,ItemSelection)),table,SLOT(selectionChanged(QItemSelection,QItemSelec-tion))); //(b)splitter=newQSplitter;splitter->setOrientation(Qt::Vertical);splitter->addWidget(table);setCentralWidget(splitter);}第13頁/共42頁8.3視圖（View）（3）此時，運行效果如圖8.5所示。第14頁/共42頁8.3視圖（View）（1）在頭文件“mainwindow.h”中添加代碼如下：public:voidopenFile(QString);publicslots:voidslotOpen();（2）在源文件mainwindow.cpp中添加代碼如下：#include<QFileDialog>#include<QFile>#include<QTextStream>#include<QStringList>其中，在createAction()函數中添加代碼如下：connect(openAct,SIGNAL(triggered()),this,SLOT(slotOpen()));第15頁/共42頁8.3視圖（View）槽函數slotOpen()完成打開標準文件對話框，具體代碼如下：voidMainWindow::slotOpen(){QStringname;name=QFileDialog::getOpenFileName(this,"打開",".","histogramfiles(*.txt)");if(!name.isEmpty())openFile(name);}openFile()函數完成打開所選的文件內容，其具體實現代碼。第16頁/共42頁8.3視圖（View）新建一個文本文件，命名為“histogram.txt”，保存在項目D:\Qt\CH8\CH803\build-ViewEx-Desktop_Qt_5_4_0_MinGW_32bit-Debug目錄下，文件內容及打開后的效果如圖8.6所示。第17頁/共42頁8.3視圖（View）以上完成了表格數據的加載，下面介紹柱狀統(tǒng)計圖的繪制。具體實現步驟如下。（1）自定義HistogramView類繼承自QAbstractItemView類，用于對表格數據進行柱狀圖顯示。下面是頭文件“histogramview.h”的具體代碼。（2）源文件“histogramview.cpp”的具體代碼。dataChanged()函數實現當Model中的數據更改時，調用繪圖設備的update()函數進行更新，反映數據的變化。具體實現代碼。voidHistogramView::dataChanged(constQModelIndex&topLeft,constQModelIndex&bottomRight){QAbstractItemView::dataChanged(topLeft,bottomRight);viewport()->update();}setSelectionModel()函數為selections賦初值，具體代碼如下：voidHistogramView::setSelectionModel(QItemSelectionModel*selectionModel){selections=selectionModel;}第18頁/共42頁8.3視圖（View）（3）下面的工作就是完成對選擇項的更新。selectionChanged()函數中完成當數據項發(fā)生變化時調用update()函數，重繪繪圖設備即可工作。此函數是將其他View中的操作引起的數據項選擇變化反映到自身View的顯示中。具體代碼如下：voidHistogramView::selectionChanged(constQItemSelection&selected,constQItemSelection&deselected){viewport()->update();}鼠標按下事件函數mousePressEvent()，在調用setSelection()函數時確定鼠標單擊點是否在某個數據項的區(qū)域內，并設置選擇項。具體代碼如下：voidHistogramView::mousePressEvent(QMouseEvent*event){QAbstractItemView::mousePressEvent(event);setSelection(QRect(event->pos().x(),event->pos().y(),1,1),QItemSelectionModel::SelectCurrent);}第19頁/共42頁8.3視圖（View）setSelection()函數的具體代碼如下：voidHistogramView::setSelection(constQRect&rect,QItemSelectionModel::SelectionFlagsflags){introws=model()->rowCount(rootIndex()); //獲取總行數intcolumns=model()->columnCount(rootIndex()); //獲取總列數QModelIndexselectedIndex; //(a)for(introw=0;row<rows;++row) //(b){for(intcolumn=1;column<columns;++column){QModelIndexindex=model()->index(row,column,rootIndex());QRegionregion=itemRegion(index); //(c)if(!ersected(rect).isEmpty())selectedIndex=index;}}if(selectedIndex.isValid()) //(d)selections->select(selectedIndex,flags);else{QModelIndexnoIndex;selections->select(noIndex,flags);}}第20頁/共42頁8.3視圖（View）indexAt()函數的具體內容。由于本例未用到以下函數的功能，所以沒有實現具體內容，但仍然要寫出函數體的框架，代碼如下：QRectHistogramView::visualRect(constQModelIndex&index)const{}voidHistogramView::scrollTo(constQModelIndex&index,ScrollHint){}QModelIndexHistogramView::moveCursor(QAbstractItemView::CursorActioncursorAction,Qt::KeyboardModifiersmodifiers){}intHistogramView::horizontalOffset()const{}intHistogramView::verticalOffset()const{}boolHistogramView::isIndexHidden(constQModelIndex&index)const{}QRegionHistogramView::visualRegionForSelection(constQItemSelection&selection)const{}第21頁/共42頁8.3視圖（View）itemRegion()函數的具體代碼如下：QRegionHistogramView::itemRegion(QModelIndexindex){QRegionregion;if(index.column()==1) //男region=MRegionList[index.row()];if(index.column()==2) //女region=FRegionList[index.row()];if(index.column()==3) //退休region=SRegionList[index.row()];returnregion;}第22頁/共42頁8.3視圖（View）（4）在頭文件“mainwindow.h”中添加代碼如下：#include"histogramview.h"private:HistogramView*histogram;（5）在源文件“mainwindow.cpp”中添加代碼，其中，setupView()函數的代碼修改。（6）運行結果如圖8.4所示。第23頁/共42頁8.4代理（Delegate）【例】（難度中等）利用Delegate設計表格中控件如圖8.7所示。實例文件見光盤CH804。第24頁/共42頁8.4代理（Delegate）具體實現步驟如下。（1）首先，加載表格數據，以便后面的操作。源文件“main.cpp”中的具體代碼如下：（2）選擇“構建”→“構建項目"DateDelegate"”菜單項，首先按照如圖8.8所示的格式編輯本例所用的數據文件“test.txt”，保存在項目D:\Qt\CH8\CH804\build-DateDelegate-Desktop_Qt_5_4_0_MinGW_32bit-Debug目錄下，然后運行程序，結果如圖8.7所示。第25頁/共42頁8.4代理（Delegate）（3）在圖8.7中，使用手動的方式實現對生日的錄入編輯。下面使用日歷編輯框QDateTimeEdit控件實現對生日的編輯，用自定義的Delegate來實現。（4）DateDelegate繼承自QItemDelegate類。頭文件“datedelegate.h”中的具體代碼如下：#include<QItemDelegate>classDateDelegate:publicQItemDelegate{Q_OBJECTpublic:DateDelegate(QObject*parent=0);QWidget*createEditor(QWidget*parent,constQStyleOptionViewItem&option,constQModelIndex&index)const; //(a)voidsetEditorData(QWidget*editor,constQModelIndex&index)const; //(b)voidsetModelData(QWidget*editor,QAbstractItemModel*model,constQModelIndex&index)const; //將Delegate中對數據的改變更新至Model中voidupdateEditorGeometry(QWidget*editor,constQStyleOptionViewItem&option,constQModelIndex&index)const; //更新控件區(qū)的顯示};第26頁/共42頁8.4代理（Delegate）（5）源文件“datedelegate.cpp”中的具體代碼如下：#include"datedelegate.h"#include<QDateTimeEdit>DateDelegate::DateDelegate(QObject*parent):QItemDelegate(parent){}createEditor()函數的具體實現代碼如下：QWidget*DateDelegate::createEditor(QWidget*parent,constQStyleOptionViewItem&/*option*/,constQModelIndex&/*index*/)const{QDateTimeEdit*editor=newQDateTimeEdit(parent); //(a)editor->setDisplayFormat("yyyy-MM-dd"); //(b)editor->setCalendarPopup(true); //(c)editor->installEventFilter(const_cast<DateDelegate*>(this)); //(d)returneditor;}第27頁/共42頁8.4代理（Delegate）setEditorData()函數的具體代碼如下：voidDateDelegate::setEditorData(QWidget*editor,constQModelIndex&index)const{QStringdateStr=index.model()->data(index).toString(); //(a)QDatedate=QDate::fromString(dateStr,Qt::ISODate); //(b)QDateTimeEdit*edit=static_cast<QDateTimeEdit*>(editor); //(c)edit->setDate(date); //設置控件的顯示數據} 第28頁/共42頁8.4代理（Delegate）setModelData()函數的具體代碼如下：voidDateDelegate::setModelData(QWidget*editor,QAbstractItemModel*model,constQModelIndex&index)const{QDateTimeEdit*edit=static_cast<QDateTimeEdit*>(editor);//(a)QDatedate=edit->date(); //(b)model->setData(index,QVariant(date.toString(Qt::ISODate)));//(c)}updateEditorGeometry()函數的具體代碼如下：voidDateDelegate::updateEditorGeometry(QWidget*editor,constQStyleOptionViewItem&option,constQModelIndex&index)const{editor->setGeometry(option.rect);}第29頁/共42頁8.4代理（Delegate）（6）在“main.cpp”文件中添加如下代碼：#include"datedelegate.h"在語句tableView.setModel(&model);后面添加如下代碼：DateDelegatedateDelegate;tableView.setItemDelegateForColumn(1,&dateDelegate);（7）此時運行程序，雙擊第1行第2列，將顯示如圖8.9所示的日歷編輯框控件。第30頁/共42頁8.4代理（Delegate）下面使用下拉列表框QComboBox控件實現對職業(yè)類型的輸入編輯，使用自定義的Delegate實現。（1）ComboDelegate繼承自QItemDelegate類。頭文件“combodelegate.h”中的具體代碼如下：#include<QItemDelegate>classComboDelegate:publicQItemDelegate{Q_OBJECTpublic:ComboDelegate(QObject*parent=0);QWidget*createEditor(QWidget*parent,constQStyleOptionViewItem&option,constQModelIndex &index)const;voidsetEditorData(QWidget*editor,constQModelIndex&index)const;voidsetModelData(QWidget*editor,QAbstractItemModel*model,constQModelIndex&index)const;voidupdateEditorGeometry(QWidget*editor,constQStyleOptionViewItem&option,constQModelIndex&index)const;};第31頁/共42頁8.4代理（Delegate）（2）源文件“combodelegate.cpp”中的具體代碼如下：#include"combodelegate.h"#include<QComboBox>ComboDelegate::ComboDelegate(QObject*parent):QItemDelegate(parent){}第32頁/共42頁8.4代理（Delegate）createEditor()函數中創(chuàng)建了一個QComboBox控件，并插入可顯示的條目，安裝事件過濾器。具體代碼如下：QWidget*ComboDelegate::createEditor(QWidget*parent,constQStyleOptionViewItem&/*option*/,constQModelIndex&/*index*/)const{QComboBox*editor=newQComboBox(parent);editor->addItem("工人");editor->addItem("農民");editor->addItem("醫(yī)生");editor->addItem("律師");editor->addItem("軍人");editor->installEventFilter(const_cast<ComboDelegate*>(this));returneditor;}第33頁/共42頁8.4代理（Delegate）setEditorData()函數中更新了Delegate控件中的數據顯示，具體代碼如下：voidComboDelegate::setEditorData(QWidget*editor,constQModelIndex&index)const{QStringstr=index.model()->data(index).toString();QComboBox*box=static_cast<QComboBox*>(editor);inti=box->findText(str);box->setCurrentIndex(i);}setModelData()函數中更新了Model中的數據，具體代碼如下：voidComboDelegate::setModelData(QWidget*editor,QAbstractItemModel*model,constQModelIndex&index)const{QComboBox*box=static_cast<QComboBox*>(editor);QStringstr=box->currentText();model->setData(index,str);}第34頁/共42頁8.4代理（Delegate）updateEditorGeometry()函數的具體代碼如下：voidComboDelegate::updateEditorGeometry(QWidget*editor,constQStyleOptionViewItem&option,constQModelIndex&/*index*/)const{editor->setGeometry(option.rect);}在“main.cpp”文件中添加以下內容：#include"combodelegate.h"在語句tableView.setModel(&model)的后面添加以下代碼：ComboDelegatecomboDelegate;tableView.setItemDelegateForColumn(2,&comboDelegate);第35頁/共42頁8.4代理（Delegate）此時運行程序，雙擊第1行第3列，顯示如圖8.10所示的下拉列表。第36頁/共42頁8.4代理（Delegate）下面使用QSpinBox控件實現對收入的輸入編輯，調用自定義的Delegate來實現。SpinDelegate類的實現與ComboDelegate類的實現類似，此處不再詳細講解。（1）頭文件“spindelegate.h”中的具體代碼如下：#include<QItemDelegate>classSpinDelegate:publicQItemDelegate{Q_OBJECTpublic:SpinDelegate(QObject*parent=0);QWidget*createEditor(QWidget*parent,constQStyleOptionViewItem&option,constQModelIndex&index)const;voidsetEditorData(QWidget*editor,constQModelIndex&index)const;voidsetModelData(QWidget*editor,QAbstractItemModel*model,constQModelIndex&index)const;voidupdateEditorGeometry(QWid