文章目录
- 一、清单视图(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_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();
}
输出结果: