Qt常用控件 多元素控件

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

xxWidget和xxView之间的区别:

• xxWidget
  • xxWidget 属于便捷类控件，它将数据存储和显示逻辑集成在一起，提供了一种简单直接的方式来创建和管理表格、树形结构等界面元素。开发者无需过多关注数据模型的设计，就能快速搭建出具有基本功能的界面。(简单，但是拓展性低)
• xxView
  • xxView 基于模型 - 视图 - 控制器（MVC）架构设计，遵循分离原则，将数据的存储（模型）和显示（视图）分离开来。这种设计使得数据和界面的管理更加灵活，方便进行数据的修改、扩展和复用。（复杂，但是拓展性高）

1. QListWidget

QListWidget表示一个纵向的列表

1.1 常用属性和方法

属性

方法

1.2 常用信号

##1.3 QListWidgetItem

这个类表示QListWidget的一个元素。下面是常用方法

1.4 例子1，操作元素

在Qt Designer中设置基本框架

给两个按钮添加槽函数

void Widget::on_pushButton_add_clicked()
{
    QString text = ui->lineEdit->text();
    if(text == "" || text.size() == 0) {
        qDebug() << "Empty...";
        return;
    } else {
        ui->listWidget->addItem(text);
    }
}

void Widget::on_pushButton_del_clicked()
{
    int row = ui->listWidget->currentRow();
    if(row == -1) {
        qDebug() << "Not even one row selected";
        return;
    } else {
        ui->listWidget->takeItem(row);
    }
}

运行结果如下

2. QTableWidget

QTableWidget表示表格控件

2.1 常用属性和方法

属性具体见1.1。有两个独有的属性columnCount和rowCount，分别表示表格列数和行数

下面是常用方法

QTableWidgetItem属性与上面类似

2.2 常用信号

2.3 例子1，创建表格

在Qt Designer中设置基本框架

widget.cpp如下

#include "widget.h"
#include <QDebug>
#include "ui_widget.h"

Widget::Widget(QWidget* parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);
    const static int N = 3;
    for (int i = 0; i < N; ++i) {
        // 建行和建列
        ui->tableWidget->insertRow(i);
        ui->tableWidget->insertColumn(i);
    }
    // 设置列名
    ui->tableWidget->setHorizontalHeaderItem(0, new QTableWidgetItem("学号"));
    ui->tableWidget->setHorizontalHeaderItem(1, new QTableWidgetItem("姓名"));
    ui->tableWidget->setHorizontalHeaderItem(2, new QTableWidgetItem("电话"));

    // 设置初始值, 第0行
    ui->tableWidget->setItem(0, 0, new QTableWidgetItem("20241001"));
    ui->tableWidget->setItem(0, 1, new QTableWidgetItem("小A"));
    ui->tableWidget->setItem(0, 2, new QTableWidgetItem("1561111000"));
    // 第1行
    ui->tableWidget->setItem(1, 0, new QTableWidgetItem("20241002"));   // 第1行，第0列
    ui->tableWidget->setItem(1, 1, new QTableWidgetItem("小B"));        // 第1行，第1列
    ui->tableWidget->setItem(1, 2, new QTableWidgetItem("1561111001")); // 第1行，第2列
    // 第2行
    ui->tableWidget->setItem(2, 0, new QTableWidgetItem("20241003"));   // 第2行，第0列
    ui->tableWidget->setItem(2, 1, new QTableWidgetItem("小C"));        // 第2行，第1列
    ui->tableWidget->setItem(2, 2, new QTableWidgetItem("1561111002")); // 第2行，第2列
}

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

void Widget::on_add_row_btn_clicked()
{
    int rowCount = ui->tableWidget->rowCount();
    ui->tableWidget->insertRow(rowCount);
}

void Widget::on_del_row_btn_clicked()
{
    int curRow = ui->tableWidget->currentRow();
    if (curRow == -1) {
        qDebug() << "Row not even exist...";
        return;
    }
    ui->tableWidget->removeRow(curRow);
}

void Widget::on_add_col_btn_clicked()
{
    QString text = ui->lineEdit->text();
    if (text.isEmpty()) {
        qDebug() << "LineEdit text empty...";
        return;
    }
    int colCount = ui->tableWidget->columnCount();
    ui->tableWidget->insertColumn(colCount);
    ui->tableWidget->setHorizontalHeaderItem(colCount, new QTableWidgetItem(text));
}

void Widget::on_del_col_btn_clicked()
{
    int curCol = ui->tableWidget->currentColumn();
    if (curCol == -1) {
        qDebug() << "Column not even exist...";
        return;
    }
    ui->tableWidget->removeColumn(curCol);
}

运行结果如下

#3. QTreeWidget

QTreeWidget表示一个树形控件，每个元素都是一个QTreeWidgetItem，每个QTreeWidgetItem可以包含多个文本和图片。

注意：QTreeWidget虽然是树形结构，但是这个树形结构并没有体现出根节点，而是从根节点的下一层开始计算的。该层节点就叫做顶层节点（TopLevelItem）。

3.1 常用属性和方法

下面是QTreeWidgetItem的部分方法

3.2 常用信号

3.3 例子1，创建树形结构

在Qt Designer中设置基本框架

widget.cpp如下

#include "widget.h"
#include "ui_widget.h"

Widget::Widget(QWidget* parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);
    // 设置列数
    ui->treeWidget->setColumnCount(2);
    // 设置表头标签文本
    ui->treeWidget->setHeaderLabels(QStringList() << "名称" << "english");
    // 添加顶层节点
    addTopLevelItemWithText(0, "姓名");
    addTopLevelItemWithText(0, "电话");
    addTopLevelItemWithText(1, "name");
    addTopLevelItemWithText(1, "phone");
}

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

// 辅助函数, 添加顶层节点并设置文本
void Widget::addTopLevelItemWithText(int column, const QString &text)
{
    QTreeWidgetItem* item = new QTreeWidgetItem();
    item->setText(column, text);
    ui->treeWidget->addTopLevelItem(item);
}

void Widget::on_addToTop_clicked()
{
    QString text = ui->lineEdit->text();
    if(text.isEmpty()) {
        return;
    }
    addTopLevelItemWithText(0, text);
    addTopLevelItemWithText(1, text + "abc");       // 这里可以加个哈希表
}

void Widget::on_addToSelect_clicked()
{
    QString text = ui->lineEdit->text();
    if(text.isEmpty()) {
        return;
    }
    QTreeWidgetItem* cur = ui->treeWidget->currentItem();
    if(cur == nullptr) {
        return;
    }
    QTreeWidgetItem* item = new QTreeWidgetItem();
    item->setText(cur->columnCount()-1, text);
    cur->addChild(item);
}

void Widget::on_removeSelect_clicked()
{
    auto cur = ui->treeWidget->currentItem();
    if(cur == nullptr) {
        return;
    }
    auto parent = cur->parent();
    if(parent != nullptr) {
        // 不是顶层节点
        parent->removeChild(cur);
        delete cur;
    } else {
        // 是顶层节点
        int index = ui->treeWidget->indexOfTopLevelItem(cur);       // 获取下标
        ui->treeWidget->takeTopLevelItem(index);
    }
}

运行结果如下