【QT控件】多元素控件详解

uyeonashi

已于 2025-06-08 22:30:38 修改

阅读量945

点赞数 26

CC 4.0 BY-SA版权

分类专栏： QT 文章标签： qt 开发语言 c++ 学习

于 2025-06-08 16:43:01 首次发布

本文链接：https://blog.csdn.net/uyeonashi/article/details/148513246

QT 专栏收录该内容

17 篇文章

订阅专栏

一、List Widget

二、Table Widget

三、Tree Widget

QT专栏：QT_uyeonashi的博客-CSDN博客

一、List Widget

使用 QListWidget 能够显示一个纵向的列表. 形如:

每个选项都可以被选中.

核心属性

核心方法

核心信号

在上述介绍中, 涉及到一个关键的类, QListWidgetItem .
这个类表示 QListWidget 中的一个元素.
核心方法如下, 本质上就是一个 "文本+图标" 构成的.

代码示例: 使用 ListWidget
1) 在界面上创建一个 ListView , 右键 => 变形为 => ListWidget , 再创建一个 lineEdit 和两个按钮.
注意: ListWidget 是 ListView 的子类, 功能比 ListView 更丰富. 咱们使用ListWidget 即可.

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");
}

3) 编写 listWidget 的 slot 函数
• 此处需要判定 current 和 previous 非空. 初始情况下是没有元素选中的, 就导致这俩指针可能是 NULL.

void Widget::on_listWidget_currentItemChanged(QListWidgetItem *current,QListWidgetItem *previous)
{
    if (current != NULL && previous != NULL) 
    {
        qDebug() << "当前选中: " << current->text() << "之前选中: " << previous->text();
    }
}

这里需要给 widget.h 前面加上 #include <QListWidgetItem>

4) 编写按钮的 slot 函数

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);
}

5) 执行程序, 观察效果. 可以新增元素, 选中元素, 删除元素.

二、Table Widget

使用 QTableWidget 表示一个表格控件. 一个表格中包含若干行, 每一行又包含若干列.
表格中的每个单元格, 是一个 QTableWidgetItem 对象.

QTableWidget 核心方法

QTableWidgetItem 核心信号

QTableWidgetItem 核心方法

代码示例: 使用 QTableWidget
1) 在界面上创建 QTableWidget 和三个按钮, 一个输入框
注意: QTableWidget 是 QTableView 的子类, 功能比 QTableView 更丰富. 咱们使用QTableWidget 即可.

2) 编写 widget.cpp 构造函数, 构造表格中的初始数据.

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"));
}

3) 编写按钮的 slot 函数

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);
}

4) 执行程序, 即可完成表格的基本操作.

默认情况下, 单元格中的内容直接就是可编辑的.
如果不想让用户编辑, 可以设置 ui->tableWidget>setEditTriggers(QAbstractItemView::NoEditTriggers);

三、Tree Widget

使用 QTreeWidget 表示一个树形控件. 里面的每个元素, 都是一个 QTreeWidgetItem , 每个QTreeWidgetItem 可以包含多个文本和图标, 每个文本/图标为一个列.
可以给 QTreeWidget 设置顶层节点(顶层节点可以有多个), 然后再给顶层节点添加子节点, 从而构成树形结构.

QTreeWidget 核心方法

QTreeWidget 核心信号

QTreeWidgetItem 核心属性

QTreeWidgetItem 核心方法

代码示例: 使用 QTreeWidget
1) 在界面上创建一个 TreeView , 右键 => 变形为 => TreeWidget , 再创建一个 lineEdit 和两个按钮.
注意: TreeWidget 是 TreeView 的子类, 功能比 TreeView 更丰富. 咱们使用 TreeWidget即可

2) 编写代码, 构造初始数据

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);
}

3) 编写代码, 实现按钮的 slot 函数

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);
    }
}

4) 执行程序, 可以针对树形框进行编辑.