Table of contents
1. Introduction to QGridLayout:
2. Introduction to QGridLayout parameters
1) Three rows and three columns
2) There are controls that occupy multiple rows and multiple columns
0. Environment Introduction
windows + vscode + qt
The scenario where I use grid layout is (the problem solved) : I originally used a combination of horizontal and vertical layouts to set up the overall layout, but when the Chinese characters in the first column of my label become longer (conversion from Chinese to English), it will Squeeze the QLineEdit control of the second column back, but I want each column to be aligned, so I changed the horizontal and vertical layout to a grid layout to solve the problem of misalignment of the second column.
1. Introduction to QGridLayout:
Grid layout, also called grid layout (row and column layout), can put controls or layout (layout) into each small grid
For example, if I have an interface like this to implement, I can use a grid layout
The red line divides the whole into 9 blocks (three rows and three columns)
You can add content to the grid layout by adding controls (addWidget) or by adding layouts (addLayout)
2. Introduction to QGridLayout parameters
1) Add control method
addWidget(QWidget *, int row, int column, int rowSpan, int columnSpan, Qt::Alignment = 0);
Parameter 1 QWidget * : The content to be filled in must be a control, QWidget or its sub-control class;
Parameter 2 row : the number of filled rows (starting from 0)
Parameter 3 column : the number of columns to fill in (starting from 0)
Parameter 4 rowSpan: how many rows
Parameter 5 columnSpan : how many columns
Note: If the value of rowSpan or columnSpan is -1, the widget will expand to the bottom or right edge of the layout
Parameter 6 Qt::Alignment = 0 : Alignment
2) Add layout method
addLayout(QLayout *, int row, int column, int rowSpan, int columnSpan, Qt::Alignment = 0)
The parameters are the same as addWidget()
3. Examples and codes
1) Three rows and three columns
Code (this class is a widget class, just create the following code in the constructor):
QLabel *lb_name = new QLabel("Project name");
QLabel *lb_projectType = new QLabel("Detection type");
QLabel *lb_extractProcess = new QLabel("Extraction process");QLineEdit *_le_name = new QLineEdit();
QComboBox *_cb_testNames = new QComboBox;
QComboBox *_cb_extract = new QComboBox;QLabel *lb_tipTitle = new QLabel("Number of tips per test");
QLabel *lb_nameBigTip = new QLabel(QStringLiteral("1000l"));
QLineEdit *_le_tipNumBig = new QLineEdit();
QLabel *lb_nameSmallTip = new QLabel(QStringLiteral("200l"));
QLineEdit *_le_tipNumSmall = new QLineEdit();QHBoxLayout *pHbl_tipsTitle = new QHBoxLayout;
pHbl_tipsTitle->setContentsMargins(0,0,0,0);
pHbl_tipsTitle->addWidget(lb_tipTitle);
pHbl_tipsTitle->addStretch();QHBoxLayout *pHbl_tips_big = new QHBoxLayout;
pHbl_tips_big->setContentsMargins(0,0,0,0);
pHbl_tips_big->addWidget(lb_nameBigTip);
pHbl_tips_big->addSpacing(20);
pHbl_tips_big->addWidget(_le_tipNumBig);
pHbl_tips_big->addStretch();QHBoxLayout *pHbl_tips_small = new QHBoxLayout;
pHbl_tips_small->addWidget(lb_nameSmallTip);
pHbl_tips_small->addSpacing(35);
pHbl_tips_small->addWidget(_le_tipNumSmall);
pHbl_tips_small->addStretch();QGridLayout *pGl_lbsAndTips = new QGridLayout();//Initialization instance
pGl_lbsAndTips->setContentsMargins(30,20,30,20);//Set the distance around, left 30 up 20 right 30 down 20
pGl_lbsAndTips->setHorizontalSpacing(30); //Set the gap between horizontal controls to 30, that is, the distance between each column
pGl_lbsAndTips->setVerticalSpacing(10);//Set the distance between each row to 10pGl_lbsAndTips->addWidget(lb_name, 0, 0, 1, 1);//First row and first column, occupying 1 row and 1 column
pGl_lbsAndTips->addWidget(lb_projectType, 1, 0, 1, 1);//Second The first column of the row occupies 1 row and 1 column
pGl_lbsAndTips->addWidget(lb_extractProcess, 2, 0, 1, 1);//The first column of the third row occupies 1 row and 1 column
pGl_lbsAndTips->addWidget(_le_name, 0, 1 , 1, 1);//The first row and second column, occupying 1 row and 1 column
pGl_lbsAndTips->addWidget(_cb_testNames, 1, 1, 1, 1);//The second row and second column, occupying 1 row and 1 column
pGl_lbsAndTips->addWidget(_cb_extract, 2, 1, 1, 1);//The second column of the third row, occupying 1 row and 1 column
pGl_lbsAndTips->addLayout(pHbl_tipsTitle, 0, 2, 1, 1);//First The third column of the row occupies 1 row and 1 column
pGl_lbsAndTips->addLayout(pHbl_tips_big, 1, 2, 1, 1);//The second row and the third column occupies 1 row and 1 column pGl_lbsAndTips->
addLayout(pHbl_tips_small, 2, 2 , 1, 1);//The third row and third column, occupying 1 row and 1 columnthis->setLayout(pGl_lbsAndTips);
2) There are controls that occupy multiple rows and multiple columns
A: Starting from row 0 and column 0, occupying three rows and one column
QGridLayout *pLayout = new QGridLayout();
pLayout->addWidget(A, 0, 0, 3, 1);
B: starting from row 0 and column 1, occupying one row and two columns
pLayout->addWidget(B, 0, 1, 1, 2);
C: Start with 1 row and 1 column, occupying one row and two columns
pLayout->addWidget(C, 1, 1, 1, 2);
D: Start with 2 rows and 1 column, occupying one row and one column
pLayout->addWidget(D, 2, 1, 1, 1);
E: Start with 2 rows and 2 columns, occupying one row and one column
pLayout->addWidget(E, 2, 2, 1, 1);
F: starting from row 0 and column 3, accounting for one row and one column
pLayout->addWidget(F, 0, 3, 1, 1);
G: Start with 1 row and 3 columns, occupying one row and one column
pLayout->addWidget(G, 1, 3, 1, 1);
H: Start with 2 rows and 3 columns, occupying one row and one column
pLayout->addWidget(H, 2, 3, 1, 1);
The grid layout above can satisfy the basic development, a small problem encountered in the project, record and share
--END--