Qt-5开发及实例-第8章-Qt-5模型-视图结构课件.pptx

1、第第8章章 Qt 5模型模型/视图结构视图结构概概 述述Qt 5模型模型/视图结构视图结构Qt的模型/视图结构分为三部分：模型（Model）、视图（View）和代理（Delegate）。其中，模型与数据源通信，并为其他部件提供接口；而视图从模型中获得用来引用数据条目的模型索引（Model Index）。在视图中，代理负责绘制数据条目，当编辑条目时，代理和模型直接进行通信。模型/视图/代理之间通过信号和槽进行通信，如图8.1所示。数据发生改变时，模型发出信号通知视图。用户对界面进行操作，视图发出信号。代理发出信号告知模型和视图编辑器目前的状态。1模型（模型（Model）2视图（视图（View）3

2、代理（代理（Delegate）0101基基 本本 概概 念念基基 本本 概概 念念1模型（模型（Model）InterView框架中的所有模型都基于抽象基类QAbstractItemModel，此类由QProxyModel、QAbstractListModel、QAbstractTableModel、QAbstractProxyModel、QDirModel、QFileSystemModel、QHelpContentModel和QStandardItemModel类继承。其中，QAbstractListModel类和QAbstractTableModel类是列表和表格模型的抽象基类，如果需要实

3、现列表或表格模型，则应从这两个类继承。完成QStringList存储的QStringListModel类继承自QAbstractListModel类，而与数据库有关的QSqlQueryModel类继承自QAbstractTableModel类；QAbstractProxyModel类是代理模型的抽象类；QDirModel类是文件和目录的存储模型。2视图（视图（View）InterView框架中的所有视图都基于抽象基类QAbstractItemView，此类由QColumnView、QHeaderView、QListView、QTableView和QTreeView类继承。其中，QListVie

4、w类由QUndoView类和QListWidget类继承；QTableView类由QTableWidget类继承；QTreeView类由QTreeWidget类继承。而QListWidget类、QTableWidget类和QTreeWidget类实际上已经包含了数据，是模型/视图集成在一起的类。3代理（代理（Delegate）InterView框架中的所有代理都基于抽象基类QAbstractItemDelegate，此类由QItemDelegate和 QStyledItemDelegate类继承。其中，QItemDelegate类由表示数据库中关系代理的QSqlRelationalDelega

5、te类继承。0202“实例实例”模型模型/视图类使用视图类使用“实例实例”模型模型/视图类使用视图类使用【例】（简单）（CH801）实现一个简单的文件目录浏览器，完成效果如图8.2所示。创建工程“DirModeEx.pro”，其源文件“main.cpp”中的具体代码。其中，其中，(a)QDirModel model：新建一个QDirModel对象，为数据访问做准备。QDirModel的创建还可以设置过滤器，即只有符合条件的文件或目录才可被访问。QDirModel类继承自QAbstractItemModel类，为访问本地文件系统提供数据模型。它提供新建、删除、创建目录等一系列与文件操作相关的函数

6、，此处只是用来显示本地文件系统。(b)tree.setModel(&model)：调用setModel()函数设置View对象的Model为QDirModel对象的model。(c)tree.setSelectionMode(QAbstractItemView:MultiSelection)：设置QTreeView对象的选择方式为多选。(d)list.setSelectionModel(tree.selectionModel()：设置QListView对象与QTreeView对象使用相同的选择模型。(e)table.setSelectionModel(tree.selectionModel()

7、：设置QTableView对象与QTreeView对象使用相同的选择模型。(f)QObject:connect(&tree,SIGNAL(doubleClicked(QModelIndex),&list,SLOT(setRoot Index(QModelIndex)、QObject:connect(&tree,SIGNAL(doubleClicked(QModel Index),&table,SLOT(setRootIndex(QModelIndex);：为了实现双击QTreeView对象中的某个目录时，QListView对象和QTableView对象中显示此选定目录下的所有文件和目录，需要连

8、接QTreeView对象的doubleClicked()信号与QListView对象和QTableView对象的setRootIndex()槽函数。最后运行效果如图8.2所示。“实例实例”模型模型/视图类使用视图类使用第第8章章 Qt 5模型模型/视图结构视图结构模型（模型（Model）模型（模型（Model）【例】（难度一般）（CH802）通过实现将数值代码转换为文字的模型来介绍如何使用自定义模型。此模型中保存了不同军种的各种武器，实现效果如图8.3所示。模型（模型（Model）具体操作步骤如下。（1）ModelEx类继承自QAbstractTableModel类，头文件“modelex.h

9、”中的具体代码如下：#include#include#include#include class ModelEx:public QAbstractTableModelpublic:explicit ModelEx(QObject*parent=0);/虚函数声明/(a)virtual int rowCount(const QModelIndex&parent=QModelIndex()const;virtual int columnCount(const QModelIndex&parent=QModelIndex()const;QVariant data(const QModelIndex&

10、index,int role)const;QVariant headerData(int section,Qt:Orientation orientation,int role)const;signals:public slots:private:QVector army;QVector weaponType;QMap armyMap;/使用QMap数据结构保存“数值文字”的映射 QMap weaponTypeMap;QStringList weapon;QStringList header;void populateModel();/完成表格数据的初始化填充;模型（模型（Model）（2）源

11、文件“modelex.cpp”中的具体代码如下：#include modelex.hModelEx:ModelEx(QObject*parent):QAbstractTableModel(parent)armyMap1=tr(空军);armyMap2=tr(海军);armyMap3=tr(陆军);armyMap4=tr(海军陆战队);weaponTypeMap1=tr(轰炸机);weaponTypeMap2=tr(战斗机);weaponTypeMap3=tr(航空母舰);weaponTypeMap4=tr(驱逐舰);weaponTypeMap5=tr(直升机);weaponTypeMap6=t

12、r(坦克);weaponTypeMap7=tr(两栖攻击舰);weaponTypeMap8=tr(两栖战车);populateModel();模型（模型（Model）populateModel()函数的具体实现代码如下：void ModelEx:populateModel()headertr(军种)tr(种类)tr(武器);army12342431;weaponType13574862;weapontr(B-2)tr(尼米兹级)tr(阿帕奇)tr(黄蜂级)tr(阿利伯克级)tr(AAAV)tr(M1A1)tr(F-22);columnCount()函数中，因为模型的列固定为“3”，所以直接返回

13、“3”。int ModelEx:columnCount(const QModelIndex&parent)const return 3;rowCount()函数返回模型的行数。int ModelEx:rowCount(const QModelIndex&parent)const return army.size();模型（模型（Model）data()函数返回指定索引的数据，即将数值映射为文字。QVariant ModelEx:data(const QModelIndex&index,int role)const if(!index.isValid()return QVariant();if(

14、role=Qt:DisplayRole)/(a)switch(index.column()case 0:return armyMaparmyindex.row();break;case 1:return weaponTypeMapweaponTypeindex.row();break;case 2:return weaponindex.row();default:return QVariant();return QVariant();模型（模型（Model）表8.1列出了Item主要的角色及其描述。常 量描 述Qt:DisplayRole显示文字Qt:DecorationRole绘制装饰数据（

15、通常是图标）Qt:EditRole在编辑器中编辑的数据Qt:ToolTipRole工具提示Qt:StatusTipRole状态栏提示Qt:WhatsThisRoleWhats This文字Qt:SizeHintRole尺寸提示Qt:FontRole默认代理的绘制使用的字体Qt:TextAlignmentRole默认代理的对齐方式Qt:BackgroundRole默认代理的背景画刷Qt:ForegroundRole默认代理的前景画刷Qt:CheckStateRole默认代理的检查框状态Qt:UserRole用户自定义的数据的起始位置模型（模型（Model）headerData()函数返回固定的表

16、头数据，设置水平表头的标题，具体代码如下：QVariant ModelEx:headerData(int section,Qt:Orientation orientation,int role)const if(role=Qt:DisplayRole&orientation=Qt:Horizontal)return headersection;return QAbstractTableModel:headerData(section,orientation,role);模型（模型（Model）（3）在源文件“main.cpp”中，将模型和视图关联，具体代码如下：#include#include

17、 modelex.h#include int main(int argc,char*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所示。第第8章章 Qt 5模型模型/视图结构视图结构视图（视图（View）视图（视图（View）【例】（难度中等）（CH803）通过利用自定

18、义的View，实现一个对TableModel的表格数据进行显示的柱状统计图例子，以此介绍如何应用自定义的View。实现效果如图8.4所示。视图（视图（View）具体实现步骤如下。（1）完成主窗体，以便显示View的内容。MainWindow 类继承自QMainWindow类，作为主窗体。以下是头文件“mainwindow.h”的具体代码。#include#include#include#include#include#include#include class MainWindow:public QMainWindow Q_OBJECTpublic:MainWindow(QWidget*par

19、ent=0);MainWindow();void createAction();void createMenu();void setupModel();void setupView();private:QMenu*fileMenu;QAction*openAct;QStandardItemModel*model;QTableView*table;QSplitter*splitter;视图（视图（View）（2）下面是源文件“mainwindow.cpp”中的具体代码：#include mainwindow.h#include MainWindow:MainWindow(QWidget*pare

20、nt):QMainWindow(parent)createAction();createMenu();setupModel();setupView();setWindowTitle(tr(View Example);resize(600,600);MainWindow:MainWindow()void MainWindow:createAction()openAct=new QAction(tr(打开),this);void MainWindow:createMenu()fileMenu=new QMenu(tr(文件),this);fileMenu-addAction(openAct);me

21、nuBar()-addMenu(fileMenu);视图（视图（View）setupModel()函数新建一个Model，并设置表头数据，其具体实现代码如下：void MainWindow:setupModel()model=new QStandardItemModel(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:Ho

22、rizontal,tr(退休);视图（视图（View）setupView()函数的具体实现代码如下：void MainWindow:setupView()table=new QTableView;/新建一个QTableView对象 table-setModel(model);/为QTableView对象设置相同的Model QItemSelectionModel*selectionModel=new QItemSelectionModel(model);/(a)table-setSelectionModel(selectionModel);connect(selectionModel,SIGN

23、AL(selectionChanged(QItemSelection,ItemSelection),table,SLOT(selectionChanged(QItemSelection,QItemSelection);/(b)splitter=new QSplitter;splitter-setOrientation(Qt:Vertical);splitter-addWidget(table);setCentralWidget(splitter);其中其中,(a)QItemSelectionModel*selectionModel=new QItemSelectionModel(model)：

24、新建一个QItemSelectionModel对象作为QTableView对象使用的选择模型。(b)connect(selectionModel,SIGNAL(selectionChanged(QItemSelection,ItemSelection),table,SLOT(selectionChanged(QItemSelection,QItemSelection)：连接选择模型的selectionChanged()信号与QTableView对象的selectionChanged()槽函数，以便使自定义的HistogramView对象中的选择变化能够反映到QTableView对象的显示中。视

25、图（视图（View）（3）此时，运行效果如图8.5所示。视图（视图（View）以上只是实现了简单的主窗体框架显示，还没有完成事件。具体实现步骤如下。（1）在头文件“mainwindow.h”中添加代码如下：public:void openFile(QString);public slots:void slotOpen();（2）在源文件mainwindow.cpp中添加代码如下：#include#include#include#include 其中，其中，在createAction()函数中添加代码如下：connect(openAct,SIGNAL(triggered(),this,SLOT(

26、slotOpen();视图（视图（View）slotOpen()槽函数完成打开标准文件对话框，具体代码如下：void MainWindow:slotOpen()QString name;name=QFileDialog:getOpenFileName(this,打开,.,histogram files(*.txt);if(!name.isEmpty()openFile(name);openFile()函数完成打开所选的文件内容，其具体实现代码。新建一个文本文件，命名为“histogram.txt”，保存在项目D:QtCH8CH803build-ViewEx-Desktop_Qt_5_11_1_

27、MinGW_32bit-Debug目录下，加载文件数据后的运行效果如图8.6所示。视图（视图（View）具体实现步骤如下。（1）自定义HistogramView类继承自QAbstractItemView类，用于对表格数据进行柱状图显示。下面是头文件“histogramview.h”的具体代码。其中，其中，(a)visualRect()、scrollTo()、indexAt()、moveCursor()、horizontalOffset()、verticalOffset()、isIndexHidden()、setSelection()和和visualRegionForSelection()：QA

28、bstractItemView 类中的纯虚函数。这些纯虚函数不一定都要实现，可以根据需要选择性地实现，但一定要声明。(b)QModelIndex indexAt(const QPoint&point)const：当鼠标在视图中单击或位置发生改变时被触发，它返回鼠标所在点的QModelIndex值。(c)void mousePressEvent(QMouseEvent*event)：柱状统计图可以被鼠标单击选择，选中后以不同的方式显示。(d)void selectionChanged(const QItemSelection&selected,const QItemSelection&desel

29、ected)：当数据项选择发生变化时，此槽函数将响应。(e)void dataChanged(const QModelIndex&topLeft,const QModelIndex&bottomRight)：当模型中的数据发生变更时，此槽函数将响应。(f)void setSelection(const QRect&rect,QItemSelectionModel:SelectionFlags flags)：将位于QRect内的数据项按照SelectionFlags（描述被选择的数据项以何种方式进行更新）指定的方式进行更新。(g)QItemSelectionModel*selections：用于

30、保存与视图选择项相关的内容。(h)QList MRegionList：用于保存其中某一类型柱状图的区域范围，而每个区域是QList中的一个值。视图（视图（View）（2）源文件“histogramview.cpp”的具体代码。其中，其中，(a)QPainter painter(viewport()：以viewport()作为绘图设备新建一个QPainter对象。(b)if(selections-isSelected(index)else：使用不同画刷颜色区别选中与未被选中的数据项。(c)painter.drawRect(QRect(posM,y0-male*10,width,male*10)：

31、根据当前数据项的值按比例绘制一个方形表示此数据项。(d)MRegionList.insert(row,regionM)：将此数据所占据的区域保存到MRegionList列表中，为后面的数据项选择做准备。(e)从从int posF=x0+30语句到语句到posF+=50语句之间的代码段：语句之间的代码段：完成了表格第2列数据的柱状统计图的绘制。同样，使用不同的画刷颜色区别选中与未被选中的数据项，同时保存每个数据项所占的区域至FRegionList列表中。(f)从从int posS=x0+40语句到语句到posS+=50语句之间的代码段：语句之间的代码段：完成了表格第3列数据的柱状统计图的绘制。视

32、图（视图（View）dataChanged()函数实现当Model中的数据更改时，调用绘图设备的update()函数进行更新，反映数据的变化。具体实现代码如下：void HistogramView:dataChanged(const QModelIndex&topLeft,const QModelIndex&bottomRight)QAbstractItemView:dataChanged(topLeft,bottomRight);viewport()-update();setSelectionModel()函数为selections赋初值，具体代码如下：void HistogramView:

33、setSelectionModel(QItemSelectionModel*selectionModel)selections=selectionModel;视图（视图（View）（3）下面的工作是完成对选择项的更新。selectionChanged()函数中完成当数据项发生变化时调用update()函数，重绘绘图设备即可工作。此函数是将其他View中的操作引起的数据项选择变化反映到自身View的显示中。具体代码如下：void HistogramView:selectionChanged(const QItemSelection&selected,const QItemSelection&de

34、selected)viewport()-update();鼠标按下事件函数mousePressEvent()，在调用setSelection()函数时确定鼠标单击点是否在某个数据项的区域内，并设置选择项。具体代码如下：void HistogramView:mousePressEvent(QMouseEvent*event)QAbstractItemView:mousePressEvent(event);setSelection(QRect(event-pos().x(),event-pos().y(),1,1),QItemSelectionModel:SelectCurrent);视图（视图（

35、View）setSelection()函数的具体代码如下：void HistogramView:setSelection(const QRect&rect,QItemSelectionModel:SelectionFlags flags)int rows=model()-rowCount(rootIndex();/获取总行数 int columns=model()-columnCount(rootIndex();/获取总列数 QModelIndex selectedIndex;/(a)for(int row=0;rowrows;+row)/(b)for(int column=1;columni

36、ndex(row,column,rootIndex();QRegion region=itemRegion(index);/(c)if(!region.intersected(rect).isEmpty()selectedIndex=index;if(selectedIndex.isValid()/(d)selections-select(selectedIndex,flags);else QModelIndex noIndex;selections-select(noIndex,flags);视图（视图（View）其中，其中，(a)QModelIndex selectedIndex：用于保存

37、被选中的数据项的Index值。此处只实现用鼠标单击选择，而没有实现用鼠标拖曳框选，因此，鼠标动作只可能选中一个数据项。若需实现框选，则可使用QModelIndexList来保存所有被选中的数据项的Index值。(b)for(int row=0;rowrows;+row)for(int column=1;columnsetSelectionModel(selectionModel)：新建的QItemSelectionModel对象作为QTableView对象和HistogramView对象使用的选择模型。(b)connect(selectionModel,SIGNAL(selectionChan

38、ged(QItemSelection,QItemSelection),histogram,SLOT(selectionChanged(QItemSelection,QItemSelection)：连接选择模型的selection Changed()信号与HistogramView对象的selectionChanged()槽函数，以便使QTableView对象中的选择变化能够反映到自定义的HistogramView对象的显示中。（6）运行效果如图8.4所示。第第8章章 Qt 5模型模型/视图结构视图结构代理（代理（Delegate）代理（代理（Delegate）【例】（难度中等）（CH804）利

39、用Delegate设计表格中控件，如图8.7所示。代理（代理（Delegate）实现步骤如下。（1）首先，加载表格数据，以便后面的操作。源文件“main.cpp”中的具体代码。（2）选择“构建”“构建项目DateDelegate”菜单项，首先按照如图8.8所示的格式编辑本例所用的数据文件“test.txt”，保存在项目D:QtCH8 CH804build-DateDelegate-Desktop_Qt_5_11_1_MinGW_32bit-Debug目录下，然后运行程序，效果如图8.7所示。代理（代理（Delegate）（3）在图8.7中，使用手动的方式实现对生日的录入编辑。下面使用日历编辑框

40、QDateTimeEdit 控件实现对生日的编辑，用自定义的Delegate来实现。（4）DateDelegate 继承自QItemDelegate类。头文件“datedelegate.h”中的具体代码如下：#include class DateDelegate:public QItemDelegate Q_OBJECTpublic:DateDelegate(QObject*parent=0);QWidget*createEditor(QWidget*parent,const QStyleOptionViewItem&option,const QModelIndex&index)const;/

41、(a)void setEditorData(QWidget*editor,const QModelIndex&index)const;/(b)void setModelData(QWidget*editor,QAbstractItemModel*model,const QModel Index&index)const;/将Delegate中对数据的改变更新至Model中 void updateEditorGeometry(QWidget*editor,const QStyleOptionViewItem&option,const QModelIndex&index)const;/更新控件区的显

42、示;其中，其中，(a)QWidget*createEditor(QWidget*parent,const QStyleOptionViewItem&option,const QModelIndex&index)const：完成创建控件的工作，创建由参数中的QModelIndex对象指定的表项数据的编辑控件，并对控件的内容进行限定。(b)void setEditorData(QWidget*editor,const QModelIndex&index)const：设置控件显示的数据，将Model中的数据更新至Delegate中，相当于一个初始化工作。代理（代理（Delegate）（5）源文件“d

43、atedelegate.cpp”中的具体代码如下：#include datedelegate.h#include DateDelegate:DateDelegate(QObject*parent):QItemDelegate(parent)createEditor()函数的具体实现代码如下：QWidget*DateDelegate:createEditor(QWidget*parent,const QStyleOptionView Item&/*option*/,const QModelIndex&/*index*/)const QDateTimeEdit*editor=new QDateTi

44、meEdit(parent);/(a)editor-setDisplayFormat(yyyy-MM-dd);/(b)editor-setCalendarPopup(true);/(c)editor-installEventFilter(const_cast(this);/(d)return editor;其中，其中，(a)QDateTimeEdit*editor=new QDateTimeEdit(parent)：新建一个QDateTimeEdit对象作为编辑时的输入控件。(b)editor-setDisplayFormat(yyyy-MM-dd)：设置该QDateTimeEdit对象的显示

45、格式为yyyy-MM-dd，此为ISO标准显示方式。代理（代理（Delegate）日期的显示格式有多种，可设定为：yy.MM.dd 19.01.01d.MM.yyyy 1.01.2019其中，其中，y表示年，M表示月（必须大写），d表示日。(c)editor-setCalendarPopup(true)：设置日历选择的显示以Popup的方式，即下拉菜单方式显示。(d)editor-installEventFilter(const_cast(this)：调用QObject类的installEvent Filter()函数安装事件过滤器，使DateDelegate能够捕获QDateTimeEdit

46、对象的事件。代理（代理（Delegate）setEditorData()函数的具体代码如下：void DateDelegate:setEditorData(QWidget*editor,const QModelIndex&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);/设置控件的

47、显示数据其中，其中，(a)QString dateStr=index.model()-data(index).toString()：获取指定index数据项的数据。调用QModelIndex的model()函数可获得提供index的Model对象，data()函数返回的是一个QVariant对象，toString()函数将它转换为一个QString类型数据。(b)QDate date=QDate:fromString(dateStr,Qt:ISODate)：通过QDate的fromString()函数将以QString类型表示的日期数据转换为QDate类型。Qt:ISODate表示QDate类

48、型的日期是以ISO格式保存的，这样最终转换获得的QDate数据也是ISO格式，使控件显示与表格显示保持一致。(c)QDateTimeEdit*edit=static_cast(editor)：将editor转换为QDateTimeEdit对象，以获得编辑控件的对象指针。代理（代理（Delegate）setModelData()函数的具体代码如下：void DateDelegate:setModelData(QWidget*editor,QAbstractItemModel*model,const QModelIndex&index)const QDateTimeEdit*edit=static

49、_cast(editor);/(a)QDate date=edit-date();/(b)model-setData(index,QVariant(date.toString(Qt:ISODate);/(c)其中，其中，(a)static_cast(editor)：通过紧缩转换获得编辑控件的对象指针。(b)QDate date=edit-date()：获得编辑控件中的数据更新。(c)model-setData(index,QVariant(date.toString(Qt:ISODate)：调用setData()函数将数据修改更新到Model中。updateEditorGeometry()函数

50、的具体代码如下：void DateDelegate:updateEditorGeometry(QWidget*editor,const QStyleOptionViewItem&option,const QModelIndex&index)const editor-setGeometry(option.rect);代理（代理（Delegate）（6）在“main.cpp”文件中添加如下代码：#include datedelegate.h在语句tableView.setModel(&model);后面添加如下代码：DateDelegate dateDelegate;tableView.setIt