第8章-Qt-5模型-視圖結構-課件PPT

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

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

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

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

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

6、adertr(軍種)tr(種類)tr(武器); army12342431; weaponType13574862; weapontr(B-2)tr(尼米茲級)tr(阿帕奇)tr(黃蜂級) tr(阿利伯克級)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ù)（通常是圖標）Qt:EditRole在編輯器中編輯的數(shù)據(jù)Qt:ToolTipRole工具提示Qt:StatusTipRole狀態(tài)欄提示Qt:WhatsThisRoleWhats This文字Qt:Si

8、zeHintRole尺寸提示Qt:FontRole默認代理的繪制使用的字體Qt:TextAlignmentRole默認代理的對齊方式Qt:BackgroundRole默認代理的背景畫刷Qt:ForegroundRole默認代理的前景畫刷Qt:CheckStateRole默認代理的檢查框狀態(tài)Qt:UserRole用戶自定義的數(shù)據(jù)的起始位置2021/8/26108.2 8.2 模型（模型（ModelModel）headerData()函數(shù)返回固定的表頭數(shù)據(jù)，設置水平表頭的標題，具體代碼如下：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”中，將模型和視圖關聯(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）運行結果如圖8.3所示。2021/8/26128.3 8.3 視圖（視圖（ViewView）【例】（難度中等） 通過利用自定義的View，實現(xiàn)一個對TableModel的表格數(shù)據(jù)進行顯示的柱狀統(tǒng)計圖例子，以此介紹如

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

12、his); model-setHeaderData(0,Qt:Horizontal,tr(部門); 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ù)的具體實現(xiàn)代碼如下：void MainWindow:setupView() table = new QTableView;/新建一個QTableVi

13、ew對象 table-setModel(model);/為QTableView對象設置相同的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）此時，運行效果如圖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()完成打開標準文件對話框，具體代碼如下：void MainWindow:slotOpen() QString name; name = QFileDialog:getOpenFileName(this

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

17、狀統(tǒng)計圖的繪制。具體實現(xiàn)步驟如下。（1）自定義HistogramView類繼承自QAbstractItemView類，用于對表格數(shù)據(jù)進行柱狀圖顯示。下面是頭文件“histogramview.h”的具體代碼。（2）源文件“histogramview.cpp”的具體代碼。dataChanged()函數(shù)實現(xiàn)當Model中的數(shù)據(jù)更改時，調(diào)用繪圖設備的update()函數(shù)進行更新，反映數(shù)據(jù)的變化。具體實現(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）下面的工作就是完成對選擇項的更新。selectionChanged()函數(shù)中完成當數(shù)據(jù)項發(fā)生變

19、化時調(diào)用update()函數(shù)，重繪繪圖設備即可工作。此函數(shù)是將其他View中的操作引起的數(shù)據(jù)項選擇變化反映到自身View的顯示中。具體代碼如下：void HistogramView:selectionChanged(const QItemSelection &selected, const QItemSelection &deselected) viewport()-update();鼠標按下事件函數(shù)mousePressEvent()，在調(diào)用setSelection()函數(shù)時確定鼠標單擊點是否在某個數(shù)據(jù)項的區(qū)域內(nèi)，并設置選擇項。具體代碼如下：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ù)的功能，所以沒有實現(xiàn)具體內(nèi)容，但仍然要寫出函數(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）運行結果如圖8.4所示。2021/8/26258.4 8.4 代理（代理（DelegateDelegate）【例】（難度中等） 利用Delegate設計表格中控件如圖8.7所示。實例文件見光盤CH804。2021/8/26268.4 8.4 代理（代理（DelegateDelegate）具體實現(xiàn)步驟如下。（1）首先，加載表格數(shù)據(jù)，以便后面的操作。源文件“main.cpp”中的具體代碼如下：（2）選擇“構建”“構建項目DateDelegate”菜單項，首先按照如圖8.8所示的格式編輯本例所用的數(shù)據(jù)文件

27、“test.txt”，保存在項目D:QtCH8CH804 build- DateDelegate-Desktop_Qt_5_4_0_MinGW_32bit- Debug目錄下，然后運行程序，結果如圖8.7所示。2021/8/26278.4 8.4 代理（代理（DelegateDelegate）（3）在圖8.7中，使用手動的方式實現(xiàn)對生日的錄入編輯。下面使用日歷編輯框QDateTimeEdit 控件實現(xiàn)對生日的編輯，用自定義的Delegate來實現(xiàn)。（4）DateDelegate 繼承自QItemDelegate類。頭文件“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中對數(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ù)的具體實現(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ù)據(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在語句tableView.setModel(&model);后面添加如下代碼：DateDelegate dateDelegate;tableView.setItemDelegateFo

35、rColumn(1,&dateDelegate);（7）此時運行程序，雙擊第1行第2列，將顯示如圖8.9所示的日歷編輯框控件。2021/8/26328.4 8.4 代理（代理（DelegateDelegate）下面使用下拉列表框QComboBox控件實現(xiàn)對職業(yè)類型的輸入編輯，使用自定義的Delegate實現(xiàn)。（1）ComboDelegate繼承自QItemDelegate類。頭文件“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)建了一個QComboBox控件，并插入可顯示的條目，安裝事件過濾器。具體代碼如下：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在語句tableView.setModel(&model)的后面添加以下代碼：ComboDelegate comboDelegate;tableView.setItemDelegateForColumn(2,&comboDelegate);2021/8/26378.4 8.4 代理（代理（DelegateDelegate）此時運行程序，雙擊第1行第3列，顯示如圖8.10所示的下拉列表。2021/8/263

43、88.4 8.4 代理（代理（DelegateDelegate）下面使用QSpinBox控件實現(xiàn)對收入的輸入編輯，調(diào)用自定義的Delegate來實現(xiàn)。SpinDelegate類的實現(xiàn)與ComboDelegate類的實現(xiàn)類似，此處不再詳細講解。（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