Skip to content

CopperSpice Journal

CopperSpice Journal

Source Code  (Gui Example 36)

Posted on February 3, 2023February 7, 2023 By Barbara Geller

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”.

https://download.copperspice.com/journal/example_36.zip

Uncategorized

Post navigation

Previous Post: Source Code  (Gui Example 35)
Next Post: Source Code  (Gui Example 37)
  • CopperSpice Journal Homepage
    • Table of Contents
    • Example Source Code
    • Discussion Forum
  • CopperSpice Homepage
  • Github Repository
  • Videos About C++

Post comments or questions on our CopperSpice Forum

Copyright © 2021-2022 CopperSpice