QT screen adaptive automatic layout, drag the window to automatically grow larger and smaller (I)

QT Screen adaptive auto layout , Drag larger and smaller , For a long time , Good layout ui after , As the screen resolution changes , Change to a notebook or 4k When the display screen , Or maximize , drag windows ,ui It's a mess , Huddle together , Or it can't change with the enlargement of the window . Layout is a very important step .

Here's a picture , Drag the window to maximize , The result is on the right box It doesn't grow with the change of canvas background .

The following figure is after adding the layout , Drag to the smallest graph

Drag the largest graph

Compare the smallest and largest graph , You can see that the control is automatically stretched , It changes automatically as the window is enlarged and dragged .

To achieve this function , Just add the layout , In the designer interface , Pull in spring , And adding controls to horizontal or vertical layouts , Grid layout . What layout to add , As required , Design layout .

First, you need to make a local layout of the control , You can join groupBox, Yes box Layout with grids , Click to select the device network settings above groupbox, spot designer The grid layout in the toolbar above , Whole groupbox Controls in , It will be set to the grid layout , Automatic layout , But the controls inside cannot be centered , Disgraceful , The original position was disturbed , At this time , Spring layout can be added , As above , Center all controls , The middle can be separated by a certain distance . After the control layout in the device network settings , For the following controls ,lable And edit box , Parameter operation buttons for layout , They need to be locally arranged , Parameter setting , Press and hold the mouse to drag the frame to read parameters , Issue parameters , And the left middle right spring , Choose the horizontal layout , This will center , It may get smaller , You can resize on the right or drag the mouse directly to enlarge , Then to another group of people who want to arrange ui Make a layout , Yes mac, Several examples of network settings lable Make a layout , For compactness , You can first put the four in the box ui Control , Choose grille or form Layout , Then sit by , Add spring on the right , Select the spring and the grid layout of the just four controls , Make a horizontal layout .ok It's already bad , In the vertical direction , There are three horizontal layouts , At this time, the overall layout of the entire interface , such , Drag the picture to follow the change , In the blank space of the canvas , Click to select the canvas , Select the vertical layout , That's it , In order to be vertical , Let the three horizontal layouts , The center and horizontal layouts can be separated , A certain distance , Can be separated , Add spring , If we click the vertical layout , First break it , Click on the vertical layout of the toolbar again , You can break it , Finally, repeat the action just now , Make vertical layout again , The overall layout is good .
All in all , It is to carry out various combined local layouts for some controls , Finally, the overall layout is arranged as you want .

Finish setting up , After operation , Drag the , See if it is the desired result , If not , Then set the parameters of each layout , On the right side of the design, you can set properties , This is also important .

For example, after the vertical layout , We don't want device network settings box In the middle , But a little distance from above , Don't start laying too low , There are also buttons for reading parameters , Don't want to lay too close to the top, but at the bottom , This is the time , It is important to set the properties of the spring , I also found this by chance , Set to maximum , When arranging , Maximum spacing above 40 Pixel , When it gets smaller , It gets smaller , The spring at the bottom , It can also be set to the maximum , such , The lowest end will only be the largest 40 Pixel distance . This is always at the bottom or top , Not in the middle , however groupbox Controls in , I need to set it to be centered , Cannot be set to maximum , Just use the default , It can be big or small. , In addition, vertical layout , The two springs in the middle , Use default familiarity , So when stretching the window at a vertical distance , Automatic distance adjustment in the middle , Look at the two graphs above, minimize and maximize , You can see it , I'm not going to repeat that , But this is a good design , It is also an important setting . Feel for yourself more , Just play it out .

Let's look at the picture below , The difference from the first figure , my ip Set several edit boxes , The first one is completely shorter , The input words can't be put , So there's a problem , So next , Is to set and adjust the control ,

Take an edit box to explain , Here's the picture , Set his properties , Dragging , Don't want it to get shorter , It can be set to fixed , If the canvas background setting is not too small . If the canvas is set to minimum , You can't set it like this （ The minimum setting of canvas background will be introduced later ）, Otherwise, when stretching the window , Will not pull the smallest .

It is important to set the horizontal and vertical stretching strategy , as follows , There is a minimum , Maximum ,expanding( It can be big or small. ),fixed（ Fixed size ）

as follows , It can be horizontal or vertical , Set to extensible , In the largest and smallest , Setting limits infinite stretch deformation doesn't look good , It can also be set horizontally expanding, vertical fixed.


stay groupbox in , You can also set , such , When pulling , This box It won't deform . All of these , Look at yourself .
These are described above , It's very important , That's how it works ui Make a good layout .

Finally, I'd like to introduce , Set up widget The largest and smallest of this canvas background , This allows adaptive resolution screens .
getStatusBar()->setFixedHeight(18);// If this sentence is set to 0, The minimize control in the lower right corner , You won't see , Cannot minimize . If you don't want to drag , You can do this
setMinimumSize(QSize(650, 480));
setMaximumSize(QSize(1300, 940));
resize(1300, 940);
stay qmainwindow In the code . Add these lines of code , You can see the maximum and minimum limits ,resize Is to resize , The first time you open it , I set maximization

If not the minimum limit , It will be like this , The back is covered , The reason is my controls , Set to fixed , Or limit the minimum , It's not small , Said the next half was gone , At this time , Yes mainwindow You can also limit the minimum .

Okay , Write casually , But important experience . Look at the picture below , How many combined layouts have I added , I didn't know before , Dot multiply panoramic layout , Then things went wrong , Spring , Spring , Spring , Say something important three times , Springs are very useful .

The interface below is more complex , More layout , Slowly adjust , Toss about .



Another explanation . This picture , More complicated , Showing pictures of lable, And the control on the right , Overall layout , It is different from the other above ones that only need vertical layout , I will lay out several local layouts vertically first , Then arrange it horizontally , So it's all kinds of combination layout , The essence of this sentence , I wonder if you have understood it , Those controls on the right , From top to bottom , I did the grid layout , Horizontal layout , The vertical layout should be sorted out first , Then put all on the right , After vertical layout and partial layout . Finally, the horizontal layout of the whole interface , It's too complicated .

If not designed by the designer ui, It's written in code , That can only be written in the code , Added layout , find UI Generated header file , You can see how to add a layout , A lot of code , The first setting interface is so complicated , So my idea is , Don't be too obsessed with writing credit codes , Or the designer designer, Combine the two , It will be easy .

class Ui_SetdevipWidget
{
    
public:
    QVBoxLayout *verticalLayout_2;
    QSpacerItem *verticalSpacer_12;
    QGroupBox *groupBox_2;
    QGridLayout *gridLayout;
    QLabel *label_68;
    QLabel *label_73;
    QLineEdit *lineEdit_IP;
    QSpacerItem *horizontalSpacer_3;
    QSpacerItem *verticalSpacer_5;
    QSpacerItem *verticalSpacer;
    QSpacerItem *verticalSpacer_3;
    QSpacerItem *horizontalSpacer_2;
    QSpacerItem *horizontalSpacer;
    QSpacerItem *horizontalSpacer_5;
    QSpacerItem *horizontalSpacer_6;
    QSpacerItem *verticalSpacer_2;
    QSpacerItem *verticalSpacer_4;
    QSpacerItem *verticalSpacer_6;
    QSpacerItem *horizontalSpacer_4;
    QLineEdit *lineEdit_getway;
    QLineEdit *lineEdit_netmask;
    QLabel *label_74;
    QLabel *label_67;
    QLineEdit *lineEdit_Mac;
    QSpacerItem *verticalSpacer_8;
    QHBoxLayout *horizontalLayout_4;
    QSpacerItem *horizontalSpacer_10;
    QVBoxLayout *verticalLayout;
    QHBoxLayout *horizontalLayout_2;
    QLabel *label_10;
    QLineEdit *lineEdit_2;
    QHBoxLayout *horizontalLayout;
    QLabel *label_9;
    QLineEdit *lineEdit;
    QSpacerItem *horizontalSpacer_11;
    QSpacerItem *verticalSpacer_11;
    QHBoxLayout *horizontalLayout_3;
    QSpacerItem *horizontalSpacer_8;
    FToolButton *toolButton_ReadParam;
    QSpacerItem *horizontalSpacer_7;
    FToolButton *toolButton_DownloadParam;
    QSpacerItem *horizontalSpacer_9;
    QSpacerItem *verticalSpacer_10;

    void setupUi(QWidget *SetdevipWidget)
    {
    
        if (SetdevipWidget->objectName().isEmpty())
            SetdevipWidget->setObjectName(QStringLiteral("SetdevipWidget"));
        SetdevipWidget->setEnabled(true);
        SetdevipWidget->resize(1133, 883);
        verticalLayout_2 = new QVBoxLayout(SetdevipWidget);
        verticalLayout_2->setObjectName(QStringLiteral("verticalLayout_2"));
        verticalSpacer_12 = new QSpacerItem(20, 40, QSizePolicy::Minimum, QSizePolicy::Maximum);

        verticalLayout_2->addItem(verticalSpacer_12);

        groupBox_2 = new QGroupBox(SetdevipWidget);
        groupBox_2->setObjectName(QStringLiteral("groupBox_2"));
        QSizePolicy sizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);
        sizePolicy.setHorizontalStretch(0);
        sizePolicy.setVerticalStretch(0);
        sizePolicy.setHeightForWidth(groupBox_2->sizePolicy().hasHeightForWidth());
        groupBox_2->setSizePolicy(sizePolicy);
        groupBox_2->setMinimumSize(QSize(200, 150));
        groupBox_2->setMaximumSize(QSize(11131, 291));
        QFont font;
        font.setPointSize(11);
        font.setBold(true);
        font.setWeight(75);
        groupBox_2->setFont(font);
        gridLayout = new QGridLayout(groupBox_2);
        gridLayout->setObjectName(QStringLiteral("gridLayout"));
        label_68 = new QLabel(groupBox_2);
        label_68->setObjectName(QStringLiteral("label_68"));
        QFont font1;
        font1.setPointSize(11);
        font1.setBold(false);
        font1.setWeight(50);
        label_68->setFont(font1);

        gridLayout->addWidget(label_68, 1, 1, 1, 1);

        label_73 = new QLabel(groupBox_2);
        label_73->setObjectName(QStringLiteral("label_73"));
        label_73->setFont(font1);

        gridLayout->addWidget(label_73, 1, 5, 1, 1);

        lineEdit_IP = new QLineEdit(groupBox_2);
        lineEdit_IP->setObjectName(QStringLiteral("lineEdit_IP"));
        QSizePolicy sizePolicy1(QSizePolicy::Fixed, QSizePolicy::Fixed);
        sizePolicy1.setHorizontalStretch(0);
        sizePolicy1.setVerticalStretch(0);
        sizePolicy1.setHeightForWidth(lineEdit_IP->sizePolicy().hasHeightForWidth());
        lineEdit_IP->setSizePolicy(sizePolicy1);
        QFont font2;
        font2.setBold(false);
        font2.setWeight(50);
        lineEdit_IP->setFont(font2);

        gridLayout->addWidget(lineEdit_IP, 1, 6, 1, 1);

        horizontalSpacer_3 = new QSpacerItem(186, 20, QSizePolicy::Expanding, QSizePolicy::Minimum);

        gridLayout->addItem(horizontalSpacer_3, 1, 7, 1, 1);

        verticalSpacer_5 = new QSpacerItem(20, 40, QSizePolicy::Minimum, QSizePolicy::Expanding);

        gridLayout->addItem(verticalSpacer_5, 2, 2, 1, 1);

        verticalSpacer = new QSpacerItem(20, 40, QSizePolicy::Minimum, QSizePolicy::Expanding);

        gridLayout->addItem(verticalSpacer, 0, 2, 1, 1);

        verticalSpacer_3 = new QSpacerItem(20, 40, QSizePolicy::Minimum, QSizePolicy::Expanding);

        gridLayout->addItem(verticalSpacer_3, 0, 6, 1, 1);

        horizontalSpacer_2 = new QSpacerItem(186, 20, QSizePolicy::Expanding, QSizePolicy::Minimum);

        gridLayout->addItem(horizontalSpacer_2, 1, 4, 1, 1);

        horizontalSpacer = new QSpacerItem(186, 20, QSizePolicy::Expanding, QSizePolicy::Minimum);

        gridLayout->addItem(horizontalSpacer, 1, 0, 1, 1);

        horizontalSpacer_5 = new QSpacerItem(186, 20, QSizePolicy::Expanding, QSizePolicy::Minimum);

        gridLayout->addItem(horizontalSpacer_5, 3, 4, 1, 1);

        horizontalSpacer_6 = new QSpacerItem(186, 20, QSizePolicy::Expanding, QSizePolicy::Minimum);

        gridLayout->addItem(horizontalSpacer_6, 3, 7, 1, 1);

        verticalSpacer_2 = new QSpacerItem(20, 40, QSizePolicy::Minimum, QSizePolicy::Expanding);

        gridLayout->addItem(verticalSpacer_2, 4, 2, 1, 1);

        verticalSpacer_4 = new QSpacerItem(20, 40, QSizePolicy::Minimum, QSizePolicy::Expanding);

        gridLayout->addItem(verticalSpacer_4, 4, 6, 1, 1);

        verticalSpacer_6 = new QSpacerItem(20, 40, QSizePolicy::Minimum, QSizePolicy::Expanding);

        gridLayout->addItem(verticalSpacer_6, 2, 6, 1, 1);

        horizontalSpacer_4 = new QSpacerItem(186, 20, QSizePolicy::Expanding, QSizePolicy::Minimum);

        gridLayout->addItem(horizontalSpacer_4, 3, 0, 1, 1);

        lineEdit_getway = new QLineEdit(groupBox_2);
        lineEdit_getway->setObjectName(QStringLiteral("lineEdit_getway"));
        sizePolicy1.setHeightForWidth(lineEdit_getway->sizePolicy().hasHeightForWidth());
        lineEdit_getway->setSizePolicy(sizePolicy1);
        lineEdit_getway->setFont(font2);

        gridLayout->addWidget(lineEdit_getway, 3, 2, 1, 1);

        lineEdit_netmask = new QLineEdit(groupBox_2);
        lineEdit_netmask->setObjectName(QStringLiteral("lineEdit_netmask"));
        sizePolicy1.setHeightForWidth(lineEdit_netmask->sizePolicy().hasHeightForWidth());
        lineEdit_netmask->setSizePolicy(sizePolicy1);
        lineEdit_netmask->setFont(font2);

        gridLayout->addWidget(lineEdit_netmask, 3, 6, 1, 1);

        label_74 = new QLabel(groupBox_2);
        label_74->setObjectName(QStringLiteral("label_74"));
        label_74->setFont(font1);

        gridLayout->addWidget(label_74, 3, 1, 1, 1);

        label_67 = new QLabel(groupBox_2);
        label_67->setObjectName(QStringLiteral("label_67"));
        label_67->setFont(font1);

        gridLayout->addWidget(label_67, 3, 5, 1, 1);

        lineEdit_Mac = new QLineEdit(groupBox_2);
        lineEdit_Mac->setObjectName(QStringLiteral("lineEdit_Mac"));
        sizePolicy1.setHeightForWidth(lineEdit_Mac->sizePolicy().hasHeightForWidth());
        lineEdit_Mac->setSizePolicy(sizePolicy1);
        lineEdit_Mac->setFont(font2);

        gridLayout->addWidget(lineEdit_Mac, 1, 2, 1, 1);


        verticalLayout_2->addWidget(groupBox_2);

        verticalSpacer_8 = new QSpacerItem(20, 98, QSizePolicy::Minimum, QSizePolicy::Expanding);

        verticalLayout_2->addItem(verticalSpacer_8);

        horizontalLayout_4 = new QHBoxLayout();
        horizontalLayout_4->setObjectName(QStringLiteral("horizontalLayout_4"));
        horizontalLayout_4->setSizeConstraint(QLayout::SetDefaultConstraint);
        horizontalSpacer_10 = new QSpacerItem(388, 20, QSizePolicy::Expanding, QSizePolicy::Minimum);

        horizontalLayout_4->addItem(horizontalSpacer_10);

        verticalLayout = new QVBoxLayout();
        verticalLayout->setObjectName(QStringLiteral("verticalLayout"));
        horizontalLayout_2 = new QHBoxLayout();
        horizontalLayout_2->setObjectName(QStringLiteral("horizontalLayout_2"));
        label_10 = new QLabel(SetdevipWidget);
        label_10->setObjectName(QStringLiteral("label_10"));
        label_10->setEnabled(false);
        QSizePolicy sizePolicy2(QSizePolicy::Expanding, QSizePolicy::Fixed);
        sizePolicy2.setHorizontalStretch(0);
        sizePolicy2.setVerticalStretch(0);
        sizePolicy2.setHeightForWidth(label_10->sizePolicy().hasHeightForWidth());
        label_10->setSizePolicy(sizePolicy2);
        QFont font3;
        font3.setPointSize(11);
        label_10->setFont(font3);

        horizontalLayout_2->addWidget(label_10);

        lineEdit_2 = new QLineEdit(SetdevipWidget);
        lineEdit_2->setObjectName(QStringLiteral("lineEdit_2"));
        lineEdit_2->setEnabled(true);
        sizePolicy1.setHeightForWidth(lineEdit_2->sizePolicy().hasHeightForWidth());
        lineEdit_2->setSizePolicy(sizePolicy1);
        lineEdit_2->setFont(font3);

        horizontalLayout_2->addWidget(lineEdit_2);


        verticalLayout->addLayout(horizontalLayout_2);

        horizontalLayout = new QHBoxLayout();
        horizontalLayout->setObjectName(QStringLiteral("horizontalLayout"));
        label_9 = new QLabel(SetdevipWidget);
        label_9->setObjectName(QStringLiteral("label_9"));
        label_9->setEnabled(false);
        sizePolicy2.setHeightForWidth(label_9->sizePolicy().hasHeightForWidth());
        label_9->setSizePolicy(sizePolicy2);
        label_9->setFont(font3);

        horizontalLayout->addWidget(label_9);

        lineEdit = new QLineEdit(SetdevipWidget);
        lineEdit->setObjectName(QStringLiteral("lineEdit"));
        lineEdit->setEnabled(true);
        sizePolicy1.setHeightForWidth(lineEdit->sizePolicy().hasHeightForWidth());
        lineEdit->setSizePolicy(sizePolicy1);
        lineEdit->setFont(font3);

        horizontalLayout->addWidget(lineEdit);


        verticalLayout->addLayout(horizontalLayout);


        horizontalLayout_4->addLayout(verticalLayout);

        horizontalSpacer_11 = new QSpacerItem(418, 20, QSizePolicy::Expanding, QSizePolicy::Minimum);

        horizontalLayout_4->addItem(horizontalSpacer_11);


        verticalLayout_2->addLayout(horizontalLayout_4);

        verticalSpacer_11 = new QSpacerItem(20, 98, QSizePolicy::Minimum, QSizePolicy::Expanding);

        verticalLayout_2->addItem(verticalSpacer_11);

        horizontalLayout_3 = new QHBoxLayout();
        horizontalLayout_3->setObjectName(QStringLiteral("horizontalLayout_3"));
        horizontalLayout_3->setSizeConstraint(QLayout::SetDefaultConstraint);
        horizontalSpacer_8 = new QSpacerItem(288, 58, QSizePolicy::Expanding, QSizePolicy::Minimum);

        horizontalLayout_3->addItem(horizontalSpacer_8);

        toolButton_ReadParam = new FToolButton(SetdevipWidget);
        toolButton_ReadParam->setObjectName(QStringLiteral("toolButton_ReadParam"));
        sizePolicy1.setHeightForWidth(toolButton_ReadParam->sizePolicy().hasHeightForWidth());
        toolButton_ReadParam->setSizePolicy(sizePolicy1);
        toolButton_ReadParam->setMinimumSize(QSize(120, 50));
        toolButton_ReadParam->setMaximumSize(QSize(120, 50));
        toolButton_ReadParam->setFont(font3);

        horizontalLayout_3->addWidget(toolButton_ReadParam);

        horizontalSpacer_7 = new QSpacerItem(218, 58, QSizePolicy::Expanding, QSizePolicy::Minimum);

        horizontalLayout_3->addItem(horizontalSpacer_7);

        toolButton_DownloadParam = new FToolButton(SetdevipWidget);
        toolButton_DownloadParam->setObjectName(QStringLiteral("toolButton_DownloadParam"));
        sizePolicy1.setHeightForWidth(toolButton_DownloadParam->sizePolicy().hasHeightForWidth());
        toolButton_DownloadParam->setSizePolicy(sizePolicy1);
        toolButton_DownloadParam->setMinimumSize(QSize(120, 50));
        toolButton_DownloadParam->setMaximumSize(QSize(120, 50));
        toolButton_DownloadParam->setFont(font3);

        horizontalLayout_3->addWidget(toolButton_DownloadParam);

        horizontalSpacer_9 = new QSpacerItem(258, 58, QSizePolicy::Expanding, QSizePolicy::Minimum);

        horizontalLayout_3->addItem(horizontalSpacer_9);


        verticalLayout_2->addLayout(horizontalLayout_3);

        verticalSpacer_10 = new QSpacerItem(20, 52, QSizePolicy::Minimum, QSizePolicy::Maximum);

        verticalLayout_2->addItem(verticalSpacer_10);

        groupBox_2->raise();

        retranslateUi(SetdevipWidget);

        QMetaObject::connectSlotsByName(SetdevipWidget);
    } // setupUi