QT：控件属性及常用控件(4)-----多元素控件、容器类控件、布局管理器

在此之前我们要看一看XXview和XXWidget之间的区别

一、多元素控件

1. List Widget

使⽤QListWidget 能够显⽰⼀个纵向的列表.每个选项都可以被选中.

。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。

。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。

其可以直接在这里改变类型

通过List Widget生成一个可添加可删除的列表

#include "widget.h"
#include "ui_widget.h"
#include <QDebug>
Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);
    ui->listWidget->addItem("关羽");
    ui->listWidget->addItem("吕布");
    ui->listWidget->addItem("孙策");
    ui->listWidget->addItem("典韦");
}

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

void Widget::on_pushButton_add_clicked()
{
    //获取文本内容
    const QString& text = ui->lineEdit->text();
    ui->listWidget->addItem(text);
}

void Widget::on_pushButton_remove_clicked()
{
    //获取被选中的元素是哪一个
    int row = ui->listWidget->currentRow();
    if(row < 0){
        return;
    }
    //按照行号删除元素
    ui->listWidget->takeItem(row);
}

void Widget::on_listWidget_currentItemChanged(QListWidgetItem *current, QListWidgetItem *previous)
{
    //通过槽函数感知变化
    if(current != nullptr){
        qDebug() << "当前选中的武将：" << current->text();
    }
    if(previous != nullptr){
        qDebug() << "上次选中的武将：" << previous->text();
    }
}

2. Table Widget

使⽤QTableWidget 表⽰⼀个表格控件.⼀个表格中包含若⼲⾏,每⼀⾏⼜包含若⼲列.表格中的每个单元格,是⼀个QTableWidgetItem 对象.

。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。

通过Table Widget生成一个可添加可删除的表格

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

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("蜀国"));
    ui->tableWidget->setItem(0,2,new QTableWidgetItem("否"));
    ui->tableWidget->setItem(1,0,new QTableWidgetItem("吕布"));
    ui->tableWidget->setItem(1,1,new QTableWidgetItem("群雄"));
    ui->tableWidget->setItem(1,2,new QTableWidgetItem("否"));
    ui->tableWidget->setItem(2,0,new QTableWidgetItem("孙权"));
    ui->tableWidget->setItem(2,1,new QTableWidgetItem("吴国"));
    ui->tableWidget->setItem(2,2,new QTableWidgetItem("是"));

}

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

void Widget::on_addrow_clicked()
{
    //了解一共有多少行
    int hang = ui->tableWidget->rowCount();
    //在这一行后插入一行
    ui->tableWidget->insertRow(hang);
}

void Widget::on_removerow_clicked()
{
    //获取选中的行号
    int number = ui->tableWidget->currentRow();
    //删除这一行
    ui->tableWidget->removeRow(number);
}

void Widget::on_addcolumn_clicked()
{
    //获取一共有几列
    int lie = ui->tableWidget->columnCount();
    //在这一列后插入一列
    ui->tableWidget->insertColumn(lie);
    //设置列的内容
    const QString& text = ui->lineEdit->text();
    ui->tableWidget->setHorizontalHeaderItem(lie,new QTableWidgetItem(text));
}

void Widget::on_removecolumn_clicked()
{
    //获取当前列
    int lie = ui->tableWidget->currentColumn();
    ui->tableWidget->removeColumn(lie);
}

3. Tree Widget

使⽤QTreeWidget 表⽰⼀个树形控件.⾥⾯的每个元素,都是⼀个QTreeWidgetItem ,每个QTreeWidgetItem 可以包含多个⽂本和图标,每个⽂本/图标为⼀个列.可以给QTreeWidget 设置顶层节点(顶层节点可以有多个),然后再给顶层节点添加⼦节点,从⽽构成树形结构.

其没有根节点，是从根节点外的节点开始(即顶层节点！）

。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。

。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。

基本使用方法可以在ui界面:

通过Tree Widget生成一个可添加可删除的树形表

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

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,"群雄");
    ui->treeWidget->addTopLevelItem(item4);
}

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

void Widget::on_pushButton_addtop_clicked()
{
    //获取输入框的内容
    const QString& text = ui->lineEdit->text();
    QTreeWidgetItem* item = new QTreeWidgetItem();
    item->setText(0,text);
    ui->treeWidget->addTopLevelItem(item);
}

void Widget::on_pushButton_addchild_clicked()
{
    //获取当前选中的节点
    QTreeWidgetItem* currentitem = ui->treeWidget->currentItem();
    if(currentitem == nullptr){
        return;
    }
    //获取输入框的内容
    const QString& text = ui->lineEdit->text();
    QTreeWidgetItem* item = new QTreeWidgetItem();
    item->setText(0,text);
    currentitem->addChild(item);
}

void Widget::on_pushButton_remove_clicked()
{
    //获取到选中元素
    QTreeWidgetItem* currenttem = ui->treeWidget->currentItem();
    if(currenttem == nullptr){
        return;
    }
    //删除选中的元素，需要先得到父元素
    QTreeWidgetItem* parentsitem = currenttem->parent();//先获取父元素
    if(parentsitem == nullptr){
        //顶层元素
        int index = ui->treeWidget->indexOfTopLevelItem(currenttem);//获取是第几个顶层元素的下标
        ui->treeWidget->takeTopLevelItem(index);//删除节点
    }else{
        //子节点
        parentsitem->removeChild(currenttem);
    }
}

二、容器类控件

1. GroupBox

使⽤QGroupBox 实现⼀个带有标题的分组框.可以把其他的控件放到⾥⾯作为⼀组.这样看起来能更好看⼀点.

🌰分组框只是⼀个⽤来"美化界⾯"这样的组件,并不涉及到⽤⼾交互和业务逻辑.属于"锦上添 花".

可以把其他的各种控件放到GroupBox中,这时候内部的控件的父元素就不是this了，而是GroupBox
之前我们使用下面的这种分组方式，有了GroupBox我们就能更好地实现分组了：

2. TabWidget

使⽤QTabWidget 实现⼀个带有标签⻚的控件,可以往⾥⾯添加⼀些widget.进⼀步的就可以通过标签⻚来切换

。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。

#include "widget.h"
#include "ui_widget.h"
#include <QLabel>
Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);
    //先在每个标签页中加一个label
    QLabel* label1 = new QLabel(ui->tab);
    label1->setText("第一页");
    label1->resize(200,400);

    QLabel* label2 = new QLabel(ui->tab_2);
    label2->setText("第二页");
    label2->resize(200,400);
}

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

void Widget::on_pushButton_clicked()
{
    int count = ui->tabWidget->count();//获取标签页总数
    QWidget* w = new QWidget();
    ui->tabWidget->addTab(w,QString("第 ")+QString::number(count+1)+QString("页"));
    //添加label显示内容
    QLabel* label = new QLabel(w);//label在weidget上建立
    label->setText(QString("第 ")+QString::number(count+1)+QString("页"));
    label->resize(200,400);
    //设置新增标签页后，直接在新标签页上
    ui->tabWidget->setCurrentIndex(count);
}

void Widget::on_pushButton_2_clicked()
{
    int index = ui->tabWidget->currentIndex();
    ui->tabWidget->removeTab(index);
}

三、布局管理器

之前使⽤Qt在界⾯上创建的控件,都是通过"绝对定位"的⽅式来设定的.
也就是每个控件所在的位置,都需要计算坐标,最终通过setGeometry 或者move ⽅式摆放过去.
这种设定⽅式其实并不⽅便.尤其是界⾯如果内容⽐较多,不好计算.⽽且⼀个窗⼝⼤⼩往往是可以调整的,按照绝对定位的⽅式,也⽆法⾃适应窗⼝⼤⼩.因此Qt引⼊"布局管理器"(Layout)机制,来解决上述问题.

1. 垂直布局(QVBoxLayout)

使⽤QVBoxLayout 表⽰垂直的布局管理器.

ui->setupUi(this);
    QPushButton* button1 = new QPushButton("按钮1");
    QPushButton* button2 = new QPushButton("按钮2");
    QPushButton* button3 = new QPushButton("按钮3");

    //创建布局管理器
    QVBoxLayout* layout = new QVBoxLayout();
    layout->addWidget(button1);
    layout->addWidget(button2);
    layout->addWidget(button3);
    //把布局管理器添加到窗口中
    this->setLayout(layout);

使用垂直布局管理器，他就会像这样自适应的垂直进行布局，并且布局会根据窗口的大小变化而变化！

但是每个widget中只能设置一个布局管理器。接下来我们看看怎么设置多个布局管理器！

设置多个布局管理器

2. 水平布局(QHBoxLayout,布局管理器嵌套)

使⽤QHBoxLayout 表⽰垂直的布局管理器。

使用方式和垂直布局一致，这里不再赘述！

※布局管理器还可以进行嵌套，水平嵌套垂直，垂直嵌套水平！

 ui->setupUi(this);
    //创建垂直布局管理器
    QVBoxLayout* vlayout = new QVBoxLayout();
    this->setLayout(vlayout);
    //添加垂直的三个按钮
    QPushButton* button1 = new QPushButton("按钮1");
    QPushButton* button2 = new QPushButton("按钮2");
    QPushButton* button3 = new QPushButton("按钮3");
    vlayout->addWidget(button1);
    vlayout->addWidget(button2);
    vlayout->addWidget(button3);

    //创建水平布局管理器
    QHBoxLayout* hlayout = new QHBoxLayout();
    //添加水平的两个按钮
    QPushButton* button4 = new QPushButton("按钮4");
    QPushButton* button5 = new QPushButton("按钮5");
    hlayout->addWidget(button4);
    hlayout->addWidget(button5);
    //把水平布局管理器添加到垂直布局管理器内部
    vlayout->addLayout(hlayout);

3. 网格布局(QGridLayout)

Qt 中还提供了QGridLayout ⽤来实现⽹格布局的效果.可以达到M*N的这种⽹格的效果.
整体和QVBoxLayout 以及QHBoxLayout 相似.但是设置spacing的时候是按照垂直⽔平两个⽅向来设置的.

QPushButton* button1 = new QPushButton("按钮1");
    QPushButton* button2 = new QPushButton("按钮2");
    QPushButton* button3 = new QPushButton("按钮3");
    QPushButton* button4 = new QPushButton("按钮4");
    QPushButton* button5 = new QPushButton("按钮5");
    QPushButton* button6 = new QPushButton("按钮6");
    QGridLayout* layout = new QGridLayout();
    layout->addWidget(button1,0,0);//(n，n)布局，(0，0)代表第一行第一列，以此类推
    layout->addWidget(button2,1,1);
    layout->addWidget(button3,2,2);
    layout->addWidget(button4,3,3);
    layout->addWidget(button5,4,1);
    layout->addWidget(button6,5,5);
    //如果你设置的很离谱比如：layout->addWidget(button6,100,100);那么QT也不会无脑那么设置，它会根据相对位置进行合理化
    this->setLayout(layout);

拉伸系数

水平拉伸系数：setColumnStretch()第一个参数为第几列，第二个参数为比例，设置为0表示不随窗口变化而变化

 //设置水平拉伸系数
    layout->setColumnStretch(0,0);//第一个参数为第几列
    layout->setColumnStretch(1,1);//第二个参数为比例，设置为0表示不随窗口变化而变化
    layout->setColumnStretch(2,3);

垂直拉伸系数：

 //设置垂直拉伸系数
    layout->setRowStretch(0,1);//第一个参数为第几行
    layout->setRowStretch(1,4);//第二个参数为比例，设置为0表示不随窗口变化而变化

我们发现其并没有按照我们的设置进行变化！！
这是为什么呢？？？
这是因为setSizePolicy，由于按钮垂直方向默认是没有拉开的（水平方向默认拉伸），因此垂直方向不会受到拉伸系数的影响，要想让垂直方向的拉伸系数生效，就需要让按钮能够拉伸展开！

使⽤setSizePolicy 设置按钮的尺⼨策略.可选的值如下:
QSizePolicy::Ignored 忽略控件的尺⼨，不对布局产⽣影响。
QSizePolicy::Minimum 控件的最⼩尺⼨为固定值，布局时不会超过该值。
QSizePolicy::Maximum :控件的最⼤尺⼨为固定值，布局时不会⼩于该值。
QSizePolicy::Preferred :控件的理想尺⼨为固定值，布局时会尽量接近该值。
QSizePolicy::Expanding 控件的尺⼨可以根据空间调整，尽可能占据更多空间。
QSizePolicy::Shrinking 控件的尺⼨可以根据空间调整，尽可能缩⼩以适应空间。

//使其能够展开
    button1->setSizePolicy(QSizePolicy::Expanding,QSizePolicy::Expanding);
    button2->setSizePolicy(QSizePolicy::Expanding,QSizePolicy::Expanding);
    button3->setSizePolicy(QSizePolicy::Expanding,QSizePolicy::Expanding);
    button4->setSizePolicy(QSizePolicy::Expanding,QSizePolicy::Expanding);
    button5->setSizePolicy(QSizePolicy::Expanding,QSizePolicy::Expanding);
    button6->setSizePolicy(QSizePolicy::Expanding,QSizePolicy::Expanding);

    //设置垂直拉伸系数
    layout->setRowStretch(0,1);//第一个参数为第几行
    layout->setRowStretch(1,4);//第二个参数为比例，设置为0表示不随窗口变化而变化

4. 表单布局(QFormLayout)

除了上述的布局管理器之外,Qt还提供了QFormLayout,属于是QGridLayout 的特殊情况,专⻔⽤于实现两列表单的布局.
这种表单布局多用于让用户填写信息的场景，左侧列为提示，右侧列为输入框。
其是一个N行2列的表格！

  QFormLayout* layout = new QFormLayout();
   this->setLayout(layout);
   //创建label为第一列
   QLabel* label1 = new QLabel("学校");
   QLabel* label2 = new QLabel("学院");
   QLabel* label3 = new QLabel("专业");
   //创建输入框为第二列
   QLineEdit* edit1 = new QLineEdit();
   QLineEdit* edit2 = new QLineEdit();
   QLineEdit* edit3 = new QLineEdit();
   //把上述控件添加到表单布局
   layout->addRow(label1,edit1);
   layout->addRow(label2,edit2);
   layout->addRow(label3,edit3);

5. 空白(Spacer)

使⽤布局管理器的时候,可能需要在控件之间,添加⼀段空⽩.就可以使⽤QSpacerItem来表⽰.

 QHBoxLayout* layout = new QHBoxLayout();
   this->setLayout(layout);
   //创建label为第一列
   QLabel* label1 = new QLabel("学校");
   QLabel* label2 = new QLabel("学院");
   QLabel* label3 = new QLabel("专业");

   //创建spacer
   QSpacerItem* SPACER = new QSpacerItem(200,20);
   //把上述控件添加到表单布局
   layout->addWidget(label1);
   layout->addSpacerItem(SPACER);
   layout->addWidget(label2);
   layout->addWidget(label3);

同时其也可以在ui界面中直接添加：