Qt开发：项目视图(Item Views)的介绍和使用

一、清单视图（List View）

1.1 基本概念

  在 Qt 中，QListView 是用于显示垂直列表或图标网格的视图控件，它是基于 Qt 的模型/视图架构构建的，适合用于展示一组条目，如文件列表、联系人列表、图标等。

• QListView 是视图（View）
• 搭配模型（Model）使用，例如 QStringListModel、QStandardItemModel
• 也可以设置委托（Delegate）来自定义每一项的显示方式

1.2 使用示例（文字列表）

#include <QListView>
#include <QStringListModel>// 创建模型
QStringList list = {"苹果", "香蕉", "橘子"};
QStringListModel *model = new QStringListModel(list);// 创建视图
QListView *listView = new QListView(this);
listView->setModel(model);

1.3 图标+文字（图标模式）

QStandardItemModel *model = new QStandardItemModel(this);QStandardItem *item1 = new QStandardItem(QIcon(":/img/apple.png"), "苹果");
QStandardItem *item2 = new QStandardItem(QIcon(":/img/banana.png"), "香蕉");model->appendRow(item1);
model->appendRow(item2);QListView *listView = new QListView(this);
listView->setModel(model);// 设置为图标模式
listView->setViewMode(QListView::IconMode);
listView->setIconSize(QSize(64, 64));
listView->setSpacing(10);

1.4 常用设置

1.5 完整示例

#include <QWidget>
#include <QListView>
#include <QStringListModel>
#include <QMessageBox>class MainWindow : public QWidget
{Q_OBJECTpublic:MainWindow(QWidget *parent = nullptr) : QWidget(parent) {this->resize(450, 250);this->setWindowTitle("QListView 示例");QListView *pListView = new QListView(this);pListView->setGeometry(20, 20, 300, 160);QStringList list;list.append("运动类：篮球、足球");list.append("娱乐类：看电影、写小说、听音乐");list.append("游戏类：五子棋、扑克牌、中国象棋");list.append("旅游类：国外旅游、国内旅游");QStringListModel *listMode = new QStringListModel(list);pListView->setModel(listMode);connect(pListView, &QListView::clicked, this, &MainWindow::onSlotClickedFunc);}private slots:void onSlotClickedFunc(const QModelIndex &index) {QMessageBox::information(NULL, "兴趣爱好", "你选择的类型为：\n" + index.data().toString());}
};
#endif // MAINWINDOW_H

输出结果：

二、树视图（Tree View）

2.1 基本概念

  Qt 的树视图使用 QTreeView 类来实现，通常需要结合一个数据模型（如 QStandardItemModel 或自定义的 QAbstractItemModel）来提供数据源。

主要特点：

• 支持多级嵌套（每一项都可以有子项）
• 支持展开、折叠
• 支持选择、编辑、右键菜单等交互

2.2 常用类简介

2.3 快速使用示例

以下是一个最基本的树视图示例，使用 QStandardItemModel：

#include <QApplication>
#include <QTreeView>
#include <QStandardItemModel>int main(int argc, char *argv[]) {QApplication app(argc, argv);QTreeView treeView;QStandardItemModel model;model.setHorizontalHeaderLabels({ "名称" });// 创建顶层节点QStandardItem *rootItem = new QStandardItem("动物");// 添加子节点QStandardItem *mammalItem = new QStandardItem("哺乳动物");QStandardItem *birdItem = new QStandardItem("鸟类");rootItem->appendRow(mammalItem);rootItem->appendRow(birdItem);// 添加孙子节点mammalItem->appendRow(new QStandardItem("老虎"));mammalItem->appendRow(new QStandardItem("大象"));birdItem->appendRow(new QStandardItem("麻雀"));birdItem->appendRow(new QStandardItem("乌鸦"));// 添加到模型model.appendRow(rootItem);treeView.setModel(&model);treeView.expandAll();  // 默认展开所有节点treeView.setWindowTitle("树视图示例");treeView.resize(400, 300);treeView.show();return app.exec();
}

输出结果：

2.4 常用功能配置

三、表视图（Table View）

3.1 基本概念

  在 Qt 中，表视图（QTableView）是用于显示二维表格数据的控件，广泛用于数据管理、数据库展示、信息表格等场景。它是 Qt 的 Model/View 架构中的一部分，需要配合数据模型（如 QStandardItemModel 或自定义的 QAbstractTableModel）一起使用。

3.2 常用类

3.3 快速使用示例

使用 QTableView + QStandardItemModel 创建一个简单表格：

#include <QApplication>
#include <QTableView>
#include <QStandardItemModel>
#include <QStandardItem>int main(int argc, char *argv[]) {QApplication app(argc, argv);QTableView tableView;QStandardItemModel model;// 设置行列数和表头model.setRowCount(3);model.setColumnCount(3);model.setHorizontalHeaderLabels({ "姓名", "年龄", "城市" });// 设置数据model.setItem(0, 0, new QStandardItem("张三"));model.setItem(0, 1, new QStandardItem("25"));model.setItem(0, 2, new QStandardItem("北京"));model.setItem(1, 0, new QStandardItem("李四"));model.setItem(1, 1, new QStandardItem("30"));model.setItem(1, 2, new QStandardItem("上海"));model.setItem(2, 0, new QStandardItem("王五"));model.setItem(2, 1, new QStandardItem("28"));model.setItem(2, 2, new QStandardItem("广州"));tableView.setModel(&model);tableView.setWindowTitle("表格视图示例");tableView.resize(400, 250);tableView.show();return app.exec();
}

输出结果：

3.4 常用功能设置

四、列视图（Column View）

4.1 基本概念

  在 Qt 中，列视图（QColumnView）是一个专门用于浏览分层结构数据（如文件系统）的控件，它以多列级联展开的形式展示每一级子项。它是 Qt 的 Model/View 架构中的一部分，常见于例如 Mac OS Finder 样式的界面中，每一级目录（或层级）占据一个独立的列，用户点击某一项时，其子项会在右侧新列中显示。

基本特点：

• 展示层级结构数据（必须是树形结构模型，如 QDirModel、QStandardItemModel 或 QFileSystemModel）。
• 每一级展开为一列，水平滚动。
• 和 QTreeView 一样，要求模型提供父子关系。

4.2 常用类

4.3 使用示例

使用 QFileSystemModel 显示文件夹结构：

#include <QApplication>
#include <QColumnView>
#include <QFileSystemModel>int main(int argc, char *argv[]) {QApplication app(argc, argv);QColumnView *columnView = new QColumnView;QFileSystemModel *model = new QFileSystemModel;model->setRootPath(QDir::rootPath()); // 设置根路径columnView->setModel(model);columnView->setRootIndex(model->index(QDir::homePath())); // 设置初始显示目录columnView->setWindowTitle("QColumnView 示例 - 文件浏览器");columnView->resize(800, 400);columnView->show();return app.exec();
}

输出结果：

4.4 使用自定义树结构数据

#include <QApplication>
#include <QColumnView>
#include <QStandardItemModel>int main(int argc, char *argv[]) {QApplication app(argc, argv);QColumnView *columnView = new QColumnView;QStandardItemModel *model = new QStandardItemModel;QStandardItem *root = new QStandardItem("动物");QStandardItem *mammal = new QStandardItem("哺乳动物");mammal->appendRow(new QStandardItem("老虎"));mammal->appendRow(new QStandardItem("狮子"));QStandardItem *bird = new QStandardItem("鸟类");bird->appendRow(new QStandardItem("麻雀"));bird->appendRow(new QStandardItem("乌鸦"));root->appendRow(mammal);root->appendRow(bird);model->appendRow(root);columnView->setModel(model);columnView->setRootIndex(model->index(0, 0)); // 设定根节点columnView->setWindowTitle("QColumnView 示例 - 文件浏览器");columnView->resize(800, 400);columnView->show();return app.exec();
}

输出结果：

4.5 常用方法

4.6 与 QTreeView 的区别

五、撤销命令视图（Undo View）

5.1 基本概念

  在 Qt 中，撤销命令视图（QUndoView）是用于展示和管理命令模式撤销/重做操作历史记录的一个视图类。它配合 QUndoStack 或 QUndoGroup 使用，能够图形化地显示用户执行过的操作，并允许用户点击某个历史命令进行撤销或重做。

Qt 中的撤销框架基于命令模式，主要类如下：

5.2 使用示例

基本撤销命令视图：

自定义命令类

#include <QUndoCommand>
#include <QString>
#include <QDebug>class PrintCommand : public QUndoCommand {
public:PrintCommand(const QString &text) : m_text(text) {setText("Print: " + text); // 设置在 UndoView 中显示的文本}void undo() override {qDebug() << "Undo:" << m_text;}void redo() override {qDebug() << "Redo:" << m_text;}private:QString m_text;
};

创建主窗口并绑定 QUndoView

#include <QApplication>
#include <QUndoView>
#include <QUndoStack>
#include <QVBoxLayout>
#include <QPushButton>
#include <QWidget>int main(int argc, char *argv[]) {QApplication app(argc, argv);QWidget window;QVBoxLayout layout(&window);QUndoStack *undoStack = new QUndoStack(&window);QUndoView *undoView = new QUndoView(undoStack); // 绑定命令栈QPushButton *addButton = new QPushButton("添加命令");layout.addWidget(addButton);layout.addWidget(undoView);QObject::connect(addButton, &QPushButton::clicked, [&]() {static int count = 1;undoStack->push(new PrintCommand(QString("命令%1").arg(count++)));});window.setWindowTitle("QUndoView 示例");window.resize(300, 300);window.show();return app.exec();
}

输出结果：