第8章-Qt-5模型视图结构教学课件.ppt

1、第第8章章 Qt 5模型视图结构模型视图结构第一页，共43页。第8 章 Q t 5 模型视图结构第8 章 Q t 5 模型视图结构第8Qt的模型/视图结构分为三部分：模型（Model）、视图（View）和代理（Delegate）。其中，模型与数据源通信，并为其他部件提供接口；而视图从模型中获得用来引用数据条目的模型索引（Model Index）。在视图中，代理负责绘制数据条目，当编辑条目时，代理和模型直接进行通信。模型/视图/代理之间通过信号和槽进行通信，如图8.1所示。第二页，共43页。Q t 的模型/视图结构分为三部分：模型（Mo d e l）、视图（V8.1 8.1 概述概述8.1.1

2、基本概念基本概念1模型（模型（Model）InterView框架中的所有模型都基于抽象基类QAbstractItemModel类，此类由QProxyModel、QAbstractListModel、QAbstractTableModel、QAbstractProxyModel、QDirModel、Q、QHelpContentModel和QStandardItemModel类继承。其中，QAbstractListModel类和QAbstractTableModel类是列表和表格模型的抽象基类，如果需要实现列表或表格模型，则应从这两个类继承。第三页，共43页。8.1 概述8.1.1 基本概念第三页

3、，共4 3 页。8.1.1 8.1.1 基本概念基本概念2视图（视图（View）InterView框架中的所有视图都基于抽象基类QAbstractItemView类，此类由QColumnView、QHeaderView、QListView、QTableView和QTreeView类继承。其中，QListView类由QUndoView类和QListWidget类继承；QTableView类由QTableWidget类继承；QTreeView类由QTreeWidget类继承。而QListWidget类、QTableWidget类和QTreeWidget类实际上已经包含了数据，是模型/视图集成在一起

4、的类。3代理（代理（Delegate）InterView框架中的所有代理都基于抽象基类QAbstractItemDelegate类，此类由QItemDelegate和QStyledItemDelegate类继承。其中，QItemDelegate类由表示数据库中关系代理的QSqlRelationalDelegate类继承。第四页，共43页。8.1.1 基本概念2 视图（V i e w）第四页，共4 3 页。8.1.2 8.1.2 【实例】：模型【实例】：模型/视图类使用视图类使用【例】（简单）实现一个简单的文件目录浏览器，完成效果如图8.2所示。实例文件见光盘CH801。创建工程“DirMode

5、Ex.pro”，其源文件“main.cpp”中的具体代码。最后运行结果如图8.2所示。第五页，共43页。8.1.2 【实例】：模型/视图类使用【例】（简单）实现8.2 8.2 模型（模型（ModelModel）【例】（难度一般）通过实现将数值代码转换为文字的模型来介绍如何使用自定义模型。此模型中保存了不同军种的各种武器，实现效果如图8.3所示。实例文件见光盘CH802。第六页，共43页。8.2 模型（Mo d e l）【例】（难度一般）通过实现将数8.2 8.2 模型（模型（ModelModel）具体操作步骤如下。（1）ModelEx类继承自QAbstractTableModel类，头文件“m

6、odelex.h”中的具体代码。（2）源文件“modelex.cpp”中的具体代码。populateModel()函数的具体实现代码如下：void ModelEx:populateModel()headertr(军种)tr(种类)tr(武器);army12342431;weaponType13574862;weapontr(B-2)tr(尼米兹级)tr(阿帕奇)tr(黄蜂级)tr(阿利伯克级)tr(AAAV)tr(M1A1)tr(F-22);第七页，共43页。8.2 模型（Mo d e l）具体操作步骤如下。第七页，共4 38.2 8.2 模型（模型（ModelModel）columnCoun

7、t()函数中，模型的列固定为“3”，所以直接返回“3”。intModelEx:columnCount(constQModelIndex&parent)constreturn3;rowCount()函数返回模型的行数。intModelEx:rowCount(constQModelIndex&parent)constreturnarmy.size();data()函数返回指定索引的数据，即将数值映射为文字。第八页，共43页。8.2 模型（Mo d e l）c o l u mn C o u n t()函数中8.2 8.2 模型（模型（ModelModel）表8.1列出了Item主要的角色及其描述。常

8、 量描 述Qt:DisplayRole显示文字Qt:DecorationRole绘制装饰数据（通常是图标）Qt:EditRole在编辑器中编辑的数据Qt:ToolTipRole工具提示Qt:StatusTipRole状态栏提示Qt:WhatsThisRoleWhats This文字Qt:SizeHintRole尺寸提示Qt:FontRole默认代理的绘制使用的字体Qt:TextAlignmentRole默认代理的对齐方式Qt:BackgroundRole默认代理的背景画刷Qt:ForegroundRole默认代理的前景画刷Qt:CheckStateRole默认代理的检查框状态Qt:UserRo

9、le用户自定义的数据的起始位置第九页，共43页。8.2 模型（Mo d e l）表8.1 列出了I t e m主要的角色8.2 8.2 模型（模型（ModelModel）headerData()函数返回固定的表头数据，设置水平表头的标题，具体代码如下：QVariant ModelEx:headerData(int section,Qt:Orientation orientation,int role)const if(role=Qt:DisplayRole&orientation=Qt:Horizontal)return headersection;return QAbstractTableM

10、odel:headerData(section,orientation,role);第十页，共43页。8.2 模型（Mo d e l）h e a d e r D a t a()函数返回8.2 8.2 模型（模型（ModelModel）（3）在源文件“main.cpp”中，将模型和视图关联，具体代码如下：#include#includemodelex.h#includeintmain(intargc,char*argv)QApplicationa(argc,argv);ModelExmodelEx;QTableViewview;view.setModel(&modelEx);view.setWi

11、ndowTitle(QObject:tr(modelEx);view.resize(400,400);view.show();returna.exec();（4）运行结果如图8.3所示。第十一页，共43页。8.2 模型（Mo d e l）（3）在源文件“ma i n.c p p8.3 8.3 视图（视图（ViewView）【例】（难度中等）通过利用自定义的View，实现一个对TableModel的表格数据进行显示的柱状统计图例子，以此介绍如何应用自定义的View。实现效果如图8.4所示。实例文件见光盘CH803。第十二页，共43页。8.3 视图（V i e w）【例】（难度中等）通过利用自定义

12、8.3 8.3 视图（视图（ViewView）具体实现步骤如下。（1）完成主窗体，以便显示View的内容。MainWindow 类继承自QMainWindow类，作为主窗体。以下是头文件“mainwindow.h”的具体代码。（2）下面是源文件“mainwindow.cpp”中的具体代码。setupModel()函数新建一个Model，并设置表头数据，其具体实现代码如下：void MainWindow:setupModel()model=new QStandardItemModel(4,4,this);model-setHeaderData(0,Qt:Horizontal,tr(部门);mod

13、el-setHeaderData(1,Qt:Horizontal,tr(男);model-setHeaderData(2,Qt:Horizontal,tr(女);model-setHeaderData(3,Qt:Horizontal,tr(退休);第十三页，共43页。8.3 视图（V i e w）具体实现步骤如下。第十三页，共4 38.3 8.3 视图（视图（ViewView）setupView()函数的具体实现代码如下：voidMainWindow:setupView()table=newQTableView;/新建一个QTableView对象table-setModel(model);/为

14、QTableView对象设置相同的ModelQItemSelectionModel*selectionModel=newQItemSelectionModel(model);/(a)table-setSelectionModel(selectionModel);connect(selectionModel,SIGNAL(selectionChanged(QItemSelection,ItemSelection),table,SLOT(selectionChanged(QItemSelection,QItemSelec-tion);/(b)splitter=newQSplitter;splitt

15、er-setOrientation(Qt:Vertical);splitter-addWidget(table);setCentralWidget(splitter);第十四页，共43页。8.3 视图（V i e w）s e t u p V i e w()函数的具体实8.3 8.3 视图（视图（ViewView）（3）此时，运行效果如图8.5所示。第十五页，共43页。8.3 视图（V i e w）（3）此时，运行效果如图8.5 所示8.3 8.3 视图（视图（ViewView）（1）在头文件“mainwindow.h”中添加代码如下：public:voidopen);publicslots:v

16、oidslotOpen();（2）在源文件mainwindow.cpp中添加代码如下：#include#include#include#include其中，其中，在createAction()函数中添加代码如下：connect(openAct,SIGNAL(triggered(),this,SLOT(slotOpen();第十六页，共43页。8.3 视图（V i e w）（1）在头文件“ma i n w i n d o8.3 8.3 视图（视图（ViewView）槽函数slotOpen()完成打开标准文件对话框，具体代码如下：voidMainWindow:slotOpen()QStringna

17、me;name=Q(this,打开,.,histogramfiles(*.txt);if(!name.isEmpty()open);openFile()函数完成打开所选的文件内容，其具体实现代码。第十七页，共43页。8.3 视图（V i e w）槽函数s l o t O p e n()完成打开8.3 8.3 视图（视图（ViewView）新建一个文本文件，命名为“histogram.txt”，保存在项目D:QtCH8CH803 build-ViewEx-Desktop_Qt_5_4_0_MinGW_32bit-Debug目录下，文件内容及打开后的效果如图8.6所示。第十八页，共43页。8.3

18、视图（V i e w）新建一个文本文件，命名为“h i s t8.3 8.3 视图（视图（ViewView）以上完成了表格数据的加载，下面介绍柱状统计图的绘制。具体实现步骤如下。（1）自定义HistogramView类继承自QAbstractItemView类，用于对表格数据进行柱状图显示。下面是头文件“histogramview.h”的具体代码。（2）源文件“histogramview.cpp”的具体代码。dataChanged()函数实现当Model中的数据更改时，调用绘图设备的update()函数进行更新，反映数据的变化。具体实现代码。voidHistogramView:dataChan

19、ged(constQModelIndex&topLeft,constQModelIndex&bottomRight)QAbstractItemView:dataChanged(topLeft,bottomRight);viewport()-update();setSelectionModel()函数为selections赋初值，具体代码如下：voidHistogramView:setSelectionModel(QItemSelectionModel*selectionModel)selections=selectionModel;第十九页，共43页。8.3 视图（V i e w）以上完成了表

20、格数据的加载，下面介绍8.3 8.3 视图（视图（ViewView）（3）下面的工作就是完成对选择项的更新。selectionChanged()函数中完成当数据项发生变化时调用update()函数，重绘绘图设备即可工作。此函数是将其他View中的操作引起的数据项选择变化反映到自身View的显示中。具体代码如下：void HistogramView:selectionChanged(const QItemSelection&selected,const QItemSelection&deselected)viewport()-update();鼠标按下事件函数mousePressEvent()，

21、在调用setSelection()函数时确定鼠标单击点是否在某个数据项的区域内，并设置选择项。具体代码如下：void HistogramView:mousePressEvent(QMouseEvent*event)QAbstractItemView:mousePressEvent(event);setSelection(QRect(event-pos().x(),event-pos().y(),1,1),QItemSelec tionModel:SelectCurrent);第二十页，共43页。8.3 视图（V i e w）（3）下面的工作就是完成对选择项的8.3 8.3 视图（视图（View

22、View）setSelection()函数的具体代码如下：voidHistogramView:setSelection(constQRect&rect,QItemSelectionModel:SelectionFlagsflags)introws=model()-rowCount(rootIndex();/获取总行数intcolumns=model()-columnCount(rootIndex();/获取总列数QModelIndexselectedIndex;/(a)for(introw=0;rowrows;+row)/(b)for(intcolumn=1;columnindex(row,c

23、olumn,rootIndex();QRegionregion=itemRegion(index);/(c)if(!region.intersected(rect).isEmpty()selectedIndex=index;if(selectedIndex.isValid()/(d)selections-select(selectedIndex,flags);elseQModelIndexnoIndex;selections-select(noIndex,flags);第二十一页，共43页。8.3 视图（V i e w）s e t S e l e c t i o n()函数的8.3 8.3 视

24、图（视图（ViewView）indexAt()函数的具体内容。由于本例未用到以下函数的功能，所以没有实现具体内容，但仍然要写出函数体的框架，代码如下：QRect HistogramView:visualRect(const QModelIndex&index)constvoid HistogramView:scrollTo(const QModelIndex&index,ScrollHint)QModelIndex HistogramView:moveCursor(QAbstractItemView:CursorAction cursor Action,Qt:KeyboardModifiers

25、 modifiers)int HistogramView:horizontalOffset()constint HistogramView:verticalOffset()constbool HistogramView:isIndexHidden(const QModelIndex&index)constQRegion HistogramView:visualRegionForSelection(const QItemSelection&selection)const第二十二页，共43页。8.3 视图（V i e w）i n d e x A t()函数的具体内容。8.3 8.3 视图（视图（V

26、iewView）itemRegion()函数的具体代码如下：QRegion HistogramView:itemRegion(QModelIndex index)QRegion region;if(index.column()=1)/男 region=MRegionListindex.row();if(index.column()=2)/女 region=FRegionListindex.row();if(index.column()=3)/退休 region=SRegionListindex.row();return region;第二十三页，共43页。8.3 视图（V i e w）i t

27、e mR e g i o n()函数的具体8.3 8.3 视图（视图（ViewView）（4）在头文件“mainwindow.h”中添加代码如下：#includehistogramview.hprivate:HistogramView*histogram;（5）在源文件“mainwindow.cpp”中添加代码，其中，setupView()函数的代码修改。（6）运行结果如图8.4所示。第二十四页，共43页。8.3 视图（V i e w）（4）在头文件“ma i n w i n d o8.4 8.4 代理（代理（DelegateDelegate）【例】（难度中等）利用Delegate设计表格中控

28、件如图8.7所示。实例文件见光盘CH804。第二十五页，共43页。8.4 代理（D e l e g a t e）【例】（难度中等）利用D8.4 8.4 代理（代理（DelegateDelegate）具体实现步骤如下。（1）首先，加载表格数据，以便后面的操作。源文件“main.cpp”中的具体代码如下：（2）选择“构建”“构建项目DateDelegate”菜单项，首先按照如图8.8所示的格式编辑本例所用的数据文件“test.txt”，保存在项目D:QtCH8CH804 build-DateDelegate-Desktop_Qt_5_4_0_MinGW_32bit-Debug目录下，然后运行程序，

29、结果如图8.7所示。第二十六页，共43页。8.4 代理（D e l e g a t e）具体实现步骤如下。第二十六8.4 8.4 代理（代理（DelegateDelegate）（3）在图8.7中，使用手动的方式实现对生日的录入编辑。下面使用日历编辑框QDateTimeEdit控件实现对生日的编辑，用自定义的Delegate来实现。（4）DateDelegate继承自QItemDelegate类。头文件“datedelegate.h”中的具体代码如下：#includeclassDateDelegate:publicQItemDelegateQ_OBJECTpublic:DateDelegate(

30、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中vo

31、idupdateEditorGeometry(QWidget*editor,constQStyleOptionViewItem&option,constQModelIndex&index)const;/更新控件区的显示;第二十七页，共43页。8.4 代理（D e l e g a t e）（3）在图8.7 中，使用手8.4 8.4 代理（代理（DelegateDelegate）（5）源文件“datedelegate.cpp”中的具体代码如下：#includedatedelegate.h#includeDateDelegate:DateDelegate(QObject*parent):QItemD

32、elegate(parent)createEditor()函数的具体实现代码如下：QWidget*DateDelegate:createEditor(QWidget*parent,constQStyleOptionViewItem&/*option*/,constQModelIndex&/*index*/)constQDateTimeEdit*editor=newQDateTimeEdit(parent);/(a)editor-setDisplayFormat(yyyy-MM-dd);/(b)editor-setCalendarPopup(true);/(c)editor-installEve

33、ntFilter(const_cast(this);/(d)returneditor;第二十八页，共43页。8.4 代理（D e l e g a t e）（5）源文件“d a t e d e8.4 8.4 代理（代理（DelegateDelegate）setEditorData()函数的具体代码如下：void DateDelegate:setEditorData(QWidget*editor,const QModelIndex&index)const QString dateStr=index.model()-data(index).toString();/(a)QDate date=QDat

34、e:fromString(dateStr,Qt:ISODate);/(b)QDateTimeEdit*edit=static_cast(editor);/(c)edit-setDate(date);/设置控件的显示数据第二十九页，共43页。8.4 代理（D e l e g a t e）s e t E d i t o r D a t a8.4 8.4 代理（代理（DelegateDelegate）setModelData()函数的具体代码如下：void DateDelegate:setModelData(QWidget*editor,QAbstractItemModel*model,const

35、QModelIndex&index)const QDateTimeEdit*edit=static_cast(editor);/(a)QDate date=edit-date();/(b)model-setData(index,QVariant(date.toString(Qt:ISODate);/(c)updateEditorGeometry()函数的具体代码如下：void DateDelegate:updateEditorGeometry(QWidget*editor,const QStyle OptionViewItem&option,const QModelIndex&index)co

36、nst editor-setGeometry(option.rect);第三十页，共43页。8.4 代理（D e l e g a t e）s e t Mo d e l D a t a(8.4 8.4 代理（代理（DelegateDelegate）（6）在“main.cpp”文件中添加如下代码：#include datedelegate.h在语句tableView.setModel(&model);后面添加如下代码：DateDelegate dateDelegate;tableView.setItemDelegateForColumn(1,&dateDelegate);（7）此时运行程序，双击第

37、1行第2列，将显示如图8.9所示的日历编辑框控件。第三十一页，共43页。8.4 代理（D e l e g a t e）（6）在“ma i n.c p p8.4 8.4 代理（代理（DelegateDelegate）下面使用下拉列表框QComboBox控件实现对职业类型的输入编辑，使用自定义的Delegate实现。（1）ComboDelegate继承自QItemDelegate类。头文件“combodelegate.h”中的具体代码如下：#includeclassComboDelegate:publicQItemDelegateQ_OBJECTpublic:ComboDelegate(QObje

38、ct*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,c

39、onstQStyleOptionViewItem&option,constQModelIndex&index)const;第三十二页，共43页。8.4 代理（D e l e g a t e）下面使用下拉列表框Q C o m8.4 8.4 代理（代理（DelegateDelegate）（2）源文件“combodelegate.cpp”中的具体代码如下：#includecombodelegate.h#includeComboDelegate:ComboDelegate(QObject*parent):QItemDelegate(parent)第三十三页，共43页。8.4 代理（D e l e g

40、a t e）（2）源文件“c o mb o d8.4 8.4 代理（代理（DelegateDelegate）createEditor()函数中创建了一个QComboBox控件，并插入可显示的条目，安装事件过滤器。具体代码如下：QWidget*ComboDelegate:createEditor(QWidget*parent,const QStyleOption ViewItem&/*option*/,const QModelIndex&/*index*/)const QComboBox*editor=new QComboBox(parent);editor-addItem(工人);editor

41、-addItem(农民);editor-addItem(医生);editor-addItem(律师);editor-addItem(军人);editor-installEventFilter(const_cast(this);return editor;第三十四页，共43页。8.4 代理（D e l e g a t e）c r e a t e E d i t o r(8.4 8.4 代理（代理（DelegateDelegate）setEditorData()函数中更新了Delegate控件中的数据显示，具体代码如下：void ComboDelegate:setEditorData(QWidge

42、t*editor,const QModelIndex&index)const QString str=index.model()-data(index).toString();QComboBox*box=static_cast(editor);int i=box-findText(str);box-setCurrentIndex(i);setModelData()函数中更新了Model中的数据，具体代码如下：void ComboDelegate:setModelData(QWidget*editor,QAbstractItemModel*model,const QModelIndex&inde

43、x)const QComboBox*box=static_cast(editor);QString str=box-currentText();model-setData(index,str);第三十五页，共43页。8.4 代理（D e l e g a t e）s e t E d i t o r D a t a8.4 8.4 代理（代理（DelegateDelegate）updateEditorGeometry()函数的具体代码如下：voidComboDelegate:updateEditorGeometry(QWidget*editor,constQStyleOptionViewItem&o

44、ption,constQModelIndex&/*index*/)consteditor-setGeometry(option.rect);在“main.cpp”文件中添加以下内容：#includecombodelegate.h在语句tableView.setModel(&model)的后面添加以下代码：ComboDelegatecomboDelegate;tableView.setItemDelegateForColumn(2,&comboDelegate);第三十六页，共43页。8.4 代理（D e l e g a t e）u p d a t e E d i t o r G8.4 8.4

45、代理（代理（DelegateDelegate）此时运行程序，双击第1行第3列，显示如图8.10所示的下拉列表。第三十七页，共43页。8.4 代理（D e l e g a t e）此时运行程序，双击第1 行第8.4 8.4 代理（代理（DelegateDelegate）下面使用QSpinBox控件实现对收入的输入编辑，调用自定义的Delegate来实现。SpinDelegate类的实现与ComboDelegate类的实现类似，此处不再详细讲解。（1）头文件“spindelegate.h”中的具体代码如下：#includeclassSpinDelegate:publicQItemDelegateQ

46、_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;voidupdat

47、eEditorGeometry(QWidget*editor,constQStyleOptionViewItem&option,constQModelIndex&index)const;第三十八页，共43页。8.4 代理（D e l e g a t e）下面使用Q S p i n B o x 控8.4 8.4 代理（代理（DelegateDelegate）（2）源文件“spindelegate.cpp”中的具体代码如下：#include spindelegate.h#include SpinDelegate:SpinDelegate(QObject*parent):QItemDelegate(

48、parent)createEditor()函数的具体实现代码如下：QWidget*SpinDelegate:createEditor(QWidget*parent,const QStyleOption ViewItem&/*option*/,const QModelIndex&/*index*/)const QSpinBox*editor=new QSpinBox(parent);editor-setRange(0,10000);editor-installEventFilter(const_cast(this);return editor;第三十九页，共43页。8.4 代理（D e l e

49、g a t e）（2）源文件“s p i n d e8.4 8.4 代理（代理（DelegateDelegate）setEditorData()函数的具体实现代码如下：voidSpinDelegate:setEditorData(QWidget*editor,constQModelIndex&index)constintvalue=index.model()-data(index).toInt();QSpinBox*box=static_cast(editor);box-setValue(value);setModelData()函数的具体实现代码如下：voidSpinDelegate:set

50、ModelData(QWidget*editor,QAbstractItemModel*model,constQModelIndex&index)constQSpinBox*box=static_cast(editor);intvalue=box-value();model-setData(index,value);第四十页，共43页。8.4 代理（D e l e g a t e）s e t E d i t o r D a t a8.4 8.4 代理（代理（DelegateDelegate）updateEditorGeometry()函数的具体实现代码如下：voidSpinDelegate:u