目录1. List Widget代码示例使用 ListWidget增删选2. Table Widget代码示例使用 QTableWidget3. Tree Widget代码示例使用 QTreeWidgetQt 中提供的多元素控件QListWidgetQListViewQTableWidgetQTableViewQTreeWidgetQTreeViewxxWidget 和 xxView 之间的区别以 QTableWidget 和 QTableView 为例。QTableView 是基于 MVC 设计的控件。QTableView 自身不持有数据。使用 QTableView 的时候需要用户创建一个 Model 对象比如 QStandardItemModel并且把 Model 和 QTableView 关联起来。后续修改 Model 中的数据就会影响 QTableView 的显示修改 QTableView 的显示也会影响到 Model 中的数据双向绑定。QTableWidget 则是 QTableView 的子类对 Model 进行了封装。不需要用户手动创建 Model 对象直接就可以往 QTableWidget 中添加数据了。1. List Widget使用 QListWidget 能够显示一个纵向的列表每个选项都可以被选中。属性说明currentRow当前被选中的是第几行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)在指定的位置插入元素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设置文本对齐方式代码示例使用 ListWidget增删选在界面上创建一个 ListView右键变形为ListWidget再创建一个 lineEdit 和两个按钮。注意ListWidget 是 ListView 的子类功能比 ListView 更丰富。咱们使用 ListWidget 即可。编写 widget.cpp在构造函数中添加初始元素编写 listWidget 的 slot 函数编写按钮的 slot 函数这里需要给 widget.h 前面加上 #includeWidget::Widget(QWidget *parent) : QWidget(parent) , ui(new Ui::Widget) { ui-setupUi(this); ui-listWidget-addItem(C); ui-listWidget-addItem(Java); ui-listWidget-addItem(Python); } // 此处需要判定 current 和 previous 非空 // 初始情况下是没有元素选中的就导致这俩指针可能是 NULL。 void Widget::on_listWidget_currentItemChanged(QListWidgetItem *current, QListWidgetItem *previous) { if (current ! NULL previous ! NULL) { qDebug() 当前选中: current-text() 之前选中: previous-text(); } } void Widget::on_pushButton_clicked() { // 获取到输⼊框的内容 const QString text ui-lineEdit-text(); if (text.isEmpty()) { return; } ui-listWidget-addItem(text); } void Widget::on_pushButton_2_clicked() { // 获取当前被选中的元素 int row ui-listWidget-currentRow(); // 删除这⼀⾏ ui-listWidget-takeItem(row); }2. Table Widget使用 QTableWidget 表示一个表格控件。一个表格中包含若干行每一行又包含若干列。表格中的每个单元格是一个 QTableWidgetItem 对象。QTableWidget 核心方法方法说明item(int row, int column)根据行数列数获取指定的 QTableWidgetItem*setItem(int row, int column, QTableWidgetItem*)根据行数列数设置表格中的元素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, QTableWidgetItem*)设置指定列的表头setVerticalHeaderItem(int row, QTableWidgetItem*)设置指定行的表头QTableWidgetItem 核心信号信号说明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 核心方法方法说明row()获取当前是第几行column()获取当前是第几列setText(const QString)设置文本setTextAlignment(int)设置文本对齐setIcon(const QIcon)设置图标setSelected(bool)设置被选中setSizeHints(const QSize)设置尺寸setFont(const QFont)设置字体代码示例使用 QTableWidget在界面上创建 QTableWidget 和三个按钮一个输入框注意QTableWidget 是 QTableView 的子类功能比 QTableView 更丰富。咱们使用 QTableWidget 即可编写 widget.cpp 构造函数构造表格中的初始数据。编写按钮的 slot 函数执行程序即可完成表格的基本操作。默认情况下单元格中的内容直接就是可编辑的。如果不想让用户编辑可以设置ui-tableWidget-setEditTriggers(QAbstractItemView::NoEditTriggers);Widget::Widget(QWidget *parent) : QWidget(parent) , ui(new Ui::Widget) { ui-setupUi(this); // 创建 3 ⾏ ui-tableWidget-insertRow(0); ui-tableWidget-insertRow(1); ui-tableWidget-insertRow(2); // 创建 3 列 ui-tableWidget-insertColumn(0); ui-tableWidget-insertColumn(1); ui-tableWidget-insertColumn(2); // 给 3 列设定列名 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() { // 1. 获取到⾏数 int rowCount ui-tableWidget-rowCount(); // 2. 插⼊新⾏ ui-tableWidget-insertRow(rowCount); } void Widget::on_pushButton_delRow_clicked() { // 1. 获取选中的⾏号 int curRow ui-tableWidget-currentRow(); // 2. 删除对应⾏ ui-tableWidget-removeRow(curRow); } void Widget::on_pushButton_addCol_clicked() { // 1. 获取到列数 int colCount ui-tableWidget-columnCount(); // 2. 插⼊新列 ui-tableWidget-insertColumn(colCount); // 3. 设置列名 const QString name ui-lineEdit-text(); ui-tableWidget-setHorizontalHeaderItem(colCount, new QTableWidgetItem(name)); } void Widget::on_pushButton_delCol_clicked() { // 1. 获取选中的列号 int curCol ui-tableWidget-currentColumn(); // 2. 删除对应的列 ui-tableWidget-removeColumn(curCol); }3. Tree Widget使用 QTreeWidget 表示一个树形控件。里面的每个元素都是一个 QTreeWidgetItem每个 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(const QString text)设置 TreeWidget 的 header 名称QTreeWidget 核心信号信号说明currentItemChanged(QTreeWidgetItem* current, QTreeWidgetItem* old)切换选中元素时触发itemClicked(QTreeWidgetItem* item, int col)点击元素时触发itemDoubleClicked(QTreeWidgetItem* item, int col)双击元素时触发itemEntered(QTreeWidgetItem* item, int col)鼠标进入时触发itemExpanded(QTreeWidgetItem* item)元素被展开时触发itemCollapsed(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()获取该元素的父节点代码示例使用 QTreeWidget在界面上创建一个 TreeView右键变形为TreeWidget再创建一个 lineEdit 和两个按钮。注意TreeWidget 是 TreeView 的子类功能比 TreeView 更丰富。咱们使用 TreeWidget 即可。编写代码构造初始数据编写代码实现按钮的 slot 函数执行程序可以针对树形框进行编辑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); }// 添加到顶层元素中 void Widget::on_pushButton_clicked() { // 获取输⼊框内容 const QString text ui-lineEdit-text(); if (text.isEmpty()) { return; } // 添加到顶层节点中 QTreeWidgetItem* item new QTreeWidgetItem(); item-setText(0, text); ui-treeWidget-addTopLevelItem(item); } // 添加到选中元素中 void Widget::on_pushButton_2_clicked() { // 获取输⼊框内容 const QString text ui-lineEdit-text(); if (text.isEmpty()) { return; } // 获取到当前选中的节点 QTreeWidgetItem* currentItem ui-treeWidget-currentItem(); if (currentItem NULL) { return; } // 构造新的 item QTreeWidgetItem* newItem new QTreeWidgetItem(); newItem-setText(0, text); // 添加 item 到选中节点 currentItem-addChild(newItem); // 展开⽗节点 currentItem-setExpanded(true); } // 删除选中元素 void Widget::on_pushButton_3_clicked() { // 获取到当前选中的节点 QTreeWidgetItem* currentItem ui-treeWidget-currentItem(); if (currentItem NULL) { return; } // 获取当前节点的⽗节点 QTreeWidgetItem* parent currentItem-parent(); if (parent NULL) { // 顶层节点 int index ui-treeWidget-indexOfTopLevelItem(currentItem); ui-treeWidget-takeTopLevelItem(index); } else { // ⾮顶层节点 parent-removeChild(currentItem); } }