PyQt - QSplitter Widget

In GUI development, a splitter allows resizable panel divisions, enhancing layout flexibility and user interaction within application. The panel define the division of one or more section. We can consider the scenario where multiple windows of an application are open and visible on the screen.

This is another advanced layout manager which allows the size of child widgets to be changed dynamically by dragging the boundaries between them. The Splitter control provides a handle that can be dragged to resize the controls.

The widgets in a QSplitter object are laid horizontally by default although the orientation can be changed to Qt.Vertical.

Following are the methods and signals of QSplitter class −

splitterMoved() is the only signal emitted by QSplitter object whenever the splitter handle is dragged.

Example

The following example has a splitter object, splitter1, in which a frame and QTextEdit object are horizontally added.

topleft = QFrame()
topleft.setFrameShape(QFrame.Shape.StyledPanel)
textedit = QTextEdit()
splitter1.addWidget(topleft)
splitter1.addWidget(textedit)

This splitter object splitter1 and a bottom frame object are added in another splitter, splitter2, vertically. The object splitters is finally added in the top level window.

bottom = QFrame()
splitter2 = QSplitter(Qt.Orientation.Vertical)
splitter2.addWidget(splitter1)
splitter2.addWidget(bottom)

hbox.addWidget(splitter2)
self.setLayout(hbox)

The complete code is as follows −

import sys
from PyQt6.QtCore import Qt
from PyQt6.QtWidgets import ( QApplication, QMainWindow, QTextEdit, 
QFrame, QSplitter, QHBoxLayout, QVBoxLayout, QWidget)
class Example(QMainWindow):
   def __init__(self):
      super().__init__()
      self.initUI()

   def initUI(self):
      # Create top-left and bottom frames with styled panel appearance
      topleft = QFrame()
      topleft.setFrameShape(QFrame.Shape.StyledPanel)
      bottom = QFrame()
      bottom.setFrameShape(QFrame.Shape.StyledPanel)

      # Create a text edit widget
      textedit = QTextEdit()

      # Create horizontal splitter to divide top area
      splitter1 = QSplitter(Qt.Orientation.Horizontal)
      splitter1.addWidget(topleft)
      splitter1.addWidget(textedit)
      # Set initial widget sizes
      splitter1.setSizes([100, 200])  

      # Create vertical splitter to divide left and bottom areas
      splitter2 = QSplitter(Qt.Orientation.Vertical)
      splitter2.addWidget(splitter1)
      splitter2.addWidget(bottom)

      # Create a central widget and layout to hold the splitters
      central_widget = QWidget()
      hbox = QHBoxLayout(central_widget)
      hbox.addWidget(splitter2)
      self.setCentralWidget(central_widget)

      # Apply cleanlooks style for visual consistency
      QApplication.setStyle("cleanlooks")

      self.setGeometry(300, 300, 300, 200)
      self.setWindowTitle("QSplitter")
      self.show()

if __name__ == "__main__":
   app = QApplication(sys.argv)
   ex = Example()
   sys.exit(app.exec())

The above code produces the following output −

Below the screenshot help us to understand the visualization of QSplitter widgets −