【QT】ItemWidget (QListWidget、QTreeWidget、QTableWidget)

alive903

于 2025-03-31 09:00:00 发布

阅读量1.4k

点赞数 47

分类专栏： QT 文章标签： qt5 listwidget treewidget tablewidget c++ itemwidget

本文链接：https://blog.youkuaiyun.com/weixin_56167571/article/details/146712913

版权

QT 专栏收录该内容

16 篇文章

订阅专栏

`QListWidget`（列表控件）

QListWidget列表控件，用于显示和管理列表项（如文本、图片、图标等）。它继承自 QListView，并且具有内置的模型视图结构，简化了数据处理，适用于简单的列表场景。

属性设置介绍

✅ 如果想隐藏边框，可以将 frameShape 设为 NoFrame。
✅ 可以让滚动条一直显示：
- verticalScrollBarPolicy = ScrollBarAlwaysOn
- horizontalScrollBarPolicy = ScrollBarAlwaysOn

✅ 如果想支持多选，可以修改：

selectionMode = MultiSelection（多选）
selectionMode = ExtendedSelection（Shift + Click 选择范围）

✅ 如果想支持拖放排序：

dragEnabled = true
dragDropMode = InternalMove

✅ 修改 flow 可以调整排列方向

TopToBottom：从上到下（默认）
LeftToRight：从左到右（横向排列）

✅ 修改 viewMode 可以改变显示模式

ListMode：标准列表（单列）
IconMode：网格排列（适合文件浏览）

常用方法

方法	功能
`addItem(QString)`	添加单个列表项（文本）
`addItem(QListWidgetItem *)`	添加带属性的 `QListWidgetItem`项
`addItems(QStringList)`	添加多个文本项
`insertItem(int row, QString)`	在指定行插入新项
`takeItem(int row)`	移除指定行的项
`item(int row)`	获取指定行的项
`clear()`	清空所有项
`count()`	获取当前列表的项数
`setCurrentRow(int row)`	设置当前选中项
`currentItem()`	获取当前选中的项
`selectedItems()`	获取所有选中的项

信号与槽

信号	触发时机
`itemClicked(QListWidgetItem *item)`	单击项目时触发
`itemDoubleClicked(QListWidgetItem *item)`	双击项目时触发
`itemSelectionChanged()`	选中项目更改时触发
`currentItemChanged(QListWidgetItem current, QListWidgetItem previous)`	当前选中项目改变时触发

综合示例

UI 设计师界面设计

mainwodow.h

mainwindow.cpp

#include "mainwindow.h"
#include "ui_mainwindow.h"
#include <QDebug>
#include <QListWidget>
#include <QMessageBox>
MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
    , ui(new Ui::MainWindow)
{
    ui->setupUi(this);
    //添加单个项目
    ui->listWidget->addItem("雷军");
    ui->listWidget->addItem("马斯克");
    //添加带属性的项目
    QListWidgetItem *item = new QListWidgetItem("man");
    item->setIcon(QIcon(":/image/man.jpg"));
    item->setToolTip("这是man");
    //设置图标大小
    ui->listWidget->setIconSize(QSize(30,30));
    ui->listWidget->addItem(item);

    //添加多个项目
    QStringList itemList = {"马云","马化腾","余承东","阿诺","蔡徐坤","周杰伦","汪峰"};
    ui->listWidget->addItems(itemList);

}

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

//点击item时触发
void MainWindow::on_listWidget_itemClicked(QListWidgetItem *item)
{
    qDebug()<<"你单击的列表项文本内容是: "<<item->text();
}

//通过索引删除item
void MainWindow::on_pushButton_clicked()
{
    //获取你选择的索引号
    int num = ui->spinBox->value();
    //删除列表项(删除后重新从0索引开始计算)
    ui->listWidget->takeItem(num);
}

//通过名字删除
void MainWindow::on_pushButton_2_clicked()
{
    //获取单行输入框输入的人名
    QString name = ui->lineEdit->text();
    //通过人名找到对应的列表项指针
    auto ret = ui->listWidget->findItems(name,Qt::MatchContains);

    //判断这个人名对应的列表项是否存在
    if(!ret.empty())
    {
        //循环删除所有重复的选项
        for(int i = 0; i < ret.size();i++)
        {
            //通过列表项指针得到对应的索引号
            int num = ui->listWidget->row(ret.at(i));
            //删除这个列表项
            ui->listWidget->takeItem(num);
        }
    }else {
        QMessageBox::warning(this,"不存在","sorry,没有你要删除的人");
    }
}

效果

你还可以添加带复选框的列表项

QListWidgetItem *item = new QListWidgetItem("复选框项目");
item->setCheckState(Qt::Unchecked);  // 初始未选中
ui->listWidget->addItem(item);

//检测复选框变化
void MainWindow::onItemClicked(QListWidgetItem *item)
{
    if (item->checkState() == Qt::Checked) {
        qDebug() << item->text() << "已选中";
    } else {
        qDebug() << item->text() << "未选中";
    }
}

`QTreeWidget`（树状列表）

与ListWidget不同的是TreeWidget支持父子关系，而ListWidget是一维列表，每个item是平级的，因此TreeWidget非常适合用来展示层级结构如文件系统、目录等。

属性设置介绍

这里只介绍QTreeWidget独有的属性，其他均和listWidget一致

常用方法

功能	方法	示例
设置表头	`setHeaderLabels(QStringList &labels)`	`treeWidget->setHeaderLabels("文件列表");`
添加根节点	`addTopLevelItem(QTreeWidgetItem*)`	`tree->addTopLevelItem(item);`
添加子节点	`addChild(QTreeWidgetItem *)`	`parent->addChild(child);`
查找顶层节点	`findItems(QString &text,Qt::MatchFlags flags, int column = 0)`	`treeWidget>findItems(str,Qt::MatchContains);`
获取根节点数量	`topLevelItemCount()`	`tree->topLevelItemCount();`
获取指定根节点	`topLevelItem(int index)`	`tree->topLevelItem(0);`
获取子节点数量	`childCount()`	`item->childCount();`
获取子节点	`child(int index)`	`item->child(0);`
获取/设置文本	`text(int column)` / `setText(int column, QString text)`	`item->setText(0, "Node");`
设置复选框	`setCheckState(int column, Qt::CheckState state)`	`item->setCheckState(0, Qt::Checked)`

findItems无法查找子节点，因此需要查找子节点需要自己遍历顶层节点下的所有子节点。

信号与槽

信号	用途
`itemClicked()`	点击节点
`itemDoubleClicked()`	双击节点
`currentItemChanged()`	选中项变化
`itemChanged()`	节点文本/复选框状态变化
`itemExpanded()`	展开节点
`itemCollapsed()`	折叠节点
`itemSelectionChanged()`	选中的节点变化
`itemEntered()`	鼠标悬停

综合示例

UI 设计师界面设计

mainwindow.h

#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include <QMainWindow>
#include <QTreeWidgetItem>
QT_BEGIN_NAMESPACE
namespace Ui {
class MainWindow;
}
QT_END_NAMESPACE

class MainWindow : public QMainWindow
{
    Q_OBJECT

public:
    MainWindow(QWidget *parent = nullptr);
    ~MainWindow();

private slots:
    void on_treeWidget_itemDoubleClicked(QTreeWidgetItem *item, int column);

    void on_pushButton_clicked();

private:
    Ui::MainWindow *ui;
};
#endif // MAINWINDOW_H

mainwindow.cpp

#include "mainwindow.h"
#include "ui_mainwindow.h"
#include <QDebug>
#include <QMessageBox>
MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
    , ui(new Ui::MainWindow)
{
    ui->setupUi(this);

    //第一步：设置水平头
    ui->treeWidget->setHeaderLabel("QQ好友");

    //第二步：添加根节点--》分组名字
    QStringList list1;
    list1.append("小学同学");
    QTreeWidgetItem *item1=new QTreeWidgetItem(list1);
    ui->treeWidget->addTopLevelItem(item1);

    QStringList list2;
    list2.append("篮球群");
    QTreeWidgetItem *item2=new QTreeWidgetItem(list2);
    ui->treeWidget->addTopLevelItem(item2);

    QStringList list3;
    list3.append("王者荣耀群");
    QTreeWidgetItem *item3=new QTreeWidgetItem(list3);
    ui->treeWidget->addTopLevelItem(item3);

    //第三步：添加子节点(拉人进分组)
    QStringList list20;
    list20.append("科比");
    QTreeWidgetItem *item20=new QTreeWidgetItem(list20);
    //设置图标
    item20->setIcon(0,QIcon("C:/Users/28494/Desktop/gif录制/man.jpg"));
    //调整图标大小
    ui->treeWidget->setIconSize(QSize(28,28));

    item2->addChild(item20);
    QStringList list21;
    list21.append("姚明");
    QTreeWidgetItem *item21=new QTreeWidgetItem(list21);
    item2->addChild(item21);
}

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

void MainWindow::on_treeWidget_itemDoubleClicked(QTreeWidgetItem *item, int column)
{
    //获取你双击列表项文本内容
    qDebug()<<"列号: "<<column;
    qDebug()<<"你双击是: "<<item->text(column);
}


void MainWindow::on_pushButton_clicked()
{
    QString str = ui->lineEdit->text();  // 获取要查找的节点名称

    // 遍历所有顶层节点
    for (int i = 0; i < ui->treeWidget->topLevelItemCount(); ++i) {
        QTreeWidgetItem *parent = ui->treeWidget->topLevelItem(i);

        // 遍历该顶层节点的所有子节点
        for (int j = 0; j < parent->childCount(); ++j) {
            QTreeWidgetItem *child = parent->child(j);

            if (child->text(0) == str) {  // 找到匹配的子节点
                delete parent->takeChild(j);  // 删除子节点
                qDebug() << "已删除节点: " << str;
                return;  // 只删除一个，删除后立即退出
            }
        }
    }

    QMessageBox::warning(this, "提示", "未找到该子节点");
}

`QTbaleWidget`（表格列表）

QTableWidget 是 QTableView 的子类，它用于显示 基于表格的二维数据，并且 不需要手动创建 QAbstractTableModel，非常适合 小型数据展示。

属性设置介绍

常用方法

函数	作用	示例代码
`QTableWidget(int rows, int columns, QWidget *parent = nullptr)`	构造函数，创建一个表格控件，指定初始行数和列数	`QTableWidget *tableWidget = new QTableWidget(3, 3, this);`
`setRowCount(int count)`	设置表格的行数	`tableWidget->setRowCount(5);`
`setColumnCount(int count)`	设置表格的列数	`tableWidget->setColumnCount(3);`
`setHorizontalHeaderLabels(const QStringList &labels)`	设置水平表头（列标题）	`tableWidget->setHorizontalHeaderLabels({"姓名", "年龄", "性别"});`
`setVerticalHeaderLabels(const QStringList &labels)`	设置垂直表头（行标题）	`tableWidget->setVerticalHeaderLabels({"A", "B", "C"});`
`setItem(int row, int column, QTableWidgetItem *item)`	在指定单元格设置文本内容	`tableWidget->setItem(0, 0, new QTableWidgetItem("张三"));`
`item(int row, int column)`	获取指定单元格的QTableWidgetItem	`QTableWidgetItem *item = tableWidget->item(0, 0);`
`setCellWidget(int row, int column, QWidget *widget)`	在单元格中添加控件（如按钮、复选框等）	`tableWidget->setCellWidget(0, 1, new QPushButton("点击"));`
`cellWidget(int row, int column)`	获取单元格中的控件	`QWidget *widget = tableWidget->cellWidget(0, 1);`
`insertRow(int row)`	在指定位置插入新行	`tableWidget->insertRow(2);`
`insertColumn(int column)`	在指定位置插入新列	`tableWidget->insertColumn(1);`
`removeRow(int row)`	删除指定行	`tableWidget->removeRow(1);`
`removeColumn(int column)`	删除指定列	`tableWidget->removeColumn(0);`
`clearContents()`	清空所有单元格内容（不删除表头和行列）	`tableWidget->clearContents();`
`clear()`	清空整个表格（包括行列和表头）	`tableWidget->clear();`
`resizeColumnsToContents()`	自动调整列宽适应内容	`tableWidget->resizeColumnsToContents();`
`resizeRowsToContents()`	自动调整行高适应内容	`tableWidget->resizeRowsToContents();`
`setSortingEnabled(bool enable)`	是否启用排序（点击表头排序）	`tableWidget->setSortingEnabled(true);`
`sortItems(int column, Qt::SortOrder order`	按指定列排序	`tableWidget->sortItems(0, Qt::AscendingOrder);`
`setSpan(int row, int column, int rowSpan, int columnSpan)`	合并单元格	`tableWidget->setSpan(0, 0, 2, 1);`

`QTableWidgetItem`常用方法与构造

QTableWidgetItem 是 QTableWidget 中的一个重要类，它表示表格中的一个单元格项，可以用来设置单元格的文本、图标、状态等。

函数	作用	示例代码
`**<font style="color:rgb(36, 41, 47);">QTableWidgetItem(const QString &text)`	构造函数：创建一个显示文本的单元格项	`QTableWidgetItem *item = new QTableWidgetItem("张三");`
`setText(const QString &text)`	设置单元格项的文本	`item->setText("李四");`
`text()`	获取单元格项的文本	`qDebug() << item->text();`
`setIcon(const QIcon &icon)`	设置单元格项的图标	`item->setIcon(QIcon(":/images/icon.png"));`
`icon()`	获取单元格项的图标	`QIcon icon = item->icon();`
`setFlags(Qt::ItemFlags flags)`	设置单元格项的标志，如是否可编辑	`item->setFlags(Qt::ItemIsEditable);`
`setBackground(const QBrush &brush)`	设置单元格的背景色	`item->setBackground(QBrush(Qt::yellow));`
`setTextAlignment(Qt::Alignment alignment)`	设置单元格文本的对齐方式	`item->setTextAlignment(Qt::AlignCenter);`

信号与槽

综合示例

UI 设计师界面设计

mainwindow.h

#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include <QMainWindow>
#include <QTableWidgetItem>
QT_BEGIN_NAMESPACE
namespace Ui {
class MainWindow;
}
QT_END_NAMESPACE

class MainWindow : public QMainWindow
{
    Q_OBJECT

public:
    MainWindow(QWidget *parent = nullptr);
    ~MainWindow();

private slots:
    void on_tableWidget_cellClicked(int row, int column);

    void on_tableWidget_itemClicked(QTableWidgetItem *item);

    void on_pushButton_clicked();

private:
    Ui::MainWindow *ui;
};
#endif // MAINWINDOW_H

mainwindow.cpp

#include "mainwindow.h"
#include "ui_mainwindow.h"
#include <QDebug>
MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
    , ui(new Ui::MainWindow)
{
    ui->setupUi(this);
    //第一步：设置表格的列数--》三列  姓名  成绩  学校
    ui->tableWidget->setColumnCount(3); //3列

    //第二步：设置字段名
    QStringList list;
    list.append("姓名");
    list.append("成绩");
    list.append("学校");
    ui->tableWidget->setHorizontalHeaderLabels(list);

    //第三步：设置表格的行数
    ui->tableWidget->setRowCount(10);

    //第四步：添加文本内容
    QTableWidgetItem *item00=new QTableWidgetItem(QIcon("C:/Users/Administrator/Desktop/share/lj.jpg"),"雷军");
    item00->setTextAlignment(Qt::AlignHCenter); //设置对齐方式,居中
    ui->tableWidget->setItem(0,0,item00);
    QTableWidgetItem *item01=new QTableWidgetItem("100");
    item01->setTextAlignment(Qt::AlignHCenter); //设置对齐方式,居中
    ui->tableWidget->setItem(0,1,item01);
    QTableWidgetItem *item02=new QTableWidgetItem("武汉大学");
    item02->setTextAlignment(Qt::AlignHCenter); //设置对齐方式,居中
    ui->tableWidget->setItem(0,2,item02);

    //设置列宽，行高
    ui->tableWidget->setColumnWidth(0,150);  //列宽
    ui->tableWidget->setColumnWidth(1,150);  //列宽
    ui->tableWidget->setColumnWidth(2,150);  //列宽

    //拓展拓展，不知道也没关系，表格列表框可以添加任意组件到单元格
    QPushButton *bt1=new QPushButton("按钮");
    //把按钮添加到单元格
    ui->tableWidget->setCellWidget(1,0,bt1);
}

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

void MainWindow::on_tableWidget_cellClicked(int row, int column)
{
    qDebug()<<"行列:  "<<row<<"  "<<column;
}


void MainWindow::on_tableWidget_itemClicked(QTableWidgetItem *item)
{
    qDebug()<<"列表项的文本内容: "<<item->text();
}


//删除列表项，QT所有的删除有关的方法，基本上都是  removexxx  takexxx
void MainWindow::on_pushButton_clicked()
{
    //获取行下标
    QString r=ui->lineEdit->text();
    //获取列下标
    QString c=ui->lineEdit_2->text();
    //依据行列下标删除单元格内容
    ui->tableWidget->takeItem(r.toInt(),c.toInt());

}