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_OBJECT

public:
    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();
}

输出结果：