【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类是用于显示条目列表的控件。每个条目可以包含文本和可选的图标

核心属性 

核心方法 

核心信号

QListWidgetItem

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

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

核心方法

代码示例：使用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类用于显示二维表格数据

核心方法

核心信号

QTableWidgetItem

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

核心方法

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

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

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指针连接

核心方法

核心信号

QTreeWidgetItem

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

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

核心属性

核心方法

代码示例：使用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;
    //构造新节点并链入QTreeWidget
    QTreeWidgetItem *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;
    //构造新节点并链入parent
    QTreeWidgetItem *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);
    }
    else
        parent->removeChild(curItem);//非顶层元素
}

结束语

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