Qt入门5——常用控件3

目录

1. 多元素控件

1.1 List Widget

1.2 Table Widget

1.3 Tree Widget

2. 容器类控件

2.1 Group Box

2.2 Tab Widget

3.布局管理器

3.1垂直布局 

3.2 水平布局

3.3 网格布局

3.4 表单布局

 3.5 Spacer

1. 多元素控件

1.1 List Widget

使用QListWidget 能够显示⼀个纵向的列表。

核心方法：

核心信号：

示例：

1.在界面上创建如图控件：

2.构造函数初始化QListWidget

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);

    // 初始化QListWidget
    ui->listWidget->addItem("C++");
    ui->listWidget->addItem("Java");
    ui->listWidget->addItem("Python");
    //在QListWidgetItem中，可以设置字体属性，设置图标，设置文字大小，设置是否被选中等状态
//    ui->listWidget->addItem(new QListWidgetItem("C++"));
//    ui->listWidget->addItem(new QListWidgetItem("Java"));
//    ui->listWidget->addItem(new QListWidgetItem("Python"));
}

3.设置三个槽函数：

void Widget::on_pushButton_add_clicked()
{
     // 1. 先获取到输入框中的内容
     const QString& text = ui->lineEdit->text();
     // 2. 添加到QListWidget 中
     ui->listWidget->addItem(text);
}

void Widget::on_pushButton_sub_clicked()
{
    //1.先获取到选中的元素
    int row = ui->listWidget->currentRow();
    if(row < 0)
    {
        return;
    }
    //2.按照行号来删除
    ui->listWidget->takeItem(row);
}

void Widget::on_listWidget_currentItemChanged(QListWidgetItem *current, QListWidgetItem *previous)
{
    //通过这个槽函数来感知变化
    if(current != nullptr)
    {
        ui->label->setText("当前选中：" + current->text());
    }
    if(previous != nullptr)
    {
        ui->label_2->setText("上次选中：" + previous->text());
    }
}

 效果如图：

1.2 Table Widget

使用 QTableWidget 表示⼀个表格控件，⼀个表格中包含若干行,每一行又包含若干列。

 核心方法：

QTableWidgetItem 核心信号：

QTableWidgetItem 核心方法：

示例：

1.在界面设置相关控件：

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("19"));

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

    ui->tableWidget->setItem(2,0,new QTableWidgetItem("1003"));
    ui->tableWidget->setItem(2,1,new QTableWidgetItem("王五"));
    ui->tableWidget->setItem(2,2,new QTableWidgetItem("22"));
    
    //给QLineEdit设置相关属性
    ui->lineEdit->setPlaceholderText("在此输入列名");
    ui->lineEdit->setClearButtonEnabled(true);
}

3.设置相应槽函数：

void Widget::on_pushButton_insertRow_clicked()
{
    //需要知道当前一共有多少行
    int rowCount = ui->tableWidget->rowCount();
    //在这一行之后新增行
    //注意此处的参数是“下标”，表示新增之后的这一行是第几行
    ui->tableWidget->insertRow(rowCount);
}

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

void Widget::on_pushButton_insertColumn_clicked()
{
    //先获取到一共有几列
    int colCount = ui->tableWidget->columnCount();
    //在对应的位置新增这一列
    ui->tableWidget->insertColumn(colCount);
    //设置列名(从输入框中获取)

    const QString& text = ui->lineEdit->text();
    ui->tableWidget->setHorizontalHeaderItem(colCount,new QTableWidgetItem(text));
}

void Widget::on_pushButton_deleteColumn_clicked()
{
    //获取选中的列号
    int curColumn = ui->tableWidget->currentColumn();
    //删除这一列
    ui->tableWidget->removeColumn(curColumn);
}

 效果如图：

1.3 Tree Widget

使用 QTreeWidget 表示⼀个树形控件，里面的每个元素,都是⼀个 QTreeWidgetItem ,每个 QTreeWidgetItem 可以包含多个文本和图标,每个文本/图标为⼀个列；

可以给 QTreeWidget 设置顶层节点(顶层节点可以有多个),然后再给顶层节点添加子节点,从而构成 树形结构。

核心方法：

QTreeWidget核心信号：

 QTreeWidgetItem 核心属性：

QTreeWidgetItem 核心方法：

示例：

 1.在界面添加控件：

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

    //添加一些子节点
    QTreeWidgetItem* item4 = new QTreeWidgetItem();
    item4->setText(0,"中华田园犬");
    item1->addChild(item4);

    QTreeWidgetItem* item5 = new QTreeWidgetItem();
    item5->setText(0,"拉布拉多");
    item1->addChild(item5);

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

}

3.编写槽函数

void Widget::on_pushButton_insertTopLevelItem_clicked()
{
    //获取到输入框的内容
    const QString& text = ui->lineEdit->text();
    //构造一个QTreeWidgetItem
    QTreeWidgetItem* item = new QTreeWidgetItem();
    item->setText(0,text);
    //添加到顶层节点中
    ui->treeWidget->addTopLevelItem(item);
}

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

void Widget::on_pushButton_deleteItem_clicked()
{
    //获取到选中的元素
    QTreeWidgetItem* currentItem = ui->treeWidget->currentItem();
    if(currentItem == nullptr)
    {
        return;
    }
    //删除选中的元素，需要先获取到父元素，通过父元素删除
    QTreeWidgetItem* parent = currentItem->parent();
    if(parent == nullptr)
    {
        //顶层元素
        int index = ui->treeWidget->indexOfTopLevelItem(currentItem);
        ui->treeWidget->takeTopLevelItem(index);
    }
    else
    {
        //普通元素
        parent->removeChild(currentItem);
    }
}

 效果如图：

2. 容器类控件

2.1 Group Box

使用 QGroupBox 实现⼀个带有标题的分组框，可以把其他的控件放到里面作为⼀组，这样看起来能更美观一些。

 示例：给点餐界面加上分组框

2.2 Tab Widget

使用QTabWidget 实现⼀个带有标签页的控件,可以往里面添加⼀些widget，进⼀步的就可以通过标签页来切换。

核心信号：

示例：

1.图形化界面设置控件：

2.在构造函数初始化标签页

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);

    //先在每个标签页中分别添加一个label
    QLabel* label1 = new QLabel(ui->tab);
    label1->setText("标签页1");
    label1->resize(100,50);

    QLabel* label2 = new QLabel(ui->tab_2);
    label2->setText("标签页2");
    label2->resize(100,50);
}

3.编写相应槽函数

void Widget::on_pushButton_clicked()
{
    //使用addTab方法创建新的标签页
    //参数1 要指定一个QWidget
    //参数2 指定这个标签页的 text（标题），此处标题就叫做Tab+数字
    int count = ui->tabWidget->count();  //获取到标签页的数量
    QWidget* w = new QWidget();
    ui->tabWidget->addTab(w,QString("Tab") + QString::number(count + 1));
    //添加一个Qlabel显示内容
    QLabel* label = new QLabel(w);
    label->setText(QString("标签页 ") + QString::number(count + 1));
    label->resize(100,50);
    //设置新标签页被选中
    ui->tabWidget->setCurrentIndex(count);
}

void Widget::on_pushButton_2_clicked()
{
    //获取到当前选中的标签页的下标
    int index = ui->tabWidget->currentIndex();
    //删除标签页
    ui->tabWidget->removeTab(index);
}

void Widget::on_tabWidget_currentChanged(int index)
{
    ui->label->setText("当前页：" + QString::number(index + 1));
}

效果如图：

3.布局管理器

之前把控件放到界面上，都是靠“手动”的方式来布局的。

这种手动调整的方式其实是非常不科学的，一是因为手动布局的方式非常复杂，并且不准确；二是因为其无法对窗口大小进行自适应。

针对这种情况，布局管理器就派上用场了。

3.1垂直布局 

使用 QVBoxLayout 表示垂直的布局管理器，V是vertical 的缩写。 

 （Layout 只是用于界面布局,并没有提供信号）

示例1：

构造函数编写代码：

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);

    //创建三个按钮，使用布局管理器管理起来（需包含QPushButton头文件）
    QPushButton* button1 = new QPushButton("按钮1");
    QPushButton* button2 = new QPushButton("按钮2");
    QPushButton* button3 = new QPushButton("按钮3");

    //创建布局管理器（需包含QVBoxLayout头文件）
    QVBoxLayout* layout = new QVBoxLayout();
    layout->addWidget(button1);
    layout->addWidget(button2);
    layout->addWidget(button3);

    //把布局管理器添加到窗口中
    this->setLayout(layout);
}

 效果如图：可以发现无论如何拖动窗口三个按钮都整齐排列

3.2 水平布局

使用 QHBoxLayout 表⽰垂直的布局管理器，H是 horizontal 的缩写。

核心属性(和 QVBoxLayout 属性是⼀致的) 

示例1：与垂直布局有相似的效果

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);

    //创建三个按钮，使用布局管理器管理起来（需包含QPushButton头文件）
    QPushButton* button1 = new QPushButton("按钮1");
    QPushButton* button2 = new QPushButton("按钮2");
    QPushButton* button3 = new QPushButton("按钮3");

    //创建布局管理器（需包含QVBoxLayout头文件）
    QHBoxLayout* layout = new QHBoxLayout();
    layout->addWidget(button1);
    layout->addWidget(button2);
    layout->addWidget(button3);

    //把布局管理器添加到窗口中
    this->setLayout(layout);
}

示例2：垂直布局管理器和水平布局管理器嵌套使用

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);

    //创建垂直布局管理器
    QVBoxLayout* vlayout = new QVBoxLayout();
    this->setLayout(vlayout);

    //添加两个按钮进去
    QPushButton* button1 = new QPushButton("按钮1");
    QPushButton* button2 = new QPushButton("按钮2");
    vlayout->addWidget(button1);
    vlayout->addWidget(button2);

    //创建水平布局管理器
    QHBoxLayout* hlayout = new QHBoxLayout();

    //添加两个按钮进去
    QPushButton* button3 = new QPushButton("按钮3");
    QPushButton* button4 = new QPushButton("按钮4");
    hlayout->addWidget(button3);
    hlayout->addWidget(button4);

    //把水平布局管理器添加到垂直布局管理器中
    vlayout->addLayout(hlayout);
}

 效果如图：

3.3 网格布局

Qt 中还提供了用来实现网格布局的效果，可以达到M*N的这种网格的效果。

示例1：每个按钮独占一行和一列：

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);

    QPushButton* button1 = new QPushButton("按钮1");
    QPushButton* button2 = new QPushButton("按钮2");
    QPushButton* button3 = new QPushButton("按钮3");
    QPushButton* button4 = new QPushButton("按钮4");

    QGridLayout* layout = new QGridLayout();
    //每个按钮独占一行和一列
    layout->addWidget(button1,0,0);
    layout->addWidget(button2,1,1);
    layout->addWidget(button3,2,2);
    layout->addWidget(button4,3,4);

    this->setLayout(layout);
}

效果如图：

示例2：设置水平拉伸系数为1：2：2

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);

    //创建6个按钮，按照3*2的方式排列
    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);
    layout->addWidget(button2,0,1);
    layout->addWidget(button3,0,2);
    layout->addWidget(button4,1,0);
    layout->addWidget(button5,1,1);
    layout->addWidget(button6,1,2);

    this->setLayout(layout);

    //设置水平拉伸系数为1：2：2
    layout->setColumnStretch(0,1);
    layout->setColumnStretch(1,2);
    layout->setColumnStretch(2,2);
}

 效果如图：

示例3：设置垂直拉伸系数为1：1：2

由于按钮垂直方向默认没有拉伸开，（水平方向是默认拉伸开的）；

因此垂直方向不会受到拉伸系数的影响；

要想让垂直方向的拉伸系数生效，就需要让按钮先能够拉伸展开。

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);

    //创建6个按钮，按照2*3的方式排列
    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");

    //由于按钮垂直方向默认没有拉伸开，（水平方向是默认拉伸开的）
    //因此垂直方向不会受到拉伸系数的影响
    //要想让垂直方向的拉伸系数生效，就需要让按钮先能够拉伸展开
    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并把按钮添加进去
    QGridLayout* layout = new QGridLayout();
    layout->addWidget(button1,0,0);
    layout->addWidget(button2,0,1);
    layout->addWidget(button3,1,0);
    layout->addWidget(button4,1,1);
    layout->addWidget(button5,2,0);
    layout->addWidget(button6,2,1);

    //把layout设置到窗口中
    this->setLayout(layout);

    //设置拉伸系数为1：1：2
    layout->setRowStretch(0,1);
    layout->setRowStretch(1,1);
    layout->setRowStretch(2,2);
}

 效果如图：

3.4 表单布局

除了上述的布局管理器之外,Qt还提供了QFormLayout，属于是 QGridLayout 的特殊情况,专门用于实现两列表单的布局。

示例：

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);

    //设置成 3 行 2 列
    QFormLayout* layout = new QFormLayout();
    this->setLayout(layout);

    //创建3个label作为第一列
    QLabel* label1 = new QLabel("姓名");
    QLabel* label2 = new QLabel("年龄");
    QLabel* label3 = new QLabel("电话");

    //创建3个输入框作为第二列
    QLineEdit* edit1 = new QLineEdit();
    QLineEdit* edit2 = new QLineEdit();
    QLineEdit* edit3 = new QLineEdit();

    //把上述控件添加到表单布局中
    layout->addRow(label1,edit1);
    layout->addRow(label2,edit2);
    layout->addRow(label3,edit3);

    //创建一个“提交”按钮
    QPushButton* button = new QPushButton("提交");
    layout->addRow(nullptr,button);

}

效果如图：

 3.5 Spacer

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

示例：

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);

    QHBoxLayout* layout = new QHBoxLayout();
    this->setLayout(layout);

    QPushButton* button1 = new QPushButton("按钮1");
    QPushButton* button2 = new QPushButton("按钮2");

    //创建 spacer 是两个按钮之间存在空白
    QSpacerItem* spacer = new QSpacerItem(200,20);

    //当前是要把空白添加到两个按钮之间，此处add的顺序就是把其放到中间了
    layout->addWidget(button1);
    layout->addSpacerItem(spacer);
    layout->addWidget(button2);
}

效果如图：