Qt開發：項目視圖(Item Views)的介紹和使用

文章目錄

- 一、清單視圖（List View）
- - 1.1 基本概念
  - 1.2 使用示例（文字列表）
  - 1.3 圖標+文字（圖標模式）
  - 1.4 常用設置
  - 1.5 完整示例
- 二、樹視圖（Tree View）
- - 2.1 基本概念
  - 2.2 常用類簡介
  - 2.3 快速使用示例
  - 2.4 常用功能配置
- 三、表視圖（Table View）
- - 3.1 基本概念
  - 3.2 常用類
  - 3.3 快速使用示例
  - 3.4 常用功能設置
- 四、列視圖（Column View）
- - 4.1 基本概念
  - 4.2 常用類
  - 4.3 使用示例
  - 4.4 使用自定義樹結構數據
  - 4.5 常用方法
  - 4.6 與 QTreeView 的區別
- 五、撤銷命令視圖（Undo View）
- - 5.1 基本概念
  - 5.2 使用示例

一、清單視圖（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 中的撤銷框架基于命令模式，主要類如下：
- List item

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