【Qt】Item Widgets 多元素控件

Qt中提供的多元素控件有：

• QListWidget
• QListView
• QTableWidget
• QTableView
• QTreeWidget
• QTreeView

上述控件分为Widget和View，其区别如下：

以QTableWidget和QTableView为例

• QTableView是基于MVC(Model-View-Controller)设计的控件。QTableView自身不持有数据，只是实现界面效果。使用QTableView需要用户创建一个Model对象(比如QStandarModel)，并且把Model和QTableView关联起来，后续修改Model中的恶数据就会影响QTableView的显示；修改QTableView也会影响Model中的数据(双向绑定)
• QTableWidget则是QTableView的子类，对Model进行了封装，不需要我们手动创建Model对象，直接往QTableWidget中添加数据即可

目录

QListWidget

QListWidgetItem

QTableWidget

QTableWidgetItem

QTreeWidget

QTreeWidgetItem

---

QListWidget

QListWidget类是用于显示条目列表的控件。每个条目可以包含文本和可选的图标

---

核心属性 

属性	说明
currentRow	当前被选中的是第几行，下标从0开始
count	当前有多少行条目
sortingEnabled	是否允许排序
isWrapping	是否允许换行
itemAlignment	元素的对齐方式
selectRectVisible	被选中的元素矩形是否可见
spacing	元素之间的间隔

核心方法 

方法	说明
addItem(const QString &label) addItem(QListWidgetItem *item)	在列表末尾添加元素
currentItem()	获取当前选中的条目，返回值是QListWidgetItem*
setCurrentItem(QListWidgetItem *item)	设置选中哪个元素
setCurrentRow(int row)	设置选中第几行的条目
insertItem(const QString& label, int row) insertItem(QListWidgetItem *item, int row)	指定行插入元素，插入的元素顶替原先的位置 例如row = 0，那么新插入的元素下标将会为0
item(int row)	获取第row行的条目，返回值为QListWidgetItem *
takeItem(int row)	删除指定行的条目，返回值为QListWidgetItem *，被删除的条目

核心信号

信号	说明
currentItemChanged(QListWidgetItem *current, QListWidgetItem *old)	选中不同元素时会触发，参数是当前选中的元素和之前的元素 注意：在QListWidget最开始展示时就会触发该信号，但此时没有old，所以编写相应的槽函数需要对指针判空
currentRowChanged(int)	选中不同元素时触发，参数是当前选中的行数
itemClicked(QListWidgetItem *item)	点击某个元素时触发
itemDoubleClicked(QListWidgetItem *item)	双击某个元素时触发
itemActivated(QListWidgetItem *item)	某个元素被激活，点击和双击都会触发该信号
itemEntered(QListWidgetItem *item)	鼠标进入元素时触发
itemChanged(QListWidgetItem *item)	条目的内容被改变时触发

---

QListWidgetItem

XXItem是用于显示界面中单个条目的类，包含了条目的数据和显示设置，比如文本、图标等

这些Item本身并不是Model，更类似于View或是对Model数据的一种显示

核心方法

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

代码示例：使用QListWidget展示语言，QLineEdit输入新增语言，一个新增按钮和删除按钮

1. 使用Qt Designer添加所需控件

2. 编写widget.cpp，在构造函数中添加初始元素

Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget)
{ui->setupUi(this);//初始化添加几个元素ui->listWidget->addItem("C++");ui->listWidget->addItem("Java");ui->listWidget->addItem("Python");//设置提示词ui->lineEdit->setPlaceholderText("请输入要添加的元素");
}

3. 编写按钮的槽函数

//增加条目
void Widget::on_pushButton_add_clicked()
{//获取输入框的文本const QString &text = ui->lineEdit->text();if(text == nullptr) return;//获取当前选中的下标int row = ui->listWidget->currentRow();//将新条目插入到选中条目之后，若没选中，index = 0，为头插ui->listWidget->insertItem(row, text);
}
//删除条目
void Widget::on_pushButton_delete_clicked()
{//另一种获取选中元素的方法auto *item = ui->listWidget->currentItem();if(item == nullptr) return;int row = ui->listWidget->row(item);ui->listWidget->takeItem(row);
}

---

QTableWidget

QTableWidget类用于显示二维表格数据

---

核心方法

方法	说明
item(int row, int column)	通过指定行列获取元素，返回值为QTableWidgetItem *
setItem(int row, int column, QTableWidget *item)	通过指定行列，设置表格中的元素
currentItem()	返回被选中的元素，返回值为QTableWidgetItem *
currentRow()	返回被选中元素的行号，从0开始
currentColumn()	返回被选中元素的列号，从0开始
row(QTableWidgetItem *item)	获取指定 item 的行号
column(QTableWidgetItem *item)	获取指定 item 的列号
rowCount()	获取当前列表有几行
columnCount()	获取当前列表有几列
insertRow(int row)	在第 row 行插入新行 若 insertRow(0)，则新插入的行为第0行
insertColumn(int column)	在第 column 列插入新列
removeRow(int row)	删除第 row 行
removeColumn(int column)	删除第 column 列
setHorizontalHeaderItem(int column, QTableWidgetItem *item)	设置指定列的表头，即列属性
setVerticalHeader(int row, QTableWidgetItem *item)	设置指定行的表头，即行属性
setHorizontalHeaderLabels(QStringList &labels)	通过QStringList快速设置列属性
setVerticalHeaderLabels(QStringList &labels)	通过QStringList快速设置行属性

核心信号

信号	说明
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

QTableWidgetItem是二维单元格中表示和管理单元格数据的类，允许开发者在表格中操作和显示文本、图标和其他数据

核心方法

方法大致与QListWidgetItem相同，多了行列相关的方法

方法	说明
row()	获取该元素的行号
column()	获取该元素的列号
setText(const QString &)	设置文本
setTextAlignment(int)	设置文本对齐方式
setIcon(const QIcon &)	设置图标
setSelected(bool)	设置被选中
setSizeHints(cinst QSize &)	设置尺寸
setFont(const QFont &)	设置字体

代码示例：简易学生成绩表

1. 使用Qt Designer添加所需控件

2. 编写widget.cpp，在构造函数中初始化相关元素 

Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget)
{ui->setupUi(this);//设置提示词ui->lineEdit->setPlaceholderText("请输入新增列名");//插入4行3列for(int i = 0; i < 4; ++i)//4行ui->tableWidget->insertRow(i);for(int i = 0; i < 3; ++i)//3列ui->tableWidget->insertColumn(i);//设置列名QStringList colName = {"学号", "姓名", "成绩"};ui->tableWidget->setHorizontalHeaderLabels(colName);//初始数据ui->tableWidget->setItem(0, 0, new QTableWidgetItem("1001"));ui->tableWidget->setItem(0, 1, new QTableWidgetItem("张三"));ui->tableWidget->setItem(0, 2, new QTableWidgetItem("83"));ui->tableWidget->setItem(1, 0, new QTableWidgetItem("1002"));ui->tableWidget->setItem(1, 1, new QTableWidgetItem("小明"));ui->tableWidget->setItem(1, 2, new QTableWidgetItem("95"));ui->tableWidget->setItem(2, 0, new QTableWidgetItem("1003"));ui->tableWidget->setItem(2, 1, new QTableWidgetItem("小华"));ui->tableWidget->setItem(2, 2, new QTableWidgetItem("79"));
}

3. 编写按钮的槽函数

//新增一行
void Widget::on_pushButton_clicked()
{//尾插int row = ui->tableWidget->rowCount();ui->tableWidget->insertRow(row);
}
//新增一列，同时设置列名
void Widget::on_pushButton_2_clicked()
{const QString &text = ui->lineEdit->text();if(text == nullptr) return;//尾插一列并设置列名int col = ui->tableWidget->columnCount();ui->tableWidget->insertColumn(col);ui->tableWidget->setHorizontalHeaderItem(col, new QTableWidgetItem(text));
}
//删除一行
void Widget::on_pushButton_3_clicked()
{int row = ui->tableWidget->currentRow();ui->tableWidget->removeRow(row);
}
//删除一列
void Widget::on_pushButton_4_clicked()
{int col = ui->tableWidget->currentColumn();ui->tableWidget->removeColumn(col);
}

程序效果如下：

默认情况下，单元格的内容可以直接编辑。如果不想让用户编辑，可以设置

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

---

QTreeWidget

 QTreeWidget类用于显示树形结构，集成了数据模型和视图的功能

QTreeWidget不同于往常的多叉树，Qt隐藏了该多叉树的根节点，我们只能访问从根节点以下的节点。

根节点以下第一层是 topLevelItem ，通过QTreeWidget添加；再往下的节点t通过 QTreeWidgetItem 的child指针连接

---

核心方法

方法	说明
clear()	清空所有子节点
addTopLevelItem(QTreeWidgetItem *item)	新增顶层节点
topLevelItem(int index)	获取指定下标的顶层节点，返回值是 QTreeWidgetItem *
topLevelItemCount()	获取顶层节点的个数
indexOfTopLevelItem(QTreeWidgetItem *item)	查询指定节点在顶层节点中的下标
takeTopLevelItem(int index)	通过下标删除顶层节点，返回值是 QTreeWidgetItem * 表示被删除的节点
currentItem()	获取当前选中的节点，返回值是 QTreeWidgetItem *
setCurrentItem(QTreeWidgetItem *item)	设置选中的节点
setExpanded(bool)	展开/关闭节点 true为展开，false为关闭
setHeaderLabel(const QString &text)	设置QTreeWidget的header名称，如上述样例的"动物"

核心信号

信号	说明
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

QTreeWidgetItem类用于表示树状结构中的每个节点，可显示文本和图标等元素

在QTreeWidget中顶层元素和子元素其实都是QTreeWidgetItem，只是调用的接口不同，顶层元素通过QTreeWidget添加、删除、管理，子元素由顶层元素管理。

核心属性

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

核心方法

方法	说明
addChild(QTreeWidgetItem *child)	新增子节点
childCount()	子节点的个数
child(int index)	获取指定下标的子节点，返回值是QTreeWidgetItem *
takeChild(int index)	通过下标删除对应子节点
removeChild(QTreeWidgetItem *child)	通过指针删除对应子节点
parent()	获取父节点，返回值是QTreeWidgetItem *

代码示例：使用QTreeWidget 展示动物种类

1. 通过Qt Designer添加所需控件

2. 编写widget.cpp，通过构造函数初始化相关控件

Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget)
{ui->setupUi(this);ui->lineEdit->setPlaceholderText("请输入要添加的元素");//设置根节点名称ui->treeWidget->setHeaderLabel("动物");//添加顶层元素QTreeWidgetItem *item_cat = new QTreeWidgetItem(ui->treeWidget);item_cat->setText(0, "猫");ui->treeWidget->addTopLevelItem(item_cat);QTreeWidgetItem *item_dog = new QTreeWidgetItem(ui->treeWidget);item_dog->setText(0, "狗");ui->treeWidget->addTopLevelItem(item_dog);QTreeWidgetItem *item_bird = new QTreeWidgetItem(ui->treeWidget);item_bird->setText(0, "鸟");ui->treeWidget->addTopLevelItem(item_bird);
}

3. 编写按钮的槽函数

//添加顶层节点
void Widget::on_pushButton_clicked()
{const QString &text = ui->lineEdit->text();if(text.isEmpty()) return;//构造新节点并链入QTreeWidgetQTreeWidgetItem *newColumn = new QTreeWidgetItem(ui->treeWidget);newColumn->setText(0, text);ui->treeWidget->addTopLevelItem(newColumn);
}
//添加非顶层节点
void Widget::on_pushButton_2_clicked()
{const QString &text = ui->lineEdit->text();if(text.isEmpty())  return;//获取父亲节点QTreeWidgetItem *parent = ui->treeWidget->currentItem();if(parent == nullptr)   return;//构造新节点并链入parentQTreeWidgetItem *newColumn = new QTreeWidgetItem(parent);newColumn->setText(0, text);parent->addChild(newColumn);//添加完后直接展开parent->setExpanded(true);
}
//删除子项
void Widget::on_pushButton_3_clicked()
{QTreeWidgetItem *curItem = ui->treeWidget->currentItem();QTreeWidgetItem *parent = curItem->parent();if(parent == nullptr){//顶层元素int index = ui->treeWidget->indexOfTopLevelItem(curItem);ui->treeWidget->takeTopLevelItem(index);}elseparent->removeChild(curItem);//非顶层元素
}

结束语

感谢你的阅读，如果觉得本篇文章对你有所帮助的话，不妨点个赞支持一下博主，拜托啦，这对我真的很重要