Qt模型/视图教程

模型/视图教程¹

每个UI开发者都应该要知道 模型/视图(Model/View)编程，本教程提供了一个关于该话题的一个易于理解的引导。

表格，列表和树widget是在GUI编程中频繁使用的组件。这些widget有两种不同的方式去访问它们的数据。传统的方式是使用内部存有数据的widget，这种方式非常直观，但是在许多特殊的应用程序中，它会导致数据同步问题。第二种方式是模型/视图编程，widget内部不包含存放数据的容器，这些widget通过一个标准的接口去访问外部数据，因此避免了数据冗余。这看起来似乎很复杂，但是一旦你深入研究，它不但易于掌握，而且模型/视图编程的许多好处都将慢慢呈现。

在这个过程中，我们将学习一些Qt的基本技术，例如：

• 标准widget和模型/视图widget之间的差异
• 表单和模型之间的适配器
• 开发一个简单的模型/视图应用程序
• 预定义的模型
• 进阶话题例如：
  • 树视图
  • 选择
  • 委托
  • 模块测试调试

你也将学习到，你的应用程序能否采用模型/视图编程简化开发，是否传统的widget将工作地更好。

这个教程为你提供了示例代码，让你能够编辑和集成它们到你的项目中。这个教程地源代码位于Qt目录下的examples/widgets/tutorials/modelview。

获取更多有关模型/视图编程的详细信息，请参考reference documentation。

1. 引入

模型/视图是一个技术，用于将数据和视图分离。标准的widget不被设计为数据和视图分离，这也是Qt有两种不同类型的widget的原因。两种类型的widget看上去是相同的，但是它们和数据的交互方式不同。

标准的widget数据是widget的一部分
视图类操作外部数据(模型)

1.1 标准widget

让我们深入了解一下标准的表格widget。一个表格widget是一个数据元素的2维数组，用户可以更改这些数据元素。通过读写表格widget中的数据元素，表格widget可以集成到程序流中。这种方式非常直观并且在许多应用程序中都是有用的，但是，通过一个标准的表格widget显示和编辑一个数据库表，会造成一些问题。两份数据的拷贝需要被协调：一份在widget外部；另一份在widget内部。开发者需要同步这两个版本。除此之外，数据的呈现和数据的紧密耦合使得编写单元测试更加困难。

1.2 模型/视图提供解决方案

模型/视图使用了一种更加优雅的方式提供了解决方案。模型/视图消除了在标准widget上的数据一致性问题。模型/视图也让，同时使用多个相同数据的视图，使用起来更简单，因为一个模型可以被传递给许多视图。最重要的差异是模型/视图widget不存储数据。事实上，它们直接操作你的数据。由于视图类不知道你的数据结构，所以你需要提供一个包装器，让你的数据满足QAbstractItemModel接口的要求。一个视图使用这些接口去读写你的数据。任何实现的QAbstractItemModel接口的类的对象，都被成为模型。一旦视图接收到了一个指向模型的指针，视图将读取和显示模型的内容，并成为模型的编辑器。

1.3 模型/视图widget概览

这是一个模型/视图widget和它们相对应的标准widget的概览

Widget	标准widget	模型/视图的视图类
	QListWidget	QListView
	QTableWidget	QTableView
	QTreeWidget	QTreeView
		QColumnView 展示树层级结构的列表
	QComboBox 可以以视图类或传统widget工作

1.4 在表单和模型间使用适配器

在表单和模型之间使用适配器会很方便。

我们可以直接在表格中编辑存储在表格中的数据，但是在文本字段中编辑数据会更舒适。没有直接的模型/视图？？？

QDataWidgetMapper是一个很好的解决方案，因为它映射表单widget到表格的行，并使非常容易为数据库表构建表单。

另一个适配器的例子是QCompleter。QCompleter提供Qt widegt中的自动完成，例如QComboBox和下面展示的QLineEdit。QCompleter使用一个模型作为他的数据源。

2. 一个简单的模型/视图应用程序

如果你想开发一个模型/视图应用程序，你应该从何处开始？我们推荐从一个简单的案例开始，并且逐步扩展它。这使得理解次架构非常简单。事实证明，在调用IDE之前尝试去理解模型/视图架构的细节对许多开发人员来说并不方便。通过一个简单的模型/视图应用程序作为开始实际上会更简单。试试看！将示例中的数据替换成你自己的数据。

下面有7个非常简单并且独立的应用程序，它们展示的模型/视图编程的不同方面。源代码可以在examples/widgets/tutorials/modelview目录中找到。

2.1 一个只读的表

我们通过一个使用QTableView展示数据的应用程序开始。我们将在之后给他提供编辑能力。

(文件源码: examples/widgets/tutorials/modelview/1_readonly/main.cpp)

// main.cpp
#include <QApplication>
#include <QTableView>
#include "mymodel.h"

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    QTableView tableView;
    MyModel myModel;
    tableView.setModel(&myModel);
    tableView.show();
    return a.exec();
}

我们有通常的main()函数：

这是有趣的部分：我们通过tableView.setModel(&myModel);创建了一个MyModel的实例，然后使用tableView.setModel(&myModel);传递给ableView一个指针。ableView将调用这个指针的方法去得到两个东西：

• 应该显示多少行和多少列
• 在每个单元格中应该打印什么内容

模型需要一些代码对此做出回应。

我们有一个表格数据，让我们从QAbstractTableModel开始，因为它比普通的QAbs