A GUI layout will typically contain multiple widgets which have a fixed position and a fixed size. The QSplitter class adds functionality for the user to modify the size of any child widgets, by dragging the boundary located between the controls.
#include <QtCore>
#include <QtGui>
class MainWindow : public QWidget
{
public:
MainWindow();
};
The declaration for MainWindow only needs to declare the constructor.
MainWindow::MainWindow()
{
setMinimumSize(700, 500);
QLabel *label = new QLabel();
label->setText("Splitter Example");
label->setAlignment(Qt::AlignHCenter);
QFont font = label->font();
font.setPointSize(11);
label->setFont(font);
QLabel *label_L = new QLabel{"LEFT PANE"};
QTextEdit *text_L = new QTextEdit{
"This text is located on the left side."};
QLabel *label_R = new QLabel{"RIGHT PANE"};
QTextEdit *text_R = new QTextEdit{
"Text located on the right side of the Splitter"};
QFrame *frame_L = new QFrame;
frame_L->setLineWidth(2);
frame_L->setFrameStyle(QFrame::Box);
QVBoxLayout *layout_L = new QVBoxLayout(frame_L);
layout_L->setContentsMargins(20, 10, 20, 15);
layout_L->addWidget(label_L);
layout_L->addWidget(text_L);
QFrame *frame_R = new QFrame;
frame_R->setLineWidth(2);
frame_R->setFrameStyle(QFrame::Box);
QVBoxLayout *layout_R = new QVBoxLayout(frame_R);
layout_R->setContentsMargins(20, 10, 20, 15);
layout_R->addWidget(label_R);
layout_R->addWidget(text_R);
QSplitter *splitter = new QSplitter;
splitter->addWidget(frame_L);
splitter->addWidget(frame_R);
splitter->setHandleWidth(10);
QPushButton *pb_close = new QPushButton();
pb_close->setText("Close");
QHBoxLayout *layout_button = new QHBoxLayout();
layout_button->addStretch();
layout_button->addWidget(pb_close);
layout_button->addStretch();
QVBoxLayout *layout_main = new QVBoxLayout(this);
layout_main->setContentsMargins(40, 20, 40, 15);
layout_main->addWidget(label);
layout_main->addSpacing(20);
layout_main->addWidget(splitter, 1);
layout_main->addSpacing(20);
layout_main->addLayout(layout_button);
connect(pb_close, &QPushButton::clicked,
this, &QWidget::close);
}
Two independent text edit controls are created on lines 13 and 17. Adding these two controls as child widgets of QSplitter will allow the user the ability to resize the splitter. For example, dragging the boundary to the left will make the left pane smaller and the right side bigger. The text in each pane will wrap as needed and adjust to the new window size.
To improve the user interface, the words “Left” and “Right” are placed above the left and right edit controls. To align the text over the edit control, lines 25 through 28 create a vertical layout which contain label_L and text_L. Lines 34 though 37 create the layout for the right pane.
Line 39 creates a new QSplitter object. Now we need to add the two layouts to the splitter. However, there is a slight problem since the splitter object does not have a method to add a layout. The only method to add children to a QSplitter is addWidget(), which must be passed an object that inherits from QWidget.
The QVBoxLayout class does not inherit from QWidget. To get around this we create a QFrame on line 21 and pass this object to the layout constructor on line 25. Then on line 40 the frame widget is added to the splitter.
Main Function
Since the source code for main() has not changed there is no need to show it again. Refer to example 3 or download the full source for this example.
Running the Example
To build and run this example use the same CMake build file and commands as we showed for the first example. The only suggested modification is on line 2 of the CMakeLists.txt file, change “example_1” to “example_36”.