《I.MX6U 嵌入式Qt开发指南》第七章 Qt控件 7.8 项目视图组(基于模型)

正点原子运营 · 发表于 2022-7-29 14:49:04

本帖最后由正点原子运营于 2022-7-29 15:05 编辑

1）实验平台：正点原子阿尔法Linux开发板
2) 章节摘自【正点原子】《I.MX6U 嵌入式Qt开发指南》
3）购买链接:https://detail.tmall.com/item.htm?id=609033604451
4）全套实验源码+手册+视频下载地址：http://www.openedv.com/docs/boards/arm-linux/zdyz-i.mx6ull.html
5）正点原子官方B站：https://space.bilibili.com/394620890
6）正点原子阿尔法Linux交流群：1027879335

第七章 Qt控件

7.8 项目视图组(基于模型)

上图需要注意的是，在低版本的Qt，Column View与Undo View是没有封装成可视控件形式在Qt Creator中。

以上各个控件的解释如下：

（1） List View:清单视图

（2） Tree View:树形视图

（3） Table View:表视图

（4） Column View:列表视图

（5） Undo View:撤销列表视图

以下是各个控件的简介：

QListWidget继承QListView。QListWidget类提供了一个基于项的列表小部件。QListWidget是一个便捷的类，它提供了一个类似于QListView（下一小节将讲到）提供的列表视图，但是提供了一个用于添加和删除项目的基于项目的经典接口。QListWidget使用内部模型来管理列表中的每个QListWidgetItem。QListView是基于model的，需要自己来建模（例如建立QStringListModel、QSqlTableModel等），保存数据，这样就大大降低了数据冗余，提高了程序的效率，但是需要我们对数据建模有一定了解，初学者可以去了解Qt中的数据模型，方便导入数据，管理数据。而QListWidget是一个升级版本的QListView，它已经自己为我们建立了一个数据存储模型（QListWidgetItem），操作方便，直接调用addItem即可添加项目（ICON，文字）。

QTreeWidget继承QTreeView。QTreeWidget类提供了一个使用预定义树模型的树视图。

QTreeWidget类是一个便捷的类，它提供了一个标准的树小部件，具有一个类似于qt3中的QListView类所使用的基于项目的经典接口。该类基于Qt的模型/视图体系结构，并使用默认模型来保存项，每个项都是QTreeWidgetItem。

QTableWidget继承QTableView。QTableWidget类提供了一个带有默认模型的基于项的表视图。表小部件为应用程序提供标准的表显示工具。QTableWidget中的项由QTableWidgetItem提供。

QColumnView继承QAbstractItemView。QColumnView在许多QListViews中显示一个模型，每个QListViews对应树中的每个层次结构。这有时被称为级联列表。QColumnView类是模型/视图类之一，是Qt模型/视图框架的一部分。QColumnView实现了由QAbstractItemView类定义的接口，以允许它显示由派生自QAbstractItemModel类的模型提供的数据。

QUndoView继承QlistView。QUndoView类显示QUndoStack的内容。QUndoView是一个QListView，它显示在撤销堆栈上推送的命令列表。总是选择最近执行的命令。选择不同的命令会导致调用QUndoStack::setIndex()，将文档的状态向后或向前滚动到新命令。可以使用setStack()显式地设置堆栈。或者，可以使用setGroup()来设置QUndoGroup对象。当组的活动堆栈发生变化时，视图将自动更新自身。

7.8.1 QListView7.8.1.1 控件简介

QListView继承QAbstractItemView，被QListWidget 和QUndoView继承。QListView类提供模型上的列表或图标视图。QListView以简单的非分层列表或图标集合的形式显示存储在模型中的项。该类用于提供以前由QListBox和QIconView类提供的列表和图标视图，但是使用了Qt的模型/视图体系结构提供的更灵活的方法。QListView是基于Model，而QListWidget是基于Item，这是它们的本质区别。QListView需要建模，所以减少了冗余的数据，程序效率高;而QListWidget是一个升级版本的QListView（实质是封装好了model的QListView），它已经自己为我们建立了一个数据存储模型（QListWidgetItem），操作方便，直接调用addItem即可添加项目（ICON，文字）。

QT提供了一些现成的models用于处理数据项（这些是Qt处理数据模型的精华，如果用到Qt数据模型，下面这些是经常要用到的）：

（1） QStringListModel 用于存储简单的QString列表。

（2） QStandardItemModel 管理复杂的树型结构数据项，每项都可以包含任意数据。

（3） QDirModel 提供本地文件系统中的文件与目录信息。

（4） QSqlQueryModel, QSqlTableModel,QSqlRelationTableModel用来访问数据库。

7.8.1.2 用法示例

例40_qlistview，清单图（难度：简单）。使用一个ListView控件，展示如何在列表中插入数据，其中表中的内容可编辑，可删除。

在新建例程中不要勾选“Generate form”，默认继承QMainWindow类即可。项目新建完成，如下图。

在头文件“mainwindow.h”具体代码如下。

mainwindow.h编程后的代码
1 #ifndef MAINWINDOW_H
2 #define MAINWINDOW_H
3
4 #include <QMainWindow>
5 #include <QListView>
6 #include <QStringListModel>
7
8 class MainWindow : public QMainWindow
9 {
10 Q_OBJECT
11
12 public:
13 MainWindow(QWidget *parent = nullptr);
14 ~MainWindow();
15
16 private:
17 /* QListView对象 */
18 QListView *listView;
19 /* 字符串模型对象 */
20 QStringListModel *stringListModel;
21
22 };
23 #endif // MAINWINDOW_H

复制代码

在源文件“mainwindow.cpp”具体代码如下。

mainwindow.cpp编程后的代码
1 #include "mainwindow.h"
2
3 MainWindow::MainWindow(QWidget *parent)
4 : QMainWindow(parent)
5 {
6 /* 设置主窗口位置与大小 */
7 this->setGeometry(0, 0, 800, 480);
8
9 /* 实例化 */
10 listView = new QListView(this);
11 /* 将listView居中 */
12 setCentralWidget(listView);
13
14 QStringList strList;
15 strList<<"高三（1）班"<<"高三（2）班"<<"高三（3）班";
16
17 /* 实例化，字符串模型 */
18 stringListModel = new QStringListModel(strList);
19
20 /* 向表中插入一段数据 */
21 listView->setModel(stringListModel);
22 /* 设置为视图为图标模式 */
23 listView->setViewMode(QListView::IconMode);
24 /* 设置为不可拖动 */
25 listView->setDragEnabled(false);
26 }
27
28 MainWindow::~MainWindow()
29 {
30 }

复制代码

在源文件“main.cpp”具体代码如下。由新建项目时生成，无改动。

main.cpp编程后的代码
1 #include "mainwindow.h"
2
3 #include <QApplication>
4
5 int main(int argc, char *argv[])
6 {
7 QApplication a(argc, argv);
8 MainWindow w;
9 w.show();
10 return a.exec();
11 }

复制代码

7.8.1.3 运行效果

程序编译运行的结果如下。双击表格中的项，可修改表格的内容，同时也可以删除内容等。

7.8.2 QTreeView
7.8.2.1 控件简介

QTreeView继承QAbstractItemView，被QTreeWidget继承。QTreeView类提供树视图的默认模型/视图实现。QTreeView实现了模型项的树表示。该类用于提供以前由QListView类提供的标准分层列表，但是使用了Qt的模型/视图体系结构提供的更灵活的方法。

7.8.2.2 用法示例

例41_qtreeview，仿word标题（难度：简单）。要使一个QTreeView能够显示数据，需要构造一个model并设置QTreeView。Qt提供了一些类型的Model，其中最常用的就是这个QStandardItemModel类，一般可以满足大部分需求。另外，表头的内容也由这个model管理，setHorizontalHeaderLabels函数可以设置共有多少列、每列文字。一级标题直接使用 appendRow方法添加到model上，次级标题则是添加到第一个父级标题上，依次构成父子关系树。

在新建例程中不要勾选“Generate form”，默认继承QMainWindow类即可。项目新建完成，如下图。

在头文件“mainwindow.h”具体代码如下。

mainwindow.h编程后的代码
1 #ifndef MAINWINDOW_H
2 #define MAINWINDOW_H
3
4 #include <QMainWindow>
5 #include <QTreeView>
6
7 class MainWindow : public QMainWindow
8 {
9 Q_OBJECT
10
11 public:
12 MainWindow(QWidget *parent = nullptr);
13 ~MainWindow();
14
15 private:
16 QTreeView *treeView;
17
18 };
19 #endif // MAINWINDOW_H

复制代码

在源文件“mainwindow.cpp”具体代码如下。

mainwindow.cpp编程后的代码
1 #include "mainwindow.h"
2
3 #include <QStandardItemModel>
4 #include <QStandardItem>
5
6 MainWindow::MainWindow(QWidget *parent)
7 : QMainWindow(parent)
8 {
9 /* 设置窗口的位置与大小 */
10 this->setGeometry(0, 0, 800, 480);
11 /* 实例化QTreeView对象 */
12 treeView = new QTreeView(this);
13 /* 居中 */
14 setCentralWidget(treeView);
15
16 /* 构建Model */
17 QStandardItemModel *sdiModel = new QStandardItemModel(treeView);
18 sdiModel->setHorizontalHeaderLabels(
19 QStringList()<<QStringLiteral("标题")
20 << QStringLiteral("名称")
21 );
22
23 for(int i = 0; i < 5; i++) {
24 /* 一级标题 */
25 QList<QStandardItem*> items1;
26 QStandardItem* item1 =
27 new QStandardItem(QString::number(i));
28 QStandardItem* item2 =
29 new QStandardItem(QStringLiteral("一级标题"));
30 /* 添加项一 */
31 items1.append(item1);
32 /* 添加项二 */
33 items1.append(item2);
34 /* appendRow方法添加到model上 */
35 sdiModel->appendRow(items1);
36
37 for(int j = 0; j < 5; j++) {
38 /* 在一级标题后面插入二级标题 */
39 QList<QStandardItem*> items2;
40 QStandardItem* item3 =
41 new QStandardItem(QString::number(j));
42 QStandardItem* item4 =
43 new QStandardItem(QStringLiteral("二级标题"));
44 items2.append(item3);
45 items2.append(item4);
46 /* 使用appendRow方法添加到item1上 */
47 item1->appendRow(items2);
48 }
49 }
50 /* 设置Model给treeView */
51 treeView->setModel(sdiModel);
52 }
53
54 MainWindow::~MainWindow()
55 {
56 }

复制代码

在源文件“main.cpp”具体代码如下。由新建项目时生成，无改动。

main.cpp编程后的代码
1 #include "mainwindow.h"
2
3 #include <QApplication>
4
5 int main(int argc, char *argv[])
6 {
7 QApplication a(argc, argv);
8 MainWindow w;
9 w.show();
10 return a.exec();
11 }

复制代码

7.8.2.3 运行效果

程序编译运行的结果如下。可以点击数字来展开二级标题。

7.8.3 QTableView
7.8.3.1 控件简介

QTableView继承QAbstractItemView，被QTableWidget继承。QTableView类提供了表视图的默认模型/视图实现。QTableView实现了一个表视图，用于显示来自模型的项。该类用于提供以前由QTable类提供的标准表，但使用Qt的模型/视图体系结构提供的更灵活的方法。

7.8.3.2 用法示例

例42_qtableview，表格视图（难度：简单）。要使一个QTableView能够显示数据，需要构造一个model并设置给QTableView。Qt提供了一些类型的Model，其中最常用的就是这个QStandardItemModel类，一般可以满足大部分需求。另外，表头的内容也由这个model管理，setHorizontalHeaderLabels函数可以设置共有多少列、每列文字。

在新建例程中不要勾选“Generate form”，默认继承QMainWindow类即可。项目新建完成，如下图。

在头文件“mainwindow.h”具体代码如下。

mainwindow.h编程后的代码
1 #ifndef MAINWINDOW_H
2 #define MAINWINDOW_H
3
4 #include <QMainWindow>
5 #include <QTableView>
6
7 class MainWindow : public QMainWindow
8 {
9 Q_OBJECT
10
11 public:
12 MainWindow(QWidget *parent = nullptr);
13 ~MainWindow();
14
15 private:
16 QTableView *tableView;
17 };
18 #endif // MAINWINDOW_H

复制代码

在源文件“mainwindow.cpp”具体代码如下。

mainwindow.cpp编程后的代码
1 #include "mainwindow.h"
2 #include <QStandardItemModel>
3 #include <QHeaderView>
4
5 MainWindow::MainWindow(QWidget *parent)
6 : QMainWindow(parent)
7 {
8 /* 设置窗口的位置与大小 */
9 this->setGeometry(0, 0, 800, 480);
10 tableView = new QTableView(this);
11 setCentralWidget(tableView);
12 /* 显示网格线 */
13 tableView->setShowGrid(true);
14
15 QStandardItemModel* model = new QStandardItemModel();
16 QStringList labels =
17 QObject::tr("语文,数学,英语").simplified().split(",");
18 /* 设置水平头标签 */
19 model->setHorizontalHeaderLabels(labels);
20
21 /* item */
22 QStandardItem* item = 0;
23 /* model插入项内容 */
24 for(int i = 0; i < 5; i++){
25 item = new QStandardItem("80");
26 model->setItem(i, 0, item);
27 item = new QStandardItem("99");
28 model->setItem(i, 1, item);
29 item = new QStandardItem("100");
30 model->setItem(i, 2, item);
31 }
32 /* 将model设置给tableView */
33 tableView->setModel(model);
34 /* 平均分列 */
35 tableView->horizontalHeader()
36 ->setSectionResizeMode(QHeaderView::Stretch);
37 /* 平均分行 */
38 tableView->verticalHeader()
39 ->setSectionResizeMode(QHeaderView::Stretch);
40 }
41
42 MainWindow::~MainWindow()
43 {
44 }

复制代码

在源文件“main.cpp”具体代码如下。由新建项目时生成，无改动。

main.cpp编程后的代码
1 #include "mainwindow.h"
2
3 #include <QApplication>
4
5 int main(int argc, char *argv[])
6 {
7 QApplication a(argc, argv);
8 MainWindow w;
9 w.show();
10 return a.exec();
11 }

复制代码

7.8.3.3 运行效果

程序编译运行的结果如下。建立了一个成绩表格。

7.8.4 QColumnView
7.8.4.1 控件简介

QColumnView继承QAbstractItemView。QColumnView在许多QListViews中显示一个模型，每个QListViews对应树中的每个层次结构。这有时被称为级联列表。QColumnView类是模型/视图类之一，是Qt模型/视图框架的一部分。QColumnView实现了由QAbstractItemView类定义的接口，以允许它显示由派生自QAbstractItemModel类的模型提供的数据。

7.8.4.2 用法示例

例43_qcolumnview，收货地址（难度：简单）。使用一个QColumnView，向其插入多级QStandardItem。这样就可以模拟成一个多级联的视图。与我们在像某宝，某东里填写的收货地址十分类似。

在新建例程中不要勾选“Generate form”，默认继承QMainWindow类即可。项目新建完成，如下图。

在头文件“mainwindow.h”具体代码如下。

mainwindow.h编程后的代码
1 #ifndef MAINWINDOW_H
2 #define MAINWINDOW_H
3
4 #include <QMainWindow>
5 #include <QColumnView>
6
7 class MainWindow : public QMainWindow
8 {
9 Q_OBJECT
10
11 public:
12 MainWindow(QWidget *parent = nullptr);
13 ~MainWindow();
14
15 private:
16 QColumnView *columnView;
17 };
18 #endif // MAINWINDOW_H

复制代码

在源文件“mainwindow.cpp”具体代码如下。

mainwindow.cpp编程后的代码
1 #include "mainwindow.h"
2 #include <QStandardItem>
3
4 MainWindow::MainWindow(QWidget *parent)
5 : QMainWindow(parent)
6 {
7 /* 设置主窗体显示位置与大小 */
8 this->setGeometry(0, 0, 800, 480);
9 QStandardItemModel *model = new QStandardItemModel;
10
11 /* 省份 */
12 QStandardItem *province = new QStandardItem("广东省");
13
14 /* 城市 */
15 QStandardItem *city1 = new QStandardItem("茂名市");
16 QStandardItem *city2 = new QStandardItem("中山市");
17
18 /* 添加城市到省份下 */
19 province->appendRow(city1);
20 province->appendRow(city2);
21
22 QStandardItem *town1 = new QStandardItem("电白镇");
23 QStandardItem *town2 = new QStandardItem("南头镇");
24
25 /* 添加城镇到城市下 */
26 city1->appendRow(town1);
27 city2->appendRow(town2);
28
29 QColumnView *columnView = new QColumnView;
30
31 /* 建立model */
32 model->appendRow(province);
33
34 /* 设置model */
35 columnView->setModel(model);
36
37 /* 设置居中 */
38 setCentralWidget(columnView);
39 }
40
41 MainWindow::~MainWindow()
42 {
43 }

复制代码

在源文件“main.cpp”具体代码如下。由新建项目时生成，无改动。

main.cpp编程后的代码
1 #include "mainwindow.h"
2
3 #include <QApplication>
4
5 int main(int argc, char *argv[])
6 {
7 QApplication a(argc, argv);
8 MainWindow w;
9 w.show();
10 return a.exec();
11 }

复制代码

7.8.4.3 运行效果

程序编译运行的结果如下。当点击省份出现城市，点击城市出现城镇。

7.8.5 QUndoView
7.8.5.1 控件简介

QUndoView继承QlistView。QUndoView类显示QUndoStack的内容。QUndoView是一个QListView，它显示在撤销堆栈上推送的命令列表。总是选择最近执行的命令。选择不同的命令会导致调用QUndoStack::setIndex()，将文档的状态向后或向前滚动到新命令。可以使用setStack()显式地设置堆栈。或者，可以使用setGroup()来设置QUndoGroup对象。当组的活动堆栈发生变化时，视图将自动更新自身。

7.8.5.2 用法示例

例44_qundoview，仿PS历史记录（难度：一般）。如果大家学习过PS，都知道PS里有个历史记录面板，点击就会撤回到历史记录的步骤。例子其实也可以参考Qt官方提供的例子“Undo Framework Example”。但是官方的例子过于复杂，整个理解下来需要花费大量时间。于是编者写一个仿PS历史记录的例子来加深大家对QUndoView的理解。

在新建例程中不要勾选“Generate form”，默认继承QMainWindow类即可。同时添加了两个新建文件》点击新建，选择C++》C++ Source File命名command.h和command.cpp文件，用于重写QUndoCommand。项目新建完成，如下图。

在头文件“command.h”具体代码如下。