The splitter layout is widely used in the development of the PC client. For example, the resource manager of the Visual Studio and the code area, output window, memory monitoring window, etc. are all the splitter layout; The side PDF area is also a splitter layout. QT provides a good implementation of the splitter layout, such as the following window

This window has the application of horizontal splitters and vertical splitters to achieve this effect. It can be dragged in the QT designer. The design layout can be realized, as shown below:

The red area is the horizontal and vertical divisor. Two controls are selected to make the splitter layout. This is very simple to do this in the QT designer. It is done in minutes.

QSplitter class introduction

QT provides the QSplitter class for split layout. QSplitter is derived from QFRAME,

Create a horizontal splitter

QSplitter* pHSplitter = new QSplitter(Qt::Horizontal, this);

Creation of vertical splitter

QSplitter* pHSplitter = new QSplitter(Qt::Vertical, this);

It should be noted that parameter 2, indicating the father pointer, which will affect the layout effect of the interface. The following code will be explained.

Add control

The splitter's addition control is similar to layout. For example, the following code is to add two controls to the vertical splitter.

pVSplitter->addWidget(pRightTopWidget);
pVSplitter->addWidget(pRightBottom);

setOpaqueResize

Setopaquresize can determine the display status of the separation bar after dragging to the corresponding position and playing the mouse.

Demonstration of split layout code

Here are how to achieve the above effect with C ++ code.
Create a QT GUI project based on QWIDGET, add the following code to the constructor:

#include "widget.h"
#include "ui_widget.h"
#include <QHBoxLayout>
#include <QVBoxLayout>
#include <QSplitter>
#include <QTextBrowser>

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

    this->setWindowTitle(u8"QT splitter layout _c ++ code");

    // Overall -use level layout
    QHBoxLayout* pHLay = new QHBoxLayout(this);

    // The overall horizontal splitter
    QSplitter* pHSplitter = new QSplitter(Qt::Horizontal, this);
    QWidget* pLeftWidget = new QWidget(this);
    pLeftWidget->setStyleSheet("background-color:rgb(54,54,54)");
    pLeftWidget->setMinimumWidth(200);

    // Add widget
    pHSplitter->addWidget(pLeftWidget);

    // The vertical split device on the right
    // Note the parameter phsplitter, indicating the father pointer
    QSplitter* pVSplitter = new QSplitter(Qt::Vertical, pHSplitter);

    // Display the separator after being dragged in place and playing the mouse
    pVSplitter->setOpaqueResize(false);

    QWidget* pRightTopWidget = new QWidget(this);
    pRightTopWidget->setStyleSheet("background-color:rgb(154, 154, 154)");

    QTextBrowser* pRightBottom = new QTextBrowser(this);

    pVSplitter->addWidget(pRightTopWidget);
    pVSplitter->addWidget(pRightBottom);

    pHSplitter->addWidget(pVSplitter);

    // Layout the split device
    pHLay->addWidget(pHSplitter);

    // Set the overall layout
    setLayout(pHLay);
}

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

Run can achieve the effect of the above figure.

The main use is the use of layout. In actual development, the interface layout must be set up first. It is necessary to discuss clearly with the product and design. Considering the various changes in the follow -up, how to achieve it with code is more convenient without bringing great changes.