【Qt】模型/视图结构和数据绑定控件

爱被打了一巴掌 2022-05-22 09:45 657阅读 0赞

## 模型/视图结构 ##

模型/视图是指处理数据的模型和向用户提供GUI的视图，这是从GUI分离数据的一种结构，又称为MVC（Model-View-Controller）。

### 模型 ###

**QAbstractItemModel类是所有模型类的基类，提供了存取和管理数据的界面，以及存储从数据结构图、文件、数据库和其他应用程序读取数据的界面。**

<table>  QAbstractItemModel类提供的模型  
 <tbody> 
  <tr> 
   <td style="text-align:center;">模型</td> 
   <td style="text-align:center;">说明</td> 
  </tr> 
  <tr> 
   <td>QStringListModel</td> 
   <td>保存QString数据类型的单一数据列表的类</td> 
  </tr> 
  <tr> 
   <td>QStandardItemModel</td> 
   <td>通过树形视图提供读取任意数据的类</td> 
  </tr> 
  <tr> 
   <td>QFileSystemModel</td> 
   <td>提供文件系统中的文件和目录信息的类</td> 
  </tr> 
  <tr> 
   <td>QSqlQueryModel</td> 
   <td>通过模型类存取数据库信息的类</td> 
  </tr> 
  <tr> 
   <td>QSqlTableModel</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>QSqlRelationalTableModel</td> 
   <td>&nbsp;</td> 
  </tr> 
 </tbody> 
</table>

### 视图 ###

视图是将数据显示到GUI的控件。**提供了通过列表显示数据的QListView、通过表格显示数据的QTableView等多种控件。这些控件都继承自QAbstractItemView类。**

<table>  模型/视图结构各控件及含义  
 <tbody> 
  <tr> 
   <td style="text-align:center;">控件</td> 
   <td style="text-align:center;">说明</td> 
  </tr> 
  <tr> 
   <td>QListView</td> 
   <td>列表显示数据的控件</td> 
  </tr> 
  <tr> 
   <td>QTableView</td> 
   <td>实现表格视图的模型/视图</td> 
  </tr> 
  <tr> 
   <td>QTreeView</td> 
   <td>实现树形视图的模型/视图</td> 
  </tr> 
 </tbody> 
</table>

### 代理 ###

代理提供的功能可以将保存或映射到模型的数据描绘到视图控件或者进行处理。提供QStyledItemDelegate类和QItemDelegate类，父类是QAbstractItemDelegate。通过视图控件绘制数据时，QStyledItemDelegate类可以定义选项列表风格；QItemDelegate类提供在模型/视图上处理数据的能力。

## 使用模型类和视图控件 ##

先看一个例子：

resize(600,300);
        QSplitter* splitter=new QSplitter(this);                //窗口分割，提供可调整空间大小的GUI
    
        QFileSystemModel* model=new QFileSystemModel;            //通过模型类实例从文件系统映射目录和文件信息数据
        model->setRootPath(QDir::currentPath());            //设置指定的当前目录
    
        QTreeView* tree=new QTreeView(splitter);
        tree->setModel(model);                            //从模型类将数据会知道QTreeView上
        tree->setRootIndex(model->index(QDir::currentPath()));        //设置模型的根路径
    
        QListView* list=new QListView(splitter);
        list->setModel(model);
        list->setRootIndex(model->index(QDir::currentPath()));
    
        QVBoxLayout* layout=new QVBoxLayout();
        layout->addWidget(splitter);
    
        setLayout(layout);

这段程序的运行结果为：

![70][]

如图所示：左侧QTreeView控件以树形结构显示目录和文件信息；右侧QListView控件以列表形式显示目录和文件。

### QListView ###

**继承自QAbstractItemModel类的QStringListModel类可以映射QString数据类型。**

例子：

resize(600,300);
        QStringList strList;                            //字符串列表
        strList<<"Monday"<<"Tuesday"<<"Wednesday"<<"Thursday"<<"Friday"<<"Saterday";
    
        QAbstractItemModel* model=new QStringListModel(strList);    //model绑定字符串列表
        QListView* list=new QListView();
        list->setModel(model);                            //view绑定model
    
        QModelIndex index=model->index(3,0);
        QString text=model->data(index,Qt::DisplayRole).toString();    //将QStringListModel返回的QModelIndex转化为QString类型
    
        QLabel* lbl=new QLabel("");
        lbl->setText(text);
    
        QVBoxLayout* layout=new QVBoxLayout();
        layout->addWidget(list);
        layout->addWidget(lbl);
    
        setLayout(layout);

这段程序的运行结果为：

![70 1][]

### QTableView ###

QTableView控件描述有行和列的表格类型的模型。

QStandardItemModel类提供可以定义列、标题的**成员函数setHeaderData()，通过此函数指定各列的标题。成员函数setVerticalHeaderItem()可以定义行标题。**

例子：

resize(600,300);
    
        QStandardItemModel* model=new QStandardItemModel(3,3);                //定义表格model
        model->setHeaderData(0,Qt::Horizontal,QObject::tr("Subject"));             //指定标题行
        model->setHeaderData(1,Qt::Horizontal,QObject::tr("Description"));
        model->setHeaderData(2,Qt::Horizontal,QObject::tr("Date"));
    
        model->setVerticalHeaderItem(0,new QStandardItem("Col 1"));               //设定标题列
        model->setVerticalHeaderItem(1,new QStandardItem("Col 2"));
        model->setVerticalHeaderItem(2,new QStandardItem("Col 3"));
    
        model->setData(model->index(0,0),"Monitor");                    //设定内容，指定位置
        model->setData(model->index(0,1),"LCD 24 inch");
        model->setData(model->index(0,2),QDateTime(QDate(2018,1,1)));
        model->setData(model->index(1,0),"CPU");
        model->setData(model->index(1,1),"Intel core 2 duo");
        model->setData(model->index(1,2),QDateTime(QDate(2018,1,2)));
        model->setData(model->index(2,0),"Keyboard");
        model->setData(model->index(2,1),"104 key USB keyboard");
        model->setData(model->index(2,2),QDateTime(QDate(2018,1,3)));
    
        QTableView* view=new QTableView();
        view->setModel(model);                            //将view绑定model
    
        QVBoxLayout* layout=new QVBoxLayout();
        layout->addWidget(view);
    
        setLayout(layout);

这段程序的运行结果为：

![70 2][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4NDEwNzMw_size_16_color_FFFFFF_t_70][]

[70]: /images/20220522/c5f0f2f802ec4effa4facb58f983ccf2.png
[70 1]: /images/20220522/6fd17d4165c84c80b3cb3738382fa12a.png
[70 2]: /images/20220522/4f5ede86886a41759cd2f935cdc65133.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4NDEwNzMw_size_16_color_FFFFFF_t_70]: /images/20220522/585828f6c4c2441989bfd370f3cf4411.png