第8章-Qt-5模型-視圖結(jié)構(gòu)-課件PPT

1、2021/8/261第8章 Qt 5 Qt 5模型/視圖結(jié)構(gòu)概述概述8.18.2模型（模型（Model）視圖（視圖（View）8.38.4代理（代理（Delegate）2021/8/262Qt的模型/視圖結(jié)構(gòu)分為三部分：模型（Model）、視圖（View）和代理（Delegate）。其中，模型與數(shù)據(jù)源通信，并為其他部件提供接口；而視圖從模型中獲得用來(lái)引用數(shù)據(jù)條目的模型索引（Model Index）。在視圖中，代理負(fù)責(zé)繪制數(shù)據(jù)條目，當(dāng)編輯條目時(shí)，代理和模型直接進(jìn)行通信。模型/視圖/代理之間通過(guò)信號(hào)和槽進(jìn)行通信，如圖8.1所示。2021/8/2638.1 8.1 概述概述8.1.1 基本概念基本概

2、念1模型（模型（Model）InterView框架中的所有模型都基于抽象基類(lèi)QAbstractItemModel類(lèi)，此類(lèi)由QProxyModel、QAbstractListModel、QAbstractTableModel、QAbstractProxyModel、QDirModel、QFileSystemModel、QHelpContentModel 和 QStandardItemModel類(lèi)繼承。其中，QAbstractListModel類(lèi)和QAbstractTableModel類(lèi)是列表和表格模型的抽象基類(lèi)，如果需要實(shí)現(xiàn)列表或表格模型，則應(yīng)從這兩個(gè)類(lèi)繼承。2021/8/2648.1.1 8.

3、1.1 基本概念基本概念2視圖（視圖（View）InterView框架中的所有視圖都基于抽象基類(lèi)QAbstractItemView類(lèi)，此類(lèi)由QColumnView、QHeaderView、QListView、QTableView和QTreeView類(lèi)繼承。其中，QListView類(lèi)由QUndoView類(lèi)和QListWidget類(lèi)繼承；QTableView類(lèi)由QTableWidget類(lèi)繼承；QTreeView類(lèi)由QTreeWidget類(lèi)繼承。而QListWidget類(lèi)、QTableWidget類(lèi)和QTreeWidget類(lèi)實(shí)際上已經(jīng)包含了數(shù)據(jù)，是模型/視圖集成在一起的類(lèi)。3代理（代理（Delega

4、te）InterView框架中的所有代理都基于抽象基類(lèi)QAbstractItemDelegate類(lèi)，此類(lèi)由QItemDelegate 和 QStyledItemDelegate類(lèi)繼承。其中，QItemDelegate類(lèi)由表示數(shù)據(jù)庫(kù)中關(guān)系代理的QSqlRelationalDelegate類(lèi)繼承。2021/8/2658.1.2 8.1.2 【實(shí)例】：模型【實(shí)例】：模型/ /視圖類(lèi)使用視圖類(lèi)使用【例】（簡(jiǎn)單） 實(shí)現(xiàn)一個(gè)簡(jiǎn)單的文件目錄瀏覽器，完成效果如圖8.2所示。實(shí)例文件見(jiàn)光盤(pán)CH801。創(chuàng)建工程“DirModeE”，其源文件“main.cpp”中的具體代碼。最后運(yùn)行結(jié)果如圖8.2所示。2

5、021/8/2668.2 8.2 模型（模型（ModelModel）【例】（難度一般） 通過(guò)實(shí)現(xiàn)將數(shù)值代碼轉(zhuǎn)換為文字的模型來(lái)介紹如何使用自定義模型。此模型中保存了不同軍種的各種武器，實(shí)現(xiàn)效果如圖8.3所示。實(shí)例文件見(jiàn)光盤(pán)CH802。2021/8/2678.2 8.2 模型（模型（ModelModel）具體操作步驟如下。（1）ModelEx類(lèi)繼承自QAbstractTableModel類(lèi)，頭文件“modelex.h”中的具體代碼。（2）源文件“modelex.cpp”中的具體代碼。populateModel()函數(shù)的具體實(shí)現(xiàn)代碼如下：void ModelEx:populateModel() he

6、adertr(軍種)tr(種類(lèi))tr(武器); army12342431; weaponType13574862; weapontr(B-2)tr(尼米茲級(jí))tr(阿帕奇)tr(黃蜂級(jí)) tr(阿利伯克級(jí))tr(AAAV)tr(M1A1)tr(F-22);2021/8/2688.2 8.2 模型（模型（ModelModel）columnCount()函數(shù)中，模型的列固定為“3”，所以直接返回“3”。int ModelEx:columnCount(const QModelIndex &parent) const return 3; rowCount()函數(shù)返回模型的行數(shù)。int Mode

7、lEx:rowCount(const QModelIndex &parent) const return army.size();data()函數(shù)返回指定索引的數(shù)據(jù)，即將數(shù)值映射為文字。2021/8/2698.2 8.2 模型（模型（ModelModel）表8.1列出了Item主要的角色及其描述。常 量描 述Qt:DisplayRole顯示文字Qt:DecorationRole繪制裝飾數(shù)據(jù)（通常是圖標(biāo)）Qt:EditRole在編輯器中編輯的數(shù)據(jù)Qt:ToolTipRole工具提示Qt:StatusTipRole狀態(tài)欄提示Qt:WhatsThisRoleWhats This文字Qt:Si

8、zeHintRole尺寸提示Qt:FontRole默認(rèn)代理的繪制使用的字體Qt:TextAlignmentRole默認(rèn)代理的對(duì)齊方式Qt:BackgroundRole默認(rèn)代理的背景畫(huà)刷Qt:ForegroundRole默認(rèn)代理的前景畫(huà)刷Qt:CheckStateRole默認(rèn)代理的檢查框狀態(tài)Qt:UserRole用戶(hù)自定義的數(shù)據(jù)的起始位置2021/8/26108.2 8.2 模型（模型（ModelModel）headerData()函數(shù)返回固定的表頭數(shù)據(jù)，設(shè)置水平表頭的標(biāo)題，具體代碼如下：QVariant ModelEx:headerData(int section, Qt:Orientatio

9、n orientation, int role) const if(role=Qt:DisplayRole&orientation=Qt:Horizontal) return headersection; return QAbstractTableModel:headerData(section,orientation,role);2021/8/26118.2 8.2 模型（模型（ModelModel）（3）在源文件“main.cpp”中，將模型和視圖關(guān)聯(lián)，具體代碼如下：#include #include modelex.h#include int main(int argc,char

10、 *argv) QApplication a(argc,argv); ModelEx modelEx; QTableView view; view.setModel(&modelEx); view.setWindowTitle(QObject:tr(modelEx); view.resize(400,400); view.show(); return a.exec();（4）運(yùn)行結(jié)果如圖8.3所示。2021/8/26128.3 8.3 視圖（視圖（ViewView）【例】（難度中等） 通過(guò)利用自定義的View，實(shí)現(xiàn)一個(gè)對(duì)TableModel的表格數(shù)據(jù)進(jìn)行顯示的柱狀統(tǒng)計(jì)圖例子，以此介紹如

11、何應(yīng)用自定義的View。實(shí)現(xiàn)效果如圖8.4所示。實(shí)例文件見(jiàn)光盤(pán)CH803。2021/8/26138.3 8.3 視圖（視圖（ViewView）具體實(shí)現(xiàn)步驟如下。（1）完成主窗體，以便顯示View的內(nèi)容。MainWindow 類(lèi)繼承自QMainWindow類(lèi)，作為主窗體。以下是頭文件“mainwindow.h”的具體代碼。（2）下面是源文件“mainwindow.cpp”中的具體代碼。setupModel()函數(shù)新建一個(gè)Model，并設(shè)置表頭數(shù)據(jù)，其具體實(shí)現(xiàn)代碼如下：void MainWindow:setupModel() model = new QStandardItemModel(4,4,t

12、his); model-setHeaderData(0,Qt:Horizontal,tr(部門(mén)); model-setHeaderData(1,Qt:Horizontal,tr(男); model-setHeaderData(2,Qt:Horizontal,tr(女); model-setHeaderData(3,Qt:Horizontal,tr(退休);2021/8/26148.3 8.3 視圖（視圖（ViewView）setupView()函數(shù)的具體實(shí)現(xiàn)代碼如下：void MainWindow:setupView() table = new QTableView;/新建一個(gè)QTableVi

13、ew對(duì)象 table-setModel(model);/為QTableView對(duì)象設(shè)置相同的Model QItemSelectionModel *selectionModel=new QItemSelectionModel(model);/(a) table-setSelectionModel(selectionModel); connect(selectionModel,SIGNAL(selectionChanged(QItemSelection, ItemSelection),table,SLOT(selectionChanged(QItemSelection,QItemSelec-tio

14、n);/(b) splitter = new QSplitter; splitter-setOrientation(Qt:Vertical); splitter-addWidget(table); setCentralWidget(splitter);2021/8/26158.3 8.3 視圖（視圖（ViewView）（3）此時(shí)，運(yùn)行效果如圖8.5所示。2021/8/26168.3 8.3 視圖（視圖（ViewView）（1）在頭文件“mainwindow.h”中添加代碼如下：public: void openFile(QString);public slots: void slotOpen(

15、);（2）在源文件mainwindow.cpp中添加代碼如下：#include #include #include #include 其中，其中，在createAction()函數(shù)中添加代碼如下：connect(openAct,SIGNAL(triggered(),this,SLOT(slotOpen();2021/8/26178.3 8.3 視圖（視圖（ViewView）槽函數(shù)slotOpen()完成打開(kāi)標(biāo)準(zhǔn)文件對(duì)話(huà)框，具體代碼如下：void MainWindow:slotOpen() QString name; name = QFileDialog:getOpenFileName(this

16、,打開(kāi),.,histogram files (*.txt); if (!name.isEmpty() openFile(name);openFile()函數(shù)完成打開(kāi)所選的文件內(nèi)容，其具體實(shí)現(xiàn)代碼。2021/8/26188.3 8.3 視圖（視圖（ViewView）新建一個(gè)文本文件，命名為“histogram.txt”，保存在項(xiàng)目D:QtCH8CH803 build-ViewEx-Desktop_Qt_5_4_0_MinGW_32bit-Debug目錄下，文件內(nèi)容及打開(kāi)后的效果如圖8.6所示。2021/8/26198.3 8.3 視圖（視圖（ViewView）以上完成了表格數(shù)據(jù)的加載，下面介紹柱

17、狀統(tǒng)計(jì)圖的繪制。具體實(shí)現(xiàn)步驟如下。（1）自定義HistogramView類(lèi)繼承自QAbstractItemView類(lèi)，用于對(duì)表格數(shù)據(jù)進(jìn)行柱狀圖顯示。下面是頭文件“histogramview.h”的具體代碼。（2）源文件“histogramview.cpp”的具體代碼。dataChanged()函數(shù)實(shí)現(xiàn)當(dāng)Model中的數(shù)據(jù)更改時(shí)，調(diào)用繪圖設(shè)備的update()函數(shù)進(jìn)行更新，反映數(shù)據(jù)的變化。具體實(shí)現(xiàn)代碼。void HistogramView:dataChanged(const QModelIndex &topLeft, const QModelIndex &bottomRight)

18、 QAbstractItemView:dataChanged(topLeft,bottomRight); viewport()-update();setSelectionModel()函數(shù)為selections賦初值，具體代碼如下：void HistogramView:setSelectionModel(QItemSelectionModel *selectionModel) selections=selectionModel;2021/8/26208.3 8.3 視圖（視圖（ViewView）（3）下面的工作就是完成對(duì)選擇項(xiàng)的更新。selectionChanged()函數(shù)中完成當(dāng)數(shù)據(jù)項(xiàng)發(fā)生變

19、化時(shí)調(diào)用update()函數(shù)，重繪繪圖設(shè)備即可工作。此函數(shù)是將其他View中的操作引起的數(shù)據(jù)項(xiàng)選擇變化反映到自身View的顯示中。具體代碼如下：void HistogramView:selectionChanged(const QItemSelection &selected, const QItemSelection &deselected) viewport()-update();鼠標(biāo)按下事件函數(shù)mousePressEvent()，在調(diào)用setSelection()函數(shù)時(shí)確定鼠標(biāo)單擊點(diǎn)是否在某個(gè)數(shù)據(jù)項(xiàng)的區(qū)域內(nèi)，并設(shè)置選擇項(xiàng)。具體代碼如下：void HistogramView

20、:mousePressEvent(QMouseEvent *event) QAbstractItemView:mousePressEvent(event); setSelection(QRect(event-pos().x(),event-pos().y(),1,1),QItemSelec tionModel:SelectCurrent);2021/8/26218.3 8.3 視圖（視圖（ViewView）setSelection()函數(shù)的具體代碼如下：void HistogramView:setSelection(const QRect &rect,QItemSelectionMod

21、el:SelectionFlags flags) int rows = model()-rowCount(rootIndex();/獲取總行數(shù) int columns = model()-columnCount(rootIndex(); /獲取總列數(shù) QModelIndex selectedIndex;/(a) for (int row=0; rowrows; +row)/(b) for (int column=1; columnindex(row,column,rootIndex(); QRegion region=itemRegion(index);/(c) if (!

22、ersected(rect).isEmpty() selectedIndex = index; if(selectedIndex.isValid()/(d) selections-select(selectedIndex,flags); else QModelIndex noIndex; selections-select(noIndex,flags); 2021/8/26228.3 8.3 視圖（視圖（ViewView）indexAt()函數(shù)的具體內(nèi)容。由于本例未用到以下函數(shù)的功能，所以沒(méi)有實(shí)現(xiàn)具體內(nèi)容，但仍然要寫(xiě)出函數(shù)體的框架，代碼如下：QRect HistogramView:visual

23、Rect(const QModelIndex &index)constvoid HistogramView:scrollTo(const QModelIndex &index,ScrollHint)QModelIndex HistogramView:moveCursor(QAbstractItemView:CursorAction cursor Action, Qt:KeyboardModifiers modifiers)int HistogramView:horizontalOffset()constint HistogramView:verticalOffset()cons

24、tbool HistogramView:isIndexHidden(const QModelIndex &index)constQRegion HistogramView:visualRegionForSelection(const QItemSelection & selection)const2021/8/26238.3 8.3 視圖（視圖（ViewView）itemRegion()函數(shù)的具體代碼如下：QRegion HistogramView:itemRegion(QModelIndex index) QRegion region; if (index.column()

25、= 1)/男 region = MRegionListindex.row(); if (index.column() = 2)/女 region = FRegionListindex.row(); if (index.column() = 3)/退休 region = SRegionListindex.row(); return region;2021/8/26248.3 8.3 視圖（視圖（ViewView）（4）在頭文件“mainwindow.h”中添加代碼如下：#include histogramview.hprivate: HistogramView *histogram;（5）在源文

26、件“mainwindow.cpp”中添加代碼，其中，setupView()函數(shù)的代碼修改。（6）運(yùn)行結(jié)果如圖8.4所示。2021/8/26258.4 8.4 代理（代理（DelegateDelegate）【例】（難度中等） 利用Delegate設(shè)計(jì)表格中控件如圖8.7所示。實(shí)例文件見(jiàn)光盤(pán)CH804。2021/8/26268.4 8.4 代理（代理（DelegateDelegate）具體實(shí)現(xiàn)步驟如下。（1）首先，加載表格數(shù)據(jù)，以便后面的操作。源文件“main.cpp”中的具體代碼如下：（2）選擇“構(gòu)建”“構(gòu)建項(xiàng)目DateDelegate”菜單項(xiàng)，首先按照如圖8.8所示的格式編輯本例所用的數(shù)據(jù)文件

27、“test.txt”，保存在項(xiàng)目D:QtCH8CH804 build- DateDelegate-Desktop_Qt_5_4_0_MinGW_32bit- Debug目錄下，然后運(yùn)行程序，結(jié)果如圖8.7所示。2021/8/26278.4 8.4 代理（代理（DelegateDelegate）（3）在圖8.7中，使用手動(dòng)的方式實(shí)現(xiàn)對(duì)生日的錄入編輯。下面使用日歷編輯框QDateTimeEdit 控件實(shí)現(xiàn)對(duì)生日的編輯，用自定義的Delegate來(lái)實(shí)現(xiàn)。（4）DateDelegate 繼承自QItemDelegate類(lèi)。頭文件“datedelegate.h”中的具體代碼如下：#include cla

28、ss DateDelegate : public QItemDelegate Q_OBJECTpublic: DateDelegate(QObject *parent = 0); QWidget *createEditor(QWidget *parent, const QStyleOptionViewItem & option, const QModelIndex &index) const;/(a) void setEditorData(QWidget *editor, const QModelIndex &index) const;/(b) void setMode

29、lData(QWidget *editor, QAbstractItemModel *model, const QModelIndex &index) const;/將Delegate中對(duì)數(shù)據(jù)的改變更新至Model中 void updateEditorGeometry(QWidget *editor, const QStyleOptionViewItem & option, const QModelIndex &index) const;/更新控件區(qū)的顯示;2021/8/26288.4 8.4 代理（代理（DelegateDelegate）（5）源文件“datedele

30、gate.cpp”中的具體代碼如下：#include datedelegate.h#include DateDelegate:DateDelegate(QObject *parent) : QItemDelegate(parent)createEditor()函數(shù)的具體實(shí)現(xiàn)代碼如下：QWidget *DateDelegate:createEditor(QWidget *parent,const QStyleOption ViewItem &/*option*/,const QModelIndex &/*index*/) const QDateTimeEdit *editor =

31、 new QDateTimeEdit(parent);/(a) editor-setDisplayFormat(yyyy-MM-dd);/(b) editor-setCalendarPopup(true);/(c) editor-installEventFilter(const_cast(this);/(d) return editor;2021/8/26298.4 8.4 代理（代理（DelegateDelegate）setEditorData()函數(shù)的具體代碼如下：void DateDelegate:setEditorData(QWidget *editor, const QModelIn

32、dex &index) const QString dateStr= index.model()-data(index).toString();/(a) QDate date = QDate:fromString(dateStr,Qt:ISODate);/(b) QDateTimeEdit *edit=static_cast(editor);/(c) edit-setDate(date);/設(shè)置控件的顯示數(shù)據(jù)2021/8/26308.4 8.4 代理（代理（DelegateDelegate）setModelData()函數(shù)的具體代碼如下：void DateDelegate:setMod

33、elData(QWidget *editor,QAbstractItemModel *model, const QModelIndex &index) const QDateTimeEdit *edit=static_cast(editor);/(a) QDate date = edit-date();/(b) model-setData(index,QVariant(date.toString(Qt:ISODate);/(c)updateEditorGeometry()函數(shù)的具體代碼如下：void DateDelegate:updateEditorGeometry(QWidget *

34、editor,const QStyle OptionViewItem &option,const QModelIndex &index) const editor-setGeometry(option.rect);2021/8/26318.4 8.4 代理（代理（DelegateDelegate）（6）在“main.cpp”文件中添加如下代碼：#include datedelegate.h在語(yǔ)句tableView.setModel(&model);后面添加如下代碼：DateDelegate dateDelegate;tableView.setItemDelegateFo

35、rColumn(1,&dateDelegate);（7）此時(shí)運(yùn)行程序，雙擊第1行第2列，將顯示如圖8.9所示的日歷編輯框控件。2021/8/26328.4 8.4 代理（代理（DelegateDelegate）下面使用下拉列表框QComboBox控件實(shí)現(xiàn)對(duì)職業(yè)類(lèi)型的輸入編輯，使用自定義的Delegate實(shí)現(xiàn)。（1）ComboDelegate繼承自QItemDelegate類(lèi)。頭文件“combodelegate.h”中的具體代碼如下：#include class ComboDelegate : public QItemDelegate Q_OBJECTpublic: ComboDeleg

36、ate(QObject *parent = 0); QWidget *createEditor(QWidget *parent, const QStyleOptionViewItem &option, const QModelIndex&index) const; void setEditorData(QWidget *editor, const QModelIndex &index) const; void setModelData(QWidget *editor, QAbstractItemModel *model, const QModelIndex &i

37、ndex) const; void updateEditorGeometry(QWidget *editor, const QStyleOptionViewItem &option, const QModelIndex &index) const;2021/8/26338.4 8.4 代理（代理（DelegateDelegate）（2）源文件“combodelegate.cpp”中的具體代碼如下：#include combodelegate.h#include ComboDelegate:ComboDelegate(QObject *parent) : QItemDelegat

38、e(parent)2021/8/26348.4 8.4 代理（代理（DelegateDelegate）createEditor()函數(shù)中創(chuàng)建了一個(gè)QComboBox控件，并插入可顯示的條目，安裝事件過(guò)濾器。具體代碼如下：QWidget *ComboDelegate:createEditor(QWidget *parent,const QStyleOption ViewItem &/*option*/,const QModelIndex &/*index*/) const QComboBox *editor = new QComboBox(parent); editor-addI

39、tem(工人); editor-addItem(農(nóng)民); editor-addItem(醫(yī)生); editor-addItem(律師); editor-addItem(軍人); editor-installEventFilter(const_cast(this); return editor;2021/8/26358.4 8.4 代理（代理（DelegateDelegate）setEditorData()函數(shù)中更新了Delegate控件中的數(shù)據(jù)顯示，具體代碼如下：void ComboDelegate:setEditorData(QWidget *editor,const QModelIndex

40、 &index) const QString str =index.model()-data(index).toString(); QComboBox *box = static_cast(editor); int i=box-findText(str); box-setCurrentIndex(i);setModelData()函數(shù)中更新了Model中的數(shù)據(jù)，具體代碼如下：void ComboDelegate:setModelData(QWidget *editor, QAbstractItemModel *model, const QModelIndex &index) c

41、onst QComboBox *box = static_cast(editor); QString str = box-currentText(); model-setData(index,str);2021/8/26368.4 8.4 代理（代理（DelegateDelegate）updateEditorGeometry()函數(shù)的具體代碼如下：void ComboDelegate:updateEditorGeometry(QWidget *editor,const QStyleOptionViewItem &option, const QModelIndex &/*inde

42、x*/) const editor-setGeometry(option.rect);在“main.cpp”文件中添加以下內(nèi)容：#include combodelegate.h在語(yǔ)句tableView.setModel(&model)的后面添加以下代碼：ComboDelegate comboDelegate;tableView.setItemDelegateForColumn(2,&comboDelegate);2021/8/26378.4 8.4 代理（代理（DelegateDelegate）此時(shí)運(yùn)行程序，雙擊第1行第3列，顯示如圖8.10所示的下拉列表。2021/8/263

43、88.4 8.4 代理（代理（DelegateDelegate）下面使用QSpinBox控件實(shí)現(xiàn)對(duì)收入的輸入編輯，調(diào)用自定義的Delegate來(lái)實(shí)現(xiàn)。SpinDelegate類(lèi)的實(shí)現(xiàn)與ComboDelegate類(lèi)的實(shí)現(xiàn)類(lèi)似，此處不再詳細(xì)講解。（1）頭文件“spindelegate.h”中的具體代碼如下：#include class SpinDelegate : public QItemDelegate Q_OBJECTpublic: SpinDelegate(QObject *parent = 0); QWidget *createEditor(QWidget *parent, const Q

44、StyleOptionViewItem &option, const QModelIndex &index) const; void setEditorData(QWidget *editor, const QModelIndex &index) const; void setModelData(QWidget *editor, QAbstractItemModel *model, const QModelIndex &index) const; void updateEditorGeometry(QWidget *editor, const QStyleOptionViewItem &option, const QModelIndex &a