Qt 5 開發(fā)及實(shí)例（第5版） 課件 第9章 Qt 5模型-視圖及實(shí)例

QT5開發(fā)及實(shí)例（第5版）第9章Qt5模型/視圖及實(shí)例——模型/視圖架構(gòu)01基本概念基本概念模型/視圖架構(gòu)的理念其實(shí)源于Web開發(fā)領(lǐng)域的MVC。MVC是起源于Smalltalk的一種與用戶界面相關(guān)的設(shè)計(jì)模式，它包括3個(gè)基本元素：表示數(shù)據(jù)的模型M（Model）、表示界面的視圖V（View）以及管理用戶界面操作邏輯的控制器C（Controller）。Qt的模型/視圖架構(gòu)可分為三部分：模型M（Model）、視圖V（View）和代理D（Delegate）。其中，模型直接與數(shù)據(jù)源通信，并為程序其他部件提供數(shù)據(jù)接口，它從原始數(shù)據(jù)提取所需內(nèi)容供給各類視圖組件去顯示或編輯；視圖也就是程序界面上以各種豐富多樣的形式展示數(shù)據(jù)的控件，它們從模型中獲得所要引用數(shù)據(jù)條目項(xiàng)的模型索引（ModelIndex），再以索引方式獲取和呈現(xiàn)各自的顯示內(nèi)容；而代理則負(fù)責(zé)繪制界面上的數(shù)據(jù)條目，當(dāng)用戶編輯條目時(shí)，它就直接與模型進(jìn)行通信，它們之間的互動(dòng)關(guān)系如圖。02實(shí)

現(xiàn)

類實(shí)

現(xiàn)

類1．模型類模型/視圖架構(gòu)中的所有模型都基于抽象基類QAbstractItemModel，此類針對(duì)各種視圖組件和代理都有與之相適應(yīng)的數(shù)據(jù)存取接口，由此而派生出一系列不同用途的子模型類，如圖。實(shí)

現(xiàn)

類其中，各個(gè)主要方面用途的類及其子類說明如下。文本、字符串列表：QAbstractListModel類是列表模型的抽象基類，通常程序界面上的列表項(xiàng)數(shù)據(jù)內(nèi)容是以文本或字符串形式出現(xiàn)的，在Qt中用QStringList結(jié)構(gòu)存儲(chǔ)，其對(duì)應(yīng)的模型類QStringListModel就是從QAbstractListModel繼承而來。數(shù)據(jù)庫(kù)相關(guān)：數(shù)據(jù)庫(kù)的數(shù)據(jù)在界面上常以表格展示，由表格模型抽象類QAbstractTableModel派生出QtSql模塊用戶接口層的三個(gè)類QSqlQueryModel、QSqlTableModel及QSqlRelationalTableModel，分別實(shí)現(xiàn)對(duì)SQL語句查詢結(jié)果數(shù)據(jù)、表數(shù)據(jù)及關(guān)系表外鍵數(shù)據(jù)的讀寫。文件系統(tǒng)和目錄：QDirModel類是操作系統(tǒng)目錄數(shù)據(jù)的存儲(chǔ)模型；QFileSystemModel用于存儲(chǔ)文件系統(tǒng)信息。代理：QAbstractProxyModel與QProxyModel類分別是代理模型的抽象類及其實(shí)現(xiàn)類。實(shí)

現(xiàn)

類2．視圖類模型/視圖架構(gòu)中的所有視圖都基于抽象基類QAbstractItemView，視圖及相關(guān)類繼承的層次結(jié)構(gòu)如圖。下面就這幾個(gè)視圖類所對(duì)應(yīng)組件的用途加以說明。QListView：列表視圖。用于顯示單列的列表數(shù)據(jù)，如組合框、下拉列表框控件的選項(xiàng)。QTableView：表格視圖。用于顯示表格形式的數(shù)據(jù)，常用于在界面上展示數(shù)據(jù)庫(kù)中的表或視圖的記錄內(nèi)容。QTreeView：樹狀視圖。用于顯示可展開/折疊的多層次節(jié)點(diǎn)數(shù)據(jù)項(xiàng)，例如，瀏覽本地計(jì)算機(jī)操作系統(tǒng)的目錄樹。QColumnView：列視圖。當(dāng)在界面上以多個(gè)并排級(jí)聯(lián)列表的形式展示樹狀層次結(jié)構(gòu)數(shù)據(jù)時(shí)，每一級(jí)列表就是一個(gè)QColumnView。QHeaderView：表頭視圖。提供表格控件的行表頭或列表頭內(nèi)容顯示。實(shí)

現(xiàn)

類3．代理類模型/視圖架構(gòu)中的所有代理都基于抽象基類QAbstractItemDelegate，此類由QItemDelegate和QStyledItemDelegate類繼承。其中，QItemDelegate類由表示數(shù)據(jù)庫(kù)中關(guān)系代理的QSqlRelationalDelegate類繼承。QT5開發(fā)及實(shí)例（第5版）第9章Qt5模型/視圖及實(shí)例——常用模型/視圖組件實(shí)例01表格視圖/模型及實(shí)例1．表格視圖組件：QTableView2．表格模型3．實(shí)例表格視圖/模型及實(shí)例1．表格視圖組件：QTableView表格視圖QTableView組件用于在程序界面上展示二維數(shù)據(jù)表格，它常與Qt通用的標(biāo)準(zhǔn)項(xiàng)模型QStandardItemModel配合使用，通過setItem(i,j,項(xiàng))方法將標(biāo)準(zhǔn)項(xiàng)QStandardItem的實(shí)例對(duì)象添加到表格正文內(nèi)容的第i行第j列中，調(diào)用setModel(model)方法將模型關(guān)聯(lián)進(jìn)表格視圖。QTableView常用方法如下：（1）rowHeight()：獲得表中每一行的高度。（2）columnWidth()：獲得表中每一列的寬度。（3）showGrid()：顯示一個(gè)網(wǎng)格。（4）stretchLastSection()：展開表中的單元格。（5）hideRow()和hideColumn()：隱藏行和列。（6）showRow()和showColumn()：顯示行和列。（7）selectRow()和selectColumn()：選擇行和列。（8）resizeColumnsToContents()或resizeRowsToContents()：根據(jù)每個(gè)列或行的空間需求分配可用空間。在模型/視圖架構(gòu)中還有一個(gè)表頭視圖QHeaderView可用于顯示和控制QTableView的表頭，其方法如下：（1）verticalHeader()：獲得垂直表頭。（2）horizontalHeader()：獲得水平表頭。（3）hide()：隱藏表頭。表格視圖/模型及實(shí)例2．表格模型QTableView通過綁定模型來更新其上的內(nèi)容，可用的模型如表。模

型作

用QStringListModel存儲(chǔ)一組字符串QStandardItemModel存儲(chǔ)任意層次結(jié)構(gòu)的數(shù)據(jù)QDirModel對(duì)文件系統(tǒng)進(jìn)行封裝QSqlQueryModel對(duì)SQL的查詢結(jié)果集進(jìn)行封裝QSqlTableModel對(duì)SQL中的表格進(jìn)行封裝QSqlRelationalTableModel對(duì)帶有外鍵的SQL表格進(jìn)行封裝QSortFilterProxyModel對(duì)模型中的數(shù)據(jù)進(jìn)行排序或過濾表格視圖/模型及實(shí)例3．實(shí)例【例】（簡(jiǎn)單）（CH901）用QStandardItemModel模型存儲(chǔ)課程信息，在QTableView表格視圖中顯示。以“直接編寫代碼”（即取消勾選“Generateform”復(fù)選框）方式創(chuàng)建Qt項(xiàng)目，項(xiàng)目名tableView，“ClassInformation”頁基類選“QWidget”。代碼如下（tableView.cpp）：運(yùn)行程序，顯示如圖。02樹狀視圖/模型及實(shí)例1．樹狀視圖組件：QTreeView2．實(shí)例樹狀視圖/模型及實(shí)例1．樹狀視圖組件：QTreeView樹狀視圖QTreeView組件用于顯示具有層次結(jié)構(gòu)的節(jié)點(diǎn)數(shù)據(jù)項(xiàng)，也常與標(biāo)準(zhǔn)項(xiàng)模型一起使用，QStandardItemModel的實(shí)例對(duì)象model通過appendRow(QStandardItem*dotItem1)方法將標(biāo)準(zhǔn)項(xiàng)實(shí)例對(duì)象dotItem1添加進(jìn)第一個(gè)節(jié)點(diǎn)，再調(diào)用setModel(model)方法將模型關(guān)聯(lián)進(jìn)樹狀視圖。使用樹狀視圖，可以先創(chuàng)建一個(gè)標(biāo)準(zhǔn)項(xiàng)作為頂層對(duì)象，然后設(shè)置它的屬性，再創(chuàng)建子項(xiàng)添加到該項(xiàng)下……每一級(jí)均是如此，最后將頂層對(duì)象加入創(chuàng)建的樹狀視圖中。2．實(shí)例【例】（難度一般）（CH902）創(chuàng)建南京師范大學(xué)及其學(xué)院、系樹視圖。以“直接編寫代碼”（即取消勾選“Generateform”復(fù)選框）方式創(chuàng)建Qt項(xiàng)目，項(xiàng)目名treeView，“ClassInformation”頁基類選“QMainWindow”，類名命名為“mainWin”。代碼如下（treeView.cpp）：樹狀視圖/模型及實(shí)例運(yùn)行程序，如圖。03文件目錄瀏覽器實(shí)例文件目錄瀏覽器實(shí)例【例】（簡(jiǎn)單）（CH903）實(shí)現(xiàn)一個(gè)簡(jiǎn)單的文件目錄瀏覽器，完成效果如圖。以“直接編寫代碼”（即取消勾選“Generateform”復(fù)選框）方式創(chuàng)建Qt項(xiàng)目，項(xiàng)目名DirModeEx，“ClassInformation”頁基類選“QMainWindow”。在源文件main.cpp中編寫代碼如下。04自定義模型實(shí)例自定義模型實(shí)例【例】（難度一般）（CH904）實(shí)際應(yīng)用中，常常將一些重復(fù)的文字字段用數(shù)值代碼保存，使用時(shí)再通過關(guān)聯(lián)操作（如外鍵）來獲取其真實(shí)的內(nèi)容，此種方法可有效避免數(shù)據(jù)存儲(chǔ)的冗余。試開發(fā)一個(gè)通過將數(shù)值代碼映射為文字的模型來保存不同軍種的各種武器信息，實(shí)現(xiàn)效果如圖。自定義模型實(shí)例開發(fā)步驟如下。（1）在項(xiàng)目中創(chuàng)建ModelEx類繼承自QAbstractTableModel類，其頭文件modelex.h的代碼如下。（2）在ModelEx類的構(gòu)造函數(shù)（位于源文件modelex.cpp）中編寫代碼如下：#include"modelex.h"ModelEx::ModelEx(QObject*parent):QAbstractTableModel(parent){armyMap[1]="空軍";armyMap[2]="海軍";armyMap[3]="陸軍";armyMap[4]="海軍陸戰(zhàn)隊(duì)";weaponTypeMap[1]="轟炸機(jī)";weaponTypeMap[2]="戰(zhàn)斗機(jī)";weaponTypeMap[3]="航空母艦";weaponTypeMap[4]="驅(qū)逐艦";weaponTypeMap[5]="直升機(jī)";weaponTypeMap[6]="坦克";weaponTypeMap[7]="兩棲攻擊艦";weaponTypeMap[8]="兩棲戰(zhàn)車";populateModel();}自定義模型實(shí)例最后的populateModel()函數(shù)完成表格數(shù)據(jù)的初始化填充，具體實(shí)現(xiàn)代碼如下：voidModelEx::populateModel(){header<<"軍種"<<"種類"<<"武器";army<<1<<2<<3<<4<<2<<4<<3<<1;weaponType<<1<<3<<5<<7<<4<<8<<6<<2;weapon<<"B-2"<<"尼米茲級(jí)"<<"阿帕奇"<<"黃蜂級(jí)"<<"阿利伯克級(jí)"<<"AAAV"<<"M1A1"<<"F-22";}自定義模型實(shí)例（3）實(shí)現(xiàn)父類虛函數(shù)用戶自定義的模型類必須實(shí)現(xiàn)父類中所有的虛函數(shù)，一共4個(gè)虛函數(shù)，分別實(shí)現(xiàn)如下。①虛函數(shù)rowCount()返回模型的行數(shù)，代碼為：intModelEx::rowCount(constQModelIndex&parent)const{returnarmy.size();}②虛函數(shù)columnCount()函數(shù)返回模型的列數(shù)。因?yàn)槟Ｐ偷牧泄潭?，所以直接返回3：intModelEx::columnCount(constQModelIndex&parent)const{return3;}自定義模型實(shí)例③虛函數(shù)data()返回指定索引的數(shù)據(jù)，即將數(shù)值映射為文字，代碼如下：QVariantModelEx::data(constQModelIndex&index,introle)const{if(!index.isValid())returnQVariant();if(role==Qt::DisplayRole){switch(index.column()){case0:returnarmyMap[army[index.row()]];break;case1:returnweaponTypeMap[weaponType[index.row()]];break;case2:returnweapon[index.row()];default:returnQVariant();}}returnQVariant();}自定義模型實(shí)例見表列出了Item主要的角色及其描述。常

量描

述Qt::DisplayRole顯示文字Qt::DecorationRole繪制裝飾數(shù)據(jù)（通常是圖標(biāo)）Qt::EditRole在編輯器中編輯的數(shù)據(jù)Qt::ToolTipRole工具提示Qt::StatusTipRole狀態(tài)欄提示Qt::WhatsThisRoleWhat’sThis文字Qt::SizeHintRole尺寸提示Qt::FontRole默認(rèn)代理的繪制使用的字體Qt::TextAlignmentRole默認(rèn)代理的對(duì)齊方式Qt::BackgroundRole默認(rèn)代理的背景畫刷Qt::ForegroundRole默認(rèn)代理的前景畫刷Qt::CheckStateRole默認(rèn)代理的檢查框狀態(tài)Qt::UserRole用戶自定義數(shù)據(jù)的起始位置自定義模型實(shí)例④虛函數(shù)headerData()返回固定的表頭數(shù)據(jù)，設(shè)置水平表頭的標(biāo)題，具體代碼如下：QVariantModelEx::headerData(intsection,Qt::Orientationorientation,introle)const{if(role==Qt::DisplayRole&&orientation==Qt::Horizontal)returnheader[section];returnQAbstractTableModel::headerData(section,orientation,role);}自定義模型實(shí)例（4）最后，在源文件main.cpp中將自定義的模型與表格視圖關(guān)聯(lián)，代碼如下：#include<QApplication>#include"modelex.h"#include<QTableView>intmain(intargc,char*argv[]){QApplicationa(argc,argv);ModelExmodelEx; //自定義模型QTableViewview; //表格視圖view.setModel(&modelEx);view.setWindowTitle("自定義模型");view.resize(400,400);view.show();returna.exec();}自定義模型實(shí)例（5）運(yùn)行程序，顯示出自定義模型中數(shù)據(jù)的效果如圖。QT5開發(fā)及實(shí)例（第5版）第9章Qt5模型/視圖及實(shí)例——代理及應(yīng)用實(shí)例01代理概念及開發(fā)步驟1．什么是代理2．代理開發(fā)步驟代理概念及開發(fā)步驟1．什么是代理從前面的實(shí)例可見，表格視圖QTableView可以支持用戶對(duì)表單元格中的內(nèi)容進(jìn)行編輯，但是Qt默認(rèn)的單元格編輯控件只有文本框（QLineEdit）一種（圖），而實(shí)際應(yīng)用需求是多樣的，可能更適宜采用其他類型的控件來接受用戶輸入，例如，想要限定單元格的內(nèi)容只能從幾個(gè)固定選項(xiàng)中選取，就要用下拉列表框（QComboBox）（圖），Qt的模型/視圖架構(gòu)通過一種叫做“代理”的機(jī)制來實(shí)現(xiàn)此類功能。

代理概念及開發(fā)步驟2．代理開發(fā)步驟（1）創(chuàng)建代理類用QtCreator打開要開發(fā)代理的項(xiàng)目，右擊項(xiàng)目名，選“添加新文件...”，彈出對(duì)話框選擇新建一個(gè)“C++Class”類模板，點(diǎn)“Choose”按鈕，在接下來的向?qū)Ы缑嫔陷斎胱远x代理類的名稱及要繼承的代理基類，勾選“AddQ_OBJECT”，如圖9.10所示。代理概念及開發(fā)步驟（2）實(shí)現(xiàn)代理函數(shù)無論是從QItemDelegate還是QStyledItemDelegate類繼承創(chuàng)建的代理類，要實(shí)現(xiàn)代理功能，都必須重寫4個(gè)基本的函數(shù)。先在自定義代理類的頭文件中聲明這4個(gè)函數(shù)的原型，代碼如下：......#include<QItemDelegate（或QStyledItemDelegate）>#include<代理對(duì)應(yīng)的Qt控件庫(kù)>

class自定義代理類:publicQItemDelegate（或QStyledItemDelegate）{Q_OBJECTpublic:ComboDelegate(QObject*parent=0);QWidget*createEditor(QWidget*parent,constQStyleOptionViewItem&option,constQModelIndex&index)const; //函數(shù)1voidsetEditorData(QWidget*editor,constQModelIndex&index)const; //函數(shù)2voidsetModelData(QWidget*editor,QAbstractItemModel*model,constQModelIndex&index)const; //函數(shù)3voidupdateEditorGeometry(QWidget*editor,constQStyleOptionViewItem&option,constQModelIndex&index)const; //函數(shù)4};......代理概念及開發(fā)步驟（3）關(guān)聯(lián)到視圖開發(fā)好代理類后，就可以在界面視圖開發(fā)中為表格的任一列設(shè)置代理，將控件關(guān)聯(lián)到這列上的單元格，使用setItemDelegateForColumn函數(shù)，語句如下：視圖對(duì)象.setItemDelegateForColumn(列號(hào),&代理類對(duì)象);其中，列號(hào)從0開始，通常在視圖的模型設(shè)置setModel函數(shù)之后調(diào)用這條語句將代理與視圖關(guān)聯(lián)，這樣就可在所設(shè)列的單元格中使用代理類的控件來編輯其內(nèi)容。02代理應(yīng)用實(shí)例1．開發(fā)視圖界面2．實(shí)現(xiàn)日歷編輯框3．實(shí)現(xiàn)下拉列表框4．實(shí)現(xiàn)數(shù)字選擇框代理應(yīng)用實(shí)例【例】（難度中等）（CH905）針對(duì)如圖的表格視圖數(shù)據(jù)，開發(fā)幾種代理類分別以不同類型的控件編輯表格中不同列的數(shù)據(jù)內(nèi)容。代理應(yīng)用實(shí)例以“直接編寫代碼”（即取消勾選“Generateform”復(fù)選框）方式創(chuàng)建Qt項(xiàng)目，項(xiàng)目名DateDelegate，“ClassInformation”頁基類選“QMainWindow”。開發(fā)步驟如下。1．開發(fā)視圖界面（1）在源文件main.cpp中編寫代碼如下。（2）在QtCreator中選擇菜單“構(gòu)建”→“構(gòu)建項(xiàng)目"DateDelegate"”項(xiàng)，生成Debug目錄。（3）按照?qǐng)D的格式編輯本例視圖數(shù)據(jù)來源的文件test.txt，將其保存到項(xiàng)目Debug目錄下，然后運(yùn)行程序。代理應(yīng)用實(shí)例2．實(shí)現(xiàn)日歷編輯框想要通過手動(dòng)選擇日期的方式實(shí)現(xiàn)對(duì)生日的錄入編輯，需要定義一個(gè)代理類來實(shí)現(xiàn)日歷編輯框QDateTimeEdit，如下。（1）創(chuàng)建代理類在項(xiàng)目中創(chuàng)建一個(gè)代理類DateDelegate繼承自QItemDelegate類。（2）實(shí)現(xiàn)代理函數(shù)在代理類頭文件datedelegate.h中聲明4個(gè)代理函數(shù)，如下：#include<QItemDelegate>classDateDelegate:publicQItemDelegate{Q_OBJECTpublic:DateDelegate(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;};代理應(yīng)用實(shí)例在代理類源文件datedelegate.cpp中編寫實(shí)現(xiàn)這4個(gè)函數(shù)的代碼，具體如下。①createEditor()函數(shù)的實(shí)現(xiàn)代碼：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;}②setEditorData()函數(shù)的實(shí)現(xiàn)代碼：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); //設(shè)置控件的顯示數(shù)據(jù)}代理應(yīng)用實(shí)例③setModelData()函數(shù)的實(shí)現(xiàn)代碼：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()函數(shù)的實(shí)現(xiàn)代碼：voidDateDelegate::updateEditorGeometry(QWidget*editor,constQStyleOptionViewItem&option,constQModelIndex&index)const{editor->setGeometry(option.rect);}代理應(yīng)用實(shí)例（3）關(guān)聯(lián)到視圖在main.cpp文件中添加代理類頭文件包含：#include"datedelegate.h"在語句tableView.setModel(&model);后面添加如下代碼：DateDelegatedateDelegate;tableView.setItemDelegateForColumn(1,&dateDelegate);此時(shí)運(yùn)行程序，雙擊表格第2列的任一單元格，將出現(xiàn)如圖的日歷編輯框，可從中選擇修改生日日期。代理應(yīng)用實(shí)例3．實(shí)現(xiàn)下拉列表框想要通過下拉列表選擇職業(yè)類型，需要定義一個(gè)代理類來實(shí)現(xiàn)下拉列表框QComboBox，如下。（1）創(chuàng)建代理類在項(xiàng)目中創(chuàng)建一個(gè)代理類ComboDelegate繼承自QItemDelegate類。（2）實(shí)現(xiàn)代理函數(shù)在代理類頭文件combodelegate.h中聲明4個(gè)代理函數(shù)，如下：#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;};代理應(yīng)用實(shí)例在代理類源文件combodelegate.cpp中編寫實(shí)現(xiàn)這4個(gè)函數(shù)的代碼，具體如下。①createEditor()函數(shù)的實(shí)現(xiàn)代碼：QWidget*ComboDelegate::createEditor(QWidget*parent,constQStyleOptionViewItem&/*option*/,constQModelIndex&/*index*/)const{QComboBox*editor=newQComboBox(parent);editor->addItem("工人");editor->addItem("農(nóng)民");editor->addItem("醫(yī)生");editor->addItem("律師");editor->addItem("軍人");editor->installEventFilter(const_cast<ComboDelegate*>(this));returneditor;}代理應(yīng)用實(shí)例②setEditorData()函數(shù)的實(shí)現(xiàn)代碼：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);}代理應(yīng)用實(shí)例③setModelData()函數(shù)的實(shí)現(xiàn)代碼：voidComboDelegate::setModelData(QWidget*editor,QAbstractItemModel*model,constQModelIndex&index)const{QComboBox*box=static_cast<QComboBox*>(editor);QStringstr=box->currentText();model->setData(index,str);}④updateEditorGeometry()函數(shù)的實(shí)現(xiàn)代碼：voidComboDelegate::updateEditorGeometry(QWidget*editor,constQStyleOptionViewItem&option,constQModelIndex&/*index*/)const{editor->setGeometry(option.rect);}代理應(yīng)用實(shí)例（3）關(guān)聯(lián)到視圖在main.cpp文件中添加代理類頭文件包含：#include"combodelegate.h"在語句tableView.setModel(&model);的后面添加以下代碼：ComboDelegatecomboDelegate;tableView.setItemDelegateForColumn(2,&comboDelegate);此時(shí)運(yùn)行程序，雙擊表格第3列的任一單元格，顯示如圖的下拉列表。代理應(yīng)用實(shí)例4．實(shí)現(xiàn)數(shù)字選擇框想要通過上下箭頭調(diào)整最后一列的收入值，需要定義一個(gè)代理類來實(shí)現(xiàn)數(shù)字選擇框QSpinBox，如下。（1）創(chuàng)建代理類在項(xiàng)目中創(chuàng)建一個(gè)代理類SpinDelegate繼承自QItemDelegate類。（2）實(shí)現(xiàn)代理函數(shù)在代理類頭文件spindelegate.h中聲明4個(gè)代理函數(shù)，如下：#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(QWidget*editor,constQStyleOptionViewItem&option,constQModelIndex&index)const;};代理應(yīng)用實(shí)例在代理類源文件spindelegate.cpp中編寫實(shí)現(xiàn)這4個(gè)函數(shù)的代碼，具體如下。①createEditor()函數(shù)的實(shí)現(xiàn)代碼：QWidget*SpinDelegate::createEditor(QWidget*parent,constQStyleOptionViewItem&/*option*/,constQModelIndex&/*index*/)const{QSpinBox*editor=newQSpinBox(parent);editor->setRange(0,10000);editor->installEventFilter(const_cast<SpinDelegate*>(this));returneditor;}②setEditorData()函數(shù)的實(shí)現(xiàn)代碼：voidSpinDelegate::setEditorData(QWidget*editor,constQModelIndex&index)const{intvalue=index.model()->data(index).toInt();QSpinBox*box=static_cast<QSpinBox*>(editor);box->setValue(value);}代理應(yīng)用實(shí)例③setModelData()函數(shù)的實(shí)現(xiàn)代碼：voidSpinDelegate::setModelData(QWidget*editor,QAbstractItemModel*model,constQModelIndex&index)const{QSpinBox*box=static_cast<QSpinBox*>(editor);intvalue=box->value();model->setData(index,value);}④updateEditorGeometry()函數(shù)的實(shí)現(xiàn)代碼：voidSpinDelegate::updateEditorGeometry(QWidget*editor,constQStyleOptionViewItem&option,constQModelIndex&/*index*/)const{editor->setGeometry(option.rect);}代理應(yīng)用實(shí)例（3）關(guān)聯(lián)到視圖在main.cpp文件中添加代理類頭文件包含：#include"spindelegate.h"在語句tableView.setModel(&model);的后面添加內(nèi)容如下：SpinDelegatespinDelegate;tableView.setItemDelegateForColumn(3,&spinDelegate);此時(shí)運(yùn)行程序，雙擊表格第4列的任一單元格，出現(xiàn)帶箭頭的數(shù)字選擇框如圖，可上下翻動(dòng)調(diào)整收入值。QT5開發(fā)及實(shí)例（第5版）第9章Qt5模型/視圖及實(shí)例——綜合實(shí)例：汽車信息管理系統(tǒng)綜合實(shí)例：汽車信息管理系統(tǒng)【例】（較難）（CH906）開發(fā)一個(gè)汽車信息管理系統(tǒng)，界面上用多個(gè)模型和視圖以主從配合的方式呈現(xiàn)豐富的信息，如圖。01開發(fā)前的準(zhǔn)備1．安裝MySQL2．創(chuàng)建數(shù)據(jù)庫(kù)3．編譯MySQL驅(qū)動(dòng)開發(fā)前的準(zhǔn)備1．安裝MySQL從Oracle官網(wǎng)下載MySQL安裝包可執(zhí)行程序，雙擊啟動(dòng)向?qū)?，按照向?qū)Ы缑嬷敢惭b；或者下載MySQL壓縮包，手動(dòng)編寫配置文件，通過Windows命令行安裝MySQL服務(wù)。2．創(chuàng)建數(shù)據(jù)庫(kù)安裝好MySQL后，再安裝一個(gè)可視化操作工具（筆者用的是NavicatPremium），創(chuàng)建數(shù)據(jù)庫(kù)carview，其中創(chuàng)建兩個(gè)表：factory（汽車制造商表）和cars（汽車表），并錄入測(cè)試用數(shù)據(jù)。在NavicatPremium中新建一個(gè)查詢，通過執(zhí)行以下SQL語句來完成上述操作：（1）創(chuàng)建factory表、錄入數(shù)據(jù)：CREATETABLEfactory(idintPRIMARYKEY,manufactoryvarchar(40),addressvarchar(40));INSERTINTOfactoryVALUES(1,'一汽大眾','長(zhǎng)春');INSERTINTOfactoryVALUES(2,'二汽神龍','武漢');INSERTINTOfactoryVALUES(3,'上海大眾','上海');開發(fā)前的準(zhǔn)備（2）創(chuàng)建cars表、錄入數(shù)據(jù)：CREATETABLEcars(caridintPRIMARYKEY,namevarchar(50),factoryidint,yearint,detailsjsonNULL,FOREIGNKEY(factoryid)REFERENCESfactory(id));INSERTINTOcarsVALUES(1,'奧迪A6',1,2023,null);INSERTINTOcarsVALUES(2,'捷達(dá)',1,2011,null);INSERTINTOcarsVALUES(3,'寶來',1,2018,null);INSERTINTOcarsVALUES(4,'畢加索',2,2017,null);INSERTINTOcarsVALUES(5,'富康',2,2022,null);INSERTINTOcarsVALUES(6,'標(biāo)致307',2,2019,null);INSERTINTOcarsVALUES(7,'桑塔納',3,2013,null);INSERTINTOcarsVALUES(8,'帕薩特',3,2018,null);開發(fā)前的準(zhǔn)備（3）在cars表JSON字段中錄入車型詳細(xì)信息數(shù)據(jù)：UPDATEcarsSETdetails=JSON_OBJECT("01","排量:2393ml","02","價(jià)格:43.26萬元","03","排放:歐4","04","油耗:7.0l(90km/h)8.3l(120km/h)","05","功率:130/6000")WHEREcarid=1;UPDATEcarsSETdetails=JSON_OBJECT("01","排量:1600ml","02","價(jià)格:8.98萬元","03","排放:歐3","04","油耗:6.1l(90km/h)","05","功率:68/5800")WHEREcarid=2;UPDATEcarsSETdetails=JSON_OBJECT("01","排量:1600ml","02","價(jià)格:11.25萬元","03","排放:歐3帶OBD","04","油耗:6.0l(90km/h)8.1l(120km/h)","05","功率:74/6000")WHEREcarid=3;UPDATEcarsSETdetails=JSON_OBJECT("01","排量:1997ml","02","價(jià)格:15.38萬元","03","排放:歐3帶OBD","04","油耗:6.8l(90km/h)","05","功率:99/6000")WHEREcarid=4;UPDATEcarsSETdetails=JSON_OBJECT("01","排量:1600ml","02","價(jià)格:6.58萬元","03","排放:歐3","04","油耗:6.5l(90km/h)","05","功率:65/5600")WHEREcarid=5;UPDATEcarsSETdetails=JSON_OBJECT("01","排量:1997ml","02","價(jià)格:16.08萬元","03","排放:歐4","04","油耗:7.0l(90km/h)","05","功率:108/6000")WHEREcarid=6;UPDATEcarsSETdetails=JSON_OBJECT("01","排量:1781ml","02","價(jià)格:7.98萬元","03","排放:國(guó)3","04","油耗:≤7.2l(90km/h)","05","功率:70/5200")WHEREcarid=7;UPDATEcarsSETdetails=JSON_OBJECT("01","排量:1984ml","02","價(jià)格:19.58萬元","03","排放:歐4","04","油耗:7.1l(90km/h)","05","功率:85/5400")WHEREcarid=8;3．編譯MySQL驅(qū)動(dòng)如果是初次開發(fā)基于MySQL的Qt項(xiàng)目，需要用Qt的源碼工程自行編譯生成MySQL的驅(qū)動(dòng)DLL庫(kù)后引入開發(fā)環(huán)境02開發(fā)視圖界面1．聲明界面元素2．布局主界面3．創(chuàng)建界面元素開發(fā)視圖界面1．聲明界面元素主窗口MainWindow類繼承自QMainWindow類，在其頭文件mainwindow.h中聲明了主界面上所有要顯示的界面元素及其創(chuàng)建函數(shù)，代碼如下：#include<QMainWindow>#include<QGroupBox>#include<QTableView>#include<QListWidget>#include<QLabel>classMainWindow:publicQMainWindow{Q_OBJECTpublic:MainWindow(QWidget*parent=nullptr);~MainWindow();private:QGroupBox*createFactoryGroupBox(); //創(chuàng)建“汽車制造商”視圖組框QGroupBox*createCarGroupBox(); //創(chuàng)建“汽車”視圖組框QGroupBox*createDetailsGroupBox(); //創(chuàng)建“詳細(xì)信息”組框voidcreateMenuBar(); //創(chuàng)建操作菜單QTableView*factoryView; //汽車制造商視圖QTableView*carView; //汽車視圖QLabel*profileLabel; //制造商概要信息標(biāo)簽QLabel*titleLabel; //品牌標(biāo)簽QListWidget*attribList; //車型詳細(xì)信息列表};開發(fā)視圖界面2．布局主界面在主窗口源文件mainwindow.cpp中通過編寫代碼來布局汽車信息管理系統(tǒng)的主界面，如下。3．創(chuàng)建界面元素在布局界面的過程中，通過調(diào)用函數(shù)創(chuàng)建界面元素，調(diào)用了以下4個(gè)函數(shù)。（1）createFactoryGroupBox()函數(shù)創(chuàng)建界面左上區(qū)域的“汽車制造商”視圖組框，代碼如下：QGroupBox*MainWindow::createFactoryGroupBox(){factoryView=newQTableView; //創(chuàng)建汽車制造商視圖factoryView->setEditTriggers(QAbstractItemView::NoEditTriggers); //禁止用戶編輯汽車制造商視圖factoryView->setSortingEnabled(true);factoryView->setSelectionBehavior(QAbstractItemView::SelectRows);factoryView->setSelectionMode(QAbstractItemView::SingleSelection); //設(shè)置視圖選擇模式為單行選擇factoryView->setShowGrid(false); //不顯示網(wǎng)格factoryView->setAlternatingRowColors(true);QGroupBox*box=newQGroupBox("汽車制造商");QGridLayout*layout=newQGridLayout;layout->addWidget(factoryView,0,0); //將視圖添加進(jìn)組框box->setLayout(layout);returnbox;}開發(fā)視圖界面（2）createCarGroupBox()函數(shù)創(chuàng)建界面左下區(qū)域的“汽車”視圖組框，代碼如下：QGroupBox*MainWindow::createCarGroupBox(){QGroupBox*box=newQGroupBox("汽車");carView=newQTableView; //創(chuàng)建汽車視圖carView->setEditTriggers(QAbstractItemView::NoEditTriggers);carView->setSortingEnabled(true);carView->setSelectionBehavior(QAbstractItemView::SelectRows);carView->setSelectionMode(QAbstractItemView::SingleSelection);carView->setShowGrid(false);carView->verticalHeader()->hide();carView->setAlternatingRowColors(true);QVBoxLayout*layout=newQVBoxLayout;layout->addWidget(carView,0,0); //將視圖添加進(jìn)組框box->setLayout(layout);returnbox;}開發(fā)視圖界面（3）createDetailsGroupBox()函數(shù)創(chuàng)建界面右區(qū)的“詳細(xì)信息”組框，代碼如下：QGroupBox*MainWindow::createDetailsGroupBox(){QGroupBox*box=newQGroupBox("詳細(xì)信息");profileLabel=newQLabel; //創(chuàng)建顯示汽車制造商概要信息的標(biāo)簽profileLabel->setWordWrap(true);profileLabel->setAlignment(Qt::AlignBottom);titleLabel=newQLabel; //創(chuàng)建顯示品牌的標(biāo)簽titleLabel->setWordWrap(true);titleLabel->setAlignment(Qt::AlignBottom);attribList=newQListWidget; //創(chuàng)建顯示車型詳細(xì)信息的列表QGridLayout*layout=newQGridLayout;layout->addWidget(profileLabel,0,0,1,2);layout->addWidget(titleLabel,1,0,1,2);layout->addWidget(attribList,2,0,1,2); //將創(chuàng)建的各界面元素添加進(jìn)布局layout->setRowStretch(2,1);box->setLayout(layout);returnbox;}開發(fā)視圖界面（4）createMenuBar()函數(shù)創(chuàng)建系統(tǒng)的操作菜單，本系統(tǒng)的菜單包含“添加”、“刪除”和“退出”三個(gè)選項(xiàng)，用于后面往系統(tǒng)中添加和刪除汽車信息以及退出系統(tǒng)，代碼如下：voidMainWindow::createMenuBar(){QAction*addAction=newQAction("添加",this);QAction*deleteAction=newQAction("刪除",this);QAction*quitAction=newQAction("退出",this);addAction->setShortcut(tr("Ctrl+A"));deleteAction->setShortcut(tr("Ctrl+D"));quitAction->setShortcut(tr("Ctrl+Q"));QMenu*fileMenu=menuBar()->addMenu("操作菜單");fileMenu->addAction(addAction);fileMenu->addAction(deleteAction);fileMenu->addSeparator();fileMenu->addAction(quitAction);}開發(fā)視圖界面汽車信息管理系統(tǒng)的界面就開發(fā)好了，運(yùn)行程序顯示主界面及菜單效果如圖。02連接數(shù)據(jù)庫(kù)1．添加登錄對(duì)話框界面類2．設(shè)計(jì)登錄對(duì)話框界面3．聲明獲取參數(shù)及連接函數(shù)4．加載可用數(shù)據(jù)庫(kù)驅(qū)動(dòng)5．獲取參數(shù)6．建立連接7．啟動(dòng)登錄對(duì)話框連接數(shù)據(jù)庫(kù)本系統(tǒng)用戶是通過如圖的對(duì)話框圖形界面配置參數(shù)連上數(shù)據(jù)庫(kù)，然后登錄進(jìn)系統(tǒng)的，下面來開發(fā)這個(gè)模塊。連接數(shù)據(jù)庫(kù)1．添加登錄對(duì)話框界面類（1）右擊項(xiàng)目名，選擇“添加新文件...”，彈出“新建文件”向?qū)?duì)話框，選擇模板“Qt”→“Qt設(shè)計(jì)師界面類”條目項(xiàng)，如圖，單擊“Choose...”按鈕。連接數(shù)據(jù)庫(kù)（2）接下來在如圖的界面上，選擇“DialogwithoutButtons”界面模板，單擊“下一步”按鈕。連接數(shù)據(jù)庫(kù)（3）在“選擇類名”界面上將登錄對(duì)話框的類名（Classname）命名為ConnDlg，在下方的幾欄分別命名與其相關(guān)的程序文件：頭文件（Headerfile）名為connectdlg.h、源文件（Sourcefile）名為connectdlg.cpp、界面文件（Formfile）名為connectdlg.ui，如圖，單擊“下一步”按鈕，最后單擊“完成”按鈕。連接數(shù)據(jù)庫(kù)2．設(shè)計(jì)登錄對(duì)話框界面登錄對(duì)話框界面采用QtCreator的可視化方式進(jìn)行設(shè)計(jì)。在開發(fā)環(huán)境項(xiàng)目樹形視圖中雙擊“Forms”節(jié)點(diǎn)下的界面文件connectdlg.ui，進(jìn)入到QtDesigner設(shè)計(jì)環(huán)境，往設(shè)計(jì)區(qū)窗體上拖曳添加如圖的控件并布局整齊。連接數(shù)據(jù)庫(kù)各控件的屬性見表。類名

稱文

本類名

稱文

本QGroupBoxconnGroupBox數(shù)據(jù)庫(kù)連接設(shè)置

QLabeltextLabel2驅(qū)動(dòng)：QComboBoxcomboDriver

QLabeltextLabel3數(shù)據(jù)庫(kù)名：QLineEditeditDatabasecarviewQLabeltextLabel4用戶名：QLineEditeditUsernamerootQLabeltextLabel4_2密碼：QLineEditeditPassword123456QLabeltextLabel5主機(jī)名：QLineEditeditHostnamelocalhostQLabeltextLabel5_2端口：QSpinBoxportSpinBox3306QLabeltextLabel1狀態(tài)：QLabellabelStatus

QPushButtonokButton連接QPushButtoncancelButton退出連接數(shù)據(jù)庫(kù)3．聲明獲取參數(shù)及連接函數(shù)ConnDlg類繼承自QDialog類，它的主要功能是從登錄對(duì)話框界面上獲取用戶所設(shè)置的各項(xiàng)連接參數(shù)，然后以這些參數(shù)值來建立數(shù)據(jù)庫(kù)連接。在ConnDlg類的頭文件connectdlg.h中聲明了這些獲取參數(shù)及建立連接的函數(shù)，如下。4．加載可用數(shù)據(jù)庫(kù)驅(qū)動(dòng)（1）在項(xiàng)目的配置文件MyC中添加一句：QT+=sql連接數(shù)據(jù)庫(kù)（2）在源文件connectdlg.cpp中，ConnDlg類的構(gòu)造函數(shù)在初始化UI界面的時(shí)候查找當(dāng)前Qt系統(tǒng)中所有可用的數(shù)據(jù)庫(kù)驅(qū)動(dòng)，將它們載入界面上的驅(qū)動(dòng)組合框中，代碼如下：#include"connectdlg.h"#include"ui_connectdlg.h"#include<QSqlDatabase>#include<QtSql>ConnDlg::ConnDlg(QWidget*parent):QDialog(parent),ui(newUi::ConnDlg){ui->setupUi(this);QStringListdrivers=QSqlDatabase::drivers(); //(a)ui->comboDriver->addItem("");ui->comboDriver->addItems(drivers); //(b)ui->comboDriver->clearEditText();ui->labelStatus->setText("準(zhǔn)備連接..."); //(c)}連接數(shù)據(jù)庫(kù)5．獲取參數(shù)在源文件connectdlg.cpp中編寫前面聲明的用于獲取參數(shù)的各個(gè)函數(shù)（driverName()、databaseName()、userName()、password()、hostName()、port()），代碼如下：6．建立連接當(dāng)用戶設(shè)置完參數(shù)單擊“連接”按鈕時(shí)，系統(tǒng)會(huì)自動(dòng)執(zhí)行登錄對(duì)話框的on_okButton_clicked()槽函數(shù)，編寫其代碼如下：voidConnDlg::on_okButton_clicked(){if(ui->comboDriver->currentText().isEmpty()) //(a){ui->labelStatus->setText("請(qǐng)選擇一個(gè)數(shù)據(jù)庫(kù)驅(qū)動(dòng)！");ui->comboDriver->setFocus();}else{QSqlErrorerr=addConnection(driverName(),databaseName(),userName(),password(),hostName(),port()); //(b)if(err.type()!=QSqlError::NoError) //(c){ui->labelStatus->setText(err.text());}else{ //(d)ui->labelStatus->setText("連接成功!");accept();}}}連接數(shù)據(jù)庫(kù)addConnection()函數(shù)用來建立一條數(shù)據(jù)庫(kù)連接，其具體實(shí)現(xiàn)代碼如下：QSqlErrorConnDlg::addConnection(constQString&driver,constQString&dbName,constQString&user,constQString&passwd,constQString&host,intport){QSqlErrorerr;QSqlDatabasedb=QSqlDatabase::addDatabase(driver);db.setDatabaseName(dbName);db.setHostName(host);db.setPort(port);if(!db.open(user,passwd)){err=db.lastError();}returnerr;}連接數(shù)據(jù)庫(kù)7．啟動(dòng)登錄對(duì)話框登錄對(duì)話框是必須在程序運(yùn)行一開始就首先啟動(dòng)的界面，只有成功連上了數(shù)據(jù)庫(kù)才能接著訪問汽車信息管理系統(tǒng)的主界面，否則無法進(jìn)入系統(tǒng)。為了在一開始首先啟動(dòng)登錄對(duì)話框，需要修改項(xiàng)目入口文件main.cpp的代碼如下：#include"mainwindow.h"#include<QApplication>#include<QDialog>#include"connectdlg.h"intmain(intargc,char*argv[]){QApplicationa(argc,argv);ConnDlgdialog;if(dialog.exec()!=QDialog::Accepted)return-1;dialog.show();MainWindoww;w.show();returna.exec();}連接數(shù)據(jù)庫(kù)啟動(dòng)程序，出現(xiàn)登錄對(duì)話框，由于本例使用的后臺(tái)數(shù)據(jù)庫(kù)是MySQL，所以在第一欄驅(qū)動(dòng)組合框中選擇Qt的MySQL驅(qū)動(dòng)“QMYSQL”，如圖。03開發(fā)主/從視圖1．創(chuàng)建和加載模型數(shù)據(jù)2．實(shí)現(xiàn)主從視圖聯(lián)動(dòng)3．顯示汽車詳細(xì)信息4．關(guān)聯(lián)模型/視圖、信號(hào)/槽開發(fā)主/從視圖首先，在頭文件mainwindow.h中添加如下幾部分代碼。（1）包含要用的庫(kù)：#include<QSqlTableModel>#include<QSqlRelationalTableModel>#include<QModelIndex>#include<QJsonObject>#include<QJsonDocument>（2）聲明槽函數(shù)：privateslots:voidchangeFactory(QModelIndexindex);voidshowFactorytProfile(QModelIndexindex);voidshowCarDetails(QModelIndexindex);（3）定義模型及聲明私有函數(shù)：private:QSqlTableModel*factoryModel;QSqlRelationalTableModel*carModel;voidloadModel();QModelIndexindexOfFactory(constQString&factory);開發(fā)主/從視圖1．創(chuàng)建和加載模型數(shù)據(jù)在源文件mainwindow.cpp構(gòu)造函數(shù)中添加如下代碼：#include<QMessageBox>#include<QSqlRecord>MainWindow::MainWindow(QWidget*parent):QMainWindow(parent){factoryModel=newQSqlTableModel(this); //(a)carModel=newQSqlRelationalTableModel(this); //(b)loadModel(); //(c)......}開發(fā)主/從視圖說明：(a)factoryModel=newQSqlTableModel(this)：為汽車制造商表factory創(chuàng)建一個(gè)QSqlTableModel模型。(b)carModel=newQSqlRelationalTableModel(this)：為汽車表cars創(chuàng)建一個(gè)QSqlRelationalTableModel模型。(c)loadModel()：這個(gè)函數(shù)用來加載模型數(shù)據(jù)，由于同樣的加載操作在程序其他地方也會(huì)用到，故封裝為一個(gè)函數(shù)，此函數(shù)代碼如下：voidMainWindow::loadModel(){factoryModel->setTable("factory");factoryModel-