【Qt】控件概述（5）—— 多元素控件

1. 多元素控件的种类

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

其中总的俩算其实只有三种，上面的两两配对是属于同一类的。

xxWidget和xxView之间的区别以QTableWidget和QTableView为例.

• QTableView是基于MVC设计的控件.QTableView自身不持有数据.使用QTableView的时候需要用户创建⼀个Model对象(比如QStandardModel ),并且把Model和QTableView关联起来.后续修改Model中的数据就会影响QTableView的显示;修改QTableView的显示也会影响到Model中的数据(双向绑定).
• QTableWidget则是QTableView的子类,对Model进行了封装.不需要用户手动创建Model对象,直接就可以往QTableWidget中添加数据了.

2. 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	设置文本对对齐方式.

代码样例：通过两个按钮实现添加和删除。

创建一个QListWidget，一个QLineEdit和两个QPushButton，这两个按钮分别对应着添加和删除，添加按钮可以将linEdit中的文本添加到listWidget中，二删除则可以将我们鼠标选中的进行删除。

void Widget::on_pushButton_clicked()
{
    // 获取lineEdit中的数据
    const QString& content = ui->lineEdit->text();
    // 添加到lineWidget中
    ui->listWidget->addItem(content);
}

void Widget::on_pushButton_2_clicked()
{
    // 获取鼠标选中的行
    int line = ui->listWidget->currentRow();
    // 删除对应的行的数据
    ui->listWidget->takeItem(line);
}

3. QTableWidget

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

核心方法：

方法	说明
item(int row, int column)	根据行数列数获取指定的QTableWidgetItem*
setItem(int row,int column,QTableWidget*)	根据行数列数设置表格中的元素
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, QTableWidget*)	设置指定列的表头
setVerticalHeaderItem(int row, QTableWidget*)	设置指定行的表头
setEditTriggers	是否可以编辑

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(constQIcon&)	设置图标
setSelected(bool)	设置被选中
setSizeHints(const QSize&)	设置尺寸
setFont(const QFont&)	设置字体

代码样例：通过按钮的方式添加/删除行/列

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);
    // 添加行
    ui->tableWidget->insertRow(0);
    ui->tableWidget->insertRow(1);
    ui->tableWidget->insertRow(2);
    // 添加列
    ui->tableWidget->insertColumn(0);
    ui->tableWidget->insertColumn(1);
    ui->tableWidget->insertColumn(2);
    // 设置列名称
    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("张三"));
    ui->tableWidget->setItem(0, 1, new QTableWidgetItem("18"));
    ui->tableWidget->setItem(0, 2, new QTableWidgetItem("男"));

    ui->tableWidget->setItem(1, 0, new QTableWidgetItem("李四"));
    ui->tableWidget->setItem(1, 1, new QTableWidgetItem("19"));
    ui->tableWidget->setItem(1, 2, new QTableWidgetItem("女"));

    ui->tableWidget->setItem(2, 0, new QTableWidgetItem("王五"));
    ui->tableWidget->setItem(2, 1, new QTableWidgetItem("20"));
    ui->tableWidget->setItem(2, 2, new QTableWidgetItem("男"));
}

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

void Widget::on_pushButton_2_clicked()
{
    int row = ui->tableWidget->currentRow();
    ui->tableWidget->removeRow(row);
}

void Widget::on_pushButton_3_clicked()
{
    int count = ui->tableWidget->columnCount();
    ui->tableWidget->insertColumn(count);
    const QString& columnName = ui->lineEdit->text();
    ui->tableWidget->setHorizontalHeaderItem(count, new QTableWidgetItem(columnName));
}

void Widget::on_pushButton_4_clicked()
{
    int column = ui->tableWidget->currentColumn();
    ui->tableWidget->removeColumn(column);
}

void Widget::on_pushButton_5_clicked()
{
    int row = ui->tableWidget->currentRow();
    int column = ui->tableWidget->currentColumn();
    const QString& contents = ui->lineEdit_2->text();
    ui->tableWidget->setItem(row, column, new QTableWidgetItem(contents));
}

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

4. QTreeWidget

使用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)	元素被展开时触发
itemCollapsend(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()	获取该元素的父节点

代码样例：

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);
    // 给底层节点添加孩子
    QTreeWidgetItem* item4 = new QTreeWidgetItem();
    item4->setText(0, "中华田园犬");
    item1->addChild(item4);

    QTreeWidgetItem* item5 = new QTreeWidgetItem();
    item5->setText(0, "哈士奇");
    item1->addChild(item5);

}

void Widget::on_pushButton_clicked()
{
    int column = ui->treeWidget->currentColumn();
    const QString& content = ui->lineEdit->text();
    QTreeWidgetItem* item = new QTreeWidgetItem();
    item->setText(column, content);
    ui->treeWidget->addTopLevelItem(item);
}

void Widget::on_pushButton_2_clicked()
{
    int column = ui->treeWidget->currentColumn();
    const QString& content = ui->lineEdit->text();
    QTreeWidgetItem* item = new QTreeWidgetItem();
    item->setText(column, content);
    QTreeWidgetItem* currentitem = ui->treeWidget->currentItem();
    currentitem->addChild(item);
}

void Widget::on_pushButton_3_clicked()
{
    // 获取选中元素的父亲
    QTreeWidgetItem* curritem = ui->treeWidget->currentItem();
    if (curritem == nullptr){
        return;
    }
    QTreeWidgetItem* parent = curritem->parent();
    if (parent == nullptr){
        int index = ui->treeWidget->indexOfTopLevelItem(curritem);
        qDebug() << index;
        ui->treeWidget->takeTopLevelItem(index);
    }else{
        parent->removeChild(curritem);
    }
}