Qt implements grid layout effect

Qt provides the QGridLayout class to realize the grid layout. The so-called grid is a grid with regular rows and columns. Through QGridLayout, multiple controls can be easily laid out.

 

If you drag and draw in the designer, once the requirements change and you need to add or delete controls, you will be forced to break the original layout and readjust. This is a very time-consuming event.

Therefore, it is often the first choice to achieve reuse through code drawing.

The benefits of this article, free to receive Qt development learning materials package, technical video, including (C++ language foundation, C++ design pattern, introduction to Qt programming, QT signal and slot mechanism, QT interface development-image drawing, QT network, QT database programming, QT project actual combat, QSS, OpenCV, Quick module, interview questions, etc.) ↓↓↓↓↓↓See below↓↓Click on the bottom of the article to receive the fee↓↓

Effect:

code:

#include "mainwindow.h"
#include "ui_mainwindow.h"
 
MainWindow::MainWindow(QWidget *parent) :
    QMainWindow(parent),
    ui(new Ui::MainWindow)
{
    ui->setupUi(this);
 
    teacher=new QLabel(this);
    student=new QLabel(this);
    subject=new QLabel(this);
    phone=new QLabel(this);
    phoneInput=new QLineEdit(this);
    btnok=new QPushButton(this);
 
    teabox=new QComboBox(this);
    stubox=new QComboBox(this);
    subbox=new QComboBox(this);
    layout=new QGridLayout(this);   //栅格布局
 
    teacher->setText("老师：");
    student->setText("学生：");
    subject->setText("科目：");
    phone->setText("电话：");
    btnok->setText("录入");
    teabox->addItem("赵柳");  //QComboBox添加项
    teabox->addItem("李柏");
    stubox->addItem("王炸");
    stubox->addItem("茅台");
    subbox->addItem("语文");
    subbox->addItem("数学");
 
    btnok->setFixedSize(100,40); //设置固定宽高
 
    layout->addWidget(teacher,0,0,1,1); //将部件添加到单元格中，可以设置跨越多个行列
    layout->addWidget(teabox,0,1,1,1);
 
    layout->addWidget(student,0,2,1,1); //第1行第2列 占据一行一列的宽度
    layout->addWidget(stubox,0,3,1,1);  //第1行第3列 占据一行一列的宽度
 
    layout->addWidget(subject,0,4,1,1);
    layout->addWidget(subbox,0,5,1,1);
 
    layout->addWidget(phone,1,0,1,1);
    layout->addWidget(phoneInput,1,1,1,1);
    layout->addWidget(btnok,1,5,1,1);//第2行第5列 占据一行一列的宽度
 
    layout->setColumnStretch(1,1);  //设置列的拉伸因子
    layout->setColumnStretch(3,1);  //第1列和第3列、第5列的比例为1：1：1
    layout->setColumnStretch(5,1);
 
    layout->setSpacing(10); //将垂直和水平间距都设置为间距10
    ui->groupBox->setLayout(layout);
}
 
MainWindow::~MainWindow()
{
    delete ui;
}

Use the addWidget function of the QGridLayout class to add controls that need to be placed.

Taking addWidget(phone,1,0,1,1) as an example, it means placing the phone control on the second row and first column of the layout, occupying one row and one column.

Delete the specified control:

For example, when you need to dynamically remove one of the above controls, you need to perform corresponding processing. The following is the removal of phone-related controls:

QLayoutItem *item;
while((item=layout->takeAt(0))!=0)
{
    if((item->widget()==phone)||(item->widget()==phoneInput)){
        item->widget()->setParent(NULL);
        delete item;
    }else{
        continue;
    }
}
this->update();    //刷新

Use the takeAt() function to get the controls on the layout in turn, and use the widget() function of QLayoutItem to determine whether it is the corresponding control.

If it matches, first set its parent object to null, and then delete it. After the deletion is complete, call update to refresh the interface.

The benefits of this article, free to receive Qt development learning materials package, technical video, including (C++ language foundation, C++ design pattern, introduction to Qt programming, QT signal and slot mechanism, QT interface development-image drawing, QT network, QT database programming, QT project actual combat, QSS, OpenCV, Quick module, interview questions, etc.) ↓↓↓↓↓↓See below↓↓Click on the bottom of the article to receive the fee↓↓