QT跨平台应用程序开发框架（8）—— 多元素控件

所以要想数据不被丢失，就得需要和“学生管理系统”一样，实现一个“保存数据到文件”和“从文件读取数据”的两个操作，每次运行程序时读取文件数据，每次关闭程序时，在析构函数里添加保存文件的操作。QTreeWidget 表示一个树形控件，里面的每个元素都是一个 QTreeWidgetItem，这个类可以包含多个文本和图标，每个文本/图标为一个列。上述几个控件相关的操作，数据都是在内存中保存的，重新运行程序

小堃学编程

679人浏览 · 2025-07-15 10:14:21

小堃学编程 · 2025-07-15 10:14:21 发布

目录

一，关于多元素控件

二，QListWidget

2.1 主要方法

2.2 实现新增删除

三，Table Widget

3.1 主要方法

3.2 代码演示

四，Tree Widget

4.1 主要方法

4.2 代码演示

一，关于多元素控件

多元素控件就是一个控件里面包含了很多的元素，可能是字符串，也可能是复杂的数据结构、图片等等，多元素控件有很多，典型的有6个：

列表：QListWidget，QListView
表格：QTableWidget，QTableView
树形：QTreeWidget，QTreeView

可以发现，说是6个控件，其实是3个，只是两两一组而已

问题：xxWidget 和 xxView 是什么关系？

解答：

可以理解为 xxView 是很底层的实现，然后 xxWidget 是基于 xxView 的封装而来

xxView 是 MVC 结构的一种典型实现，但 xxView 只负责实现了食物，不负责数据如何存储显示，也不负责数据和视图之间的交互

因此程序猿需要自动实现 model 和 controller 部分来使用 xxView，比较麻烦

所以Qt 为我们提供了 xxWidget，为我们实现好了 model 和 controller 并提供了功能很方便的 API，我们直接用就好

问题：什么是MVC？

解答： MVC 全称 “Model-View-Controller”，是一种软件涉及典范，是软件开发中非常经典的一种软件结构

M：model，表示模型，或者叫数据，负责存取数据，并在数据变化时更新控制器

V：view，表示视图，或者叫界面，负责展示模型中的数据，并提供用户界面

C：Controller，表示控制器，是处理模型和视图之间的业务流程，接收用户输入，并调用模型和视图去完成用户的需求

二，QListWidget

2.1 主要方法

QListWidget 能够显示一个纵向的列表，并且每个选项都可以被选中，和下拉按钮行为类似

主要属性：

属性	说明
currentRow	当前被选中的是第几行
count	一共多少行
sortingEnabled	是否允许排序
isWrapping	是否允许换行
itemAlignment	元素的对齐方式
selectRectVisible	被选中的元素矩阵是否可见（默认背景蓝色）
spacing	元素之间的间隔

常用的函数如下：

函数	说明
addItem(const QString& label) addItem(QListWidgetItem* item)	列表中添加元素列表中的每一项称为一个item，具体的说通过 QListWidgetgetItme 类表示的
currentItem()	返回 QListWidgetgetItem* 表示当前选中的元素
setCurrentItem(QListWidgetItem* item)	设置选中哪个元素
setCurrentRow(int row)	设置选中第几行元素
insertItem(const QString& label, int row) insertItem(QListWidgetItem* item, int row)	在指定位置插入元素，插在指定位置之前
item(int row)	返回 QListWidgetItem*，表示第 row 行的元素
takeItem(int row)	删除指定行的元素，返回 QListWidgetItem* ，表示是哪个元素被删除了

常用的信号如下：

信号	说明
currentItemChanged(QListWidgetItem* current, QListWidgetItem* old)	选中不同元素时触发，参数是当前选中的元素和之前选中的元素
currentRowChanged(int)	选中不同元素时触发，参数是当前选中元素的行数
itemClicked(QListWidgetItem* item)	点击某个元素时触发
itemDoubleClicked(QListWidgetItem* item)	双击某个元素时触发
itemEntered(QListWidgetItem* item)鼠标进入元素时触发	鼠标进入元素时触发

上面说到了QListWidgetItem 类，这个类是负责表示 QListWidget 中的一个元素，本质上由“文本 + 图标”构成，常用方法如下：

方法	说明
setFont	设置字体
setIcon	设置图标
setHidden	设置隐藏
setSizeHint	设置尺寸
setSelected	设置是否选中
setText	设置文本
setTextAlignment	设置文本对齐方式

2.2 实现新增删除

先创建下列控件：

两个都可以，因为可以转换，如下：

代码如下：

#include "widget.h"
#include "ui_widget.h"
#include<QDebug>
#include<QShortcut>

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);
    
//    ui->listWidget->addItem("C++");
//    ui->listWidget->addItem("Pyhton");
//    ui->listWidget->addItem("Java");
      ui->listWidget->addItem(new QListWidgetItem("C++"));
      ui->listWidget->addItem(new QListWidgetItem("Python"));
      ui->listWidget->addItem(new QListWidgetItem("Java"));
      //两种方式都可以添加，也可以直接在ui界面例右键编辑项目添加
      //QListWidgetItem 也可以设置字体属性，图标，大小等等
}

Widget::~Widget()
{
    delete ui;
}

void Widget::on_pushButton_insert_clicked()
{
    const QString& text = ui->lineEdit->text(); //先获取输入框的内容
    ui->listWidget->addItem(text); //将内容添加到表格里
}

void Widget::on_pushButton_delete_clicked()
{
    int row = ui->listWidget->currentRow(); //先获取被选中的元素
    if(row < 0) return;
    ui->listWidget->takeItem(row);
}

效果如下：

三，Table Widget

3.1 主要方法

这个表示一个表格控件，简单来说就是就是类似二维数组的结构，表格中的每个单元格是一个 QTableWidgetItem 对象，常用方法如下：

方法	说明
item(int row, int column)	根据行数列数获取指定的 QtableWidgetItem*
item(int row, int column)	根据行数列数设置表格中的元素
currentItem()	返回被选中的元素 QTableWidgetItem*
currentRow()	返回被选中的元素是第几行
currentColumn()	返回被选中的元素第几列
row(QTableWidgetItem*)	获取指定 item 是第几行
column(QTableWidgetItem*)	获取指定 item 是第几列
rowCount()	获取行数
columnCount()	获取列数
insertRow(int row)	在第 row 行处插入新行
insertColumn(int column)	在第 column 行处插入新列
removeRow(int row)	删除第 row 行
removeColumn(int column)	删除第 column 行
setHorizontalHeaderItem(int column, QTableWidget*)	设置指定列的表头
setVerticalHeaderItem(introw, QTableWidget*)	设置指定行的表头

主要的信号如下：

信号	说明
cellClicked(int row, int column)	点击单元格时触发
cellDoubleClicked(int row, int column)	双击单元格时触发
cellEntered(int row, int column)	鼠标进入单元格时触发
currentCellChanged(int row, int column, int previousRow, int previousColumn)	选中不同单元格时触发

关于 QTableWidgetItem 和上面的 QListWidgetItem 类似，主要方法如下：

方法	说明
row()	获取当前是第几行
column()	获取当前是第几列
setText(const QString&)	设置文本
setTextAlignment(int)	设置文本对齐
setIcon(const QIcon&)	设置图标
setSelected(bool)	设置被选中
setSizeHints(const QSize&)	设置尺寸
setFont(const QFont&)	设置字体

3.2 代码演示

先创建下列控件：

我们先往表格里添加部分元素，在代码添加太麻烦，所以我们这里直接右键编辑项目添加：

所以下面我们也使用文件来进行初始化数据，通过代码初始化表格：

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);

    ui->tableWidget->insertRow(0);
    ui->tableWidget->insertRow(1);
    ui->tableWidget->insertRow(2);

    ui->tableWidget->insertColumn(0);
    ui->tableWidget->insertColumn(1);
    ui->tableWidget->insertColumn(2);

    //给列设置列名，行名同理
    ui->tableWidget->setHorizontalHeaderItem(0, new QTableWidgetItem("学号"));
    ui->tableWidget->setHorizontalHeaderItem(1, new QTableWidgetItem("姓名"));
    ui->tableWidget->setHorizontalHeaderItem(2, new QTableWidgetItem("年龄"));

    //给表格添加数据
    ui->tableWidget->setItem(0, 0, new QTableWidgetItem("1001"));
    ui->tableWidget->setItem(0, 1, new QTableWidgetItem("张三"));
    ui->tableWidget->setItem(0, 2, new QTableWidgetItem("20"));

    ui->tableWidget->setItem(1, 0, new QTableWidgetItem("1002"));
    ui->tableWidget->setItem(1, 1, new QTableWidgetItem("李四"));
    ui->tableWidget->setItem(1, 2, new QTableWidgetItem("21"));

    ui->tableWidget->setItem(2, 0, new QTableWidgetItem("1003"));
    ui->tableWidget->setItem(2, 1, new QTableWidgetItem("王五"));
    ui->tableWidget->setItem(2, 2, new QTableWidgetItem("19"));
}

四个槽函数实现如下：

void Widget::on_pushButton_addRow_clicked()
{
    int rowCount = ui->tableWidget->rowCount(); //获取总行数
    ui->tableWidget->insertRow(rowCount); //在最后一行新增行，这个参数是下标，所以不需要 + 1
}

void Widget::on_pushButton_subRow_clicked()
{
    int subRow = ui->tableWidget->currentRow(); //获取到选中的行号
    ui->tableWidget->removeRow(subRow); //删除这一行
}

void Widget::on_pushButton_addColumn_clicked()
{
    int columnCount = ui->tableWidget->columnCount(); //获取总列数
    ui->tableWidget->insertColumn(columnCount); //在最后一列添加列
    const QString& text = ui->lineEdit->text(); //获取输入框里的列名
    ui->tableWidget->setHorizontalHeaderItem(columnCount, new QTableWidgetItem(text)); //给新增列添加列名
}

void Widget::on_pushButton_subColumn_clicked()
{
    int subColumn = ui->tableWidget->currentColumn(); //获取选中的列号
    ui->tableWidget->removeColumn(subColumn);
}

效果如下：

默认情况下表格内容是可编辑的，但是如果不想让用户编辑，可以设置下列属性：

ui->tableWidget->setEditTriggers(QAbstractItemView::NoEditTriggers);

四，Tree Widget

4.1 主要方法

QTreeWidget 表示一个树形控件，里面的每个元素都是一个 QTreeWidgetItem，这个类可以包含多个文本和图标，每个文本/图标为一个列

构建一颗树是先给 QTreeWidget 设置主节点，然后再添加子节点，就和二叉树或者多叉树那样

QTreeWidget 常用的方法如下：

方法	说明
clear	清空所有子节点
addTopLevelItem(QTreeWidgetItem* item)	新增顶层节点
topLevelItem(int index)	获取指定下标的顶层节点
topLevelItemCount()	获取顶层节点个数
indexOfTopLevelItem(QTreeWidgetItem* item)	查询指定节点是顶层节点中的下标
takeTopLevelItem(int index)	删除指定的顶层节点返回QTreeWidgetItem*表示被删除的元素
currentItem()	获取到当前选中的节点，返回QTreeWidgetItem*
setCurrentItem(QTreeWidgetItem* item)	选中指定节点
setExpanded(bool)	展开/关闭节点
setHeaderLabel(constQString& text)	设置TreeWidget 的 header 名称

关于顶层节点：

上面的顶层节点，并不是单指根节点，因为QTreeWidget 的树形结构，没有体现出根节点，是从根节点的下一层子节点开始计算的，如下图：

QTreeWidget 主要信号：

信号	说明
currentItemChanged(QTreeWidgetItem* current, QTreeWidgetItem* old)	切换选中元素时触发
itemClicked(QTreeWidgetItem* item, int col)	点击元素时触发
itemDoubleClicked(QTreeWidgetItem* item, int col)	双击元素时触发
itemEntered(QTreeWidgetItem* item, int col)	鼠标进入时触发
itemExpanded(QTreeWidgetItem* item)	元素被展开时触发
itemCollapsend(QTreeWidgetItem* item)	元素被折叠时触发

QTreeWidgetItem类的核心属性如下：

属性	说明
text	持有的文本
textAlignment	文本对齐方式
icon	持有的图表
font	文本字体
hidden	是否隐藏
disabled	是否禁用
expand	是否展开
sizeHint	尺寸大小
selected	是否选中

QTreeWidgetItem 核心方法：

方法	说明
addChild(QTreeWidgetItem* child)	新增子节点
childCount()	子节点的个数
child(int index)	获取指定下标的子节点.返回QTreeWidgetItem*
takeChild(int index)	删除对应下标的子节点
removeChild(QTreeWidgetItem* child)	删除对应的子节点
parent()	获取该元素的父节点

4.2 代码演示

先创建下列控件：

初始化数据我们可以通过 ui界面右键编辑项目直接添加，也可以通过代码添加，和上面的表格是一样的，下面是通过代码初始化元素的代码：

//篇幅原因这里也只添加部分元素
Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);
    ui->treeWidget->setHeaderLabel("动物"); //设置根节点名称

    //添加顶层节点
    QTreeWidgetItem* item1 = new QTreeWidgetItem();
    item1->setText(0, "猫"); //每个节点都可设置多个列，为了方便演示就只设置一列
    ui->treeWidget->addTopLevelItem(item1); //添加进顶层节点

    QTreeWidgetItem* item2 = new QTreeWidgetItem();
    item2->setText(0, "狗");
    ui->treeWidget->addTopLevelItem(item2);

    QTreeWidgetItem* item3 = new QTreeWidgetItem();
    item3->setText(0, "鸟");
    ui->treeWidget->addTopLevelItem(item3);

    //添加子节点
    QTreeWidgetItem* item4 = new QTreeWidgetItem();
    item4->setText(0, "黑猫");
    item1->addChild(item4);

    QTreeWidgetItem* item5 = new QTreeWidgetItem();
    item5->setText(0, "狸花猫");
    item1->addChild(item5);

    QTreeWidgetItem* item6 = new QTreeWidgetItem();
    item6->setText(0, "橘猫");
    item1->addChild(item6);
}

下面是三个按钮的槽函数实现：

void Widget::on_pushButton_insertTopLevelItem_clicked()
{
    const QString& text = ui->lineEdit->text(); //获取输入框内容
    QTreeWidgetItem* item = new QTreeWidgetItem();//构造 QTreeWidget 对象
    item->setText(0, text);
    ui->treeWidget->addTopLevelItem(item); //添加进顶层节点中
}

void Widget::on_pushButton__insertItem_clicked()
{
    QTreeWidgetItem* currentItem = ui->treeWidget->currentItem(); //获取当前选中的节点
    if(currentItem == nullptr) return;
    const QString& text = ui->lineEdit->text(); //获取输入框内容
    QTreeWidgetItem* item = new QTreeWidgetItem();//构造 QTreeWidget 对象
    item->setText(0, text);
    currentItem->addChild(item); //插入到选中节点的子节点中
}

void Widget::on_pushButton_deleteItem_clicked()
{
    QTreeWidgetItem* currentItem = ui->treeWidget->currentItem(); //获取当前选中的节点
    if(currentItem == nullptr) return;
    QTreeWidgetItem* parent = currentItem->parent(); //要先获取父节点
    if(parent == nullptr) //如果父元素为空，那么说明这是一个顶层元素
    {
        int index = ui->treeWidget->indexOfTopLevelItem(currentItem); //要先获取顶层元素的下标
        ui->treeWidget->takeTopLevelItem(index); //通过顶层元素进行删除
    }
    else //普通元素
    {
        parent->removeChild(currentItem); //普通元素直接删除即可
    }
}

上述几个控件相关的操作，数据都是在内存中保存的，重新运行程序后，数据都会重置

所以要想数据不被丢失，就得需要和“学生管理系统”一样，实现一个“保存数据到文件”和“从文件读取数据”的两个操作，每次运行程序时读取文件数据，每次关闭程序时，在析构函数里添加保存文件的操作