파이썬(PyQt5) QSplitter 위젯 이용해서 조절 가능한 영역 만들기

QSplitter 위젯은 화면에 추가한 여러 위젯의 경계를 구분하고 사용자가 원할 때 드래그해서 크기를 조절할 수 있도록 합니다. 우리가 컴퓨터에서 사용하는 대부분의 앱 화면은 각 영역이 QSplitter 처럼 드래그해서 크기 조절을 할 수 있습니다. 둘 간의 경계는 사용자가 마우스로 끌어서 늘이거나 줄입니다.

 

1. QSplitter 위젯으로 생성하기

 

▼ 먼저 화면을 구분하기 쉽게 QFrame 을 이용해서 만들어 보겠습니다. 각각 setFrameShape() 함수로 옵션을 달리해서 QFrame 의 형태를 지정했습니다. 자세한 내용은 바로 위에 링크가 걸린 QFrame 관련 포스팅에서 확인하시기 바랍니다.

from PyQt5.QtWidgets import QFrame

# splitter 에 추가할 Frame 생성
left_frame = QFrame()
left_frame.setFrameShape(QFrame.Box)

right_frame = QFrame()
right_frame.setFrameShape(QFrame.StyledPanel)

 

▼ 생성한 두 개의 QFrame 은 QSplitter 의 addWidget() 함수를 사용해서 모두 추가합니다. 위젯의 정렬 방향은 QSplitter 을 생성할 때 첫 번째 파라미터인 Qt.Orientation 로 결정합니다. Qt.Horizontal 은 위젯을 가로방향으로 정렬합니다.

# splitter 에 추가할 Frame 생성
left_frame = QFrame()
left_frame.setFrameShape(QFrame.Box)

right_frame = QFrame()
right_frame.setFrameShape(QFrame.StyledPanel)

# QSplitter  추가
self.splitter = QSplitter(Qt.Horizontal, self)
self.splitter.setGeometry(10, 10, 280, 100)
self.splitter.addWidget(left_frame)
self.splitter.addWidget(right_frame)

 

▼ 지금까지 작성한 소스를 실행한 결과입니다. 화면에는 두 개의 박스가 나타납니다. 중간 라인을 마우스를 누른 채 이동해 보세요. 라인의 위치를 조절해서 박스의 크기를 결정합니다.

 

2. 두 개의 QSplitter 로 화면 구성하기

 

▼ 다음은 위에서 만든 QSplitter 에 다른 QSplitter 를 추가해서 세로 방향으로도 다른 위젯을 추가해서 크기를 조절할 수 있도록 만들어 보겠습니다. QSplitter 는 addWidget() 으로 다른 QSplitter 을 추가할 수 있습니다. 먼저 QSplitter 에 추가할 QSplitter 를 생성합니다. 샘플로 QTextEdit 위젯을 두 개 추가합니다. 방향은 세로(Qt.Horizontal) 로 합니다.

# 하단 QSplitter 생성
txt_bottom1 = QTextEdit()
txt_bottom2 = QTextEdit()

self.bottom_splitter = QSplitter(Qt.Horizontal, self)
self.bottom_splitter.addWidget(txt_bottom1)
self.bottom_splitter.addWidget(txt_bottom2)

 

▼ 위에서 만든 QSplitter 은 화면 전체를 구성하는 QSplitter 에 추가합니다. QSplitter 을 추가하는 함수는 동일하게 addWidget() 입니다.

# splitter 에 추가할 Frame 생성
txt_top1 = QTextEdit()
txt_top2 = QTextEdit()

# QSplitter1  추가
self.top_splitter = QSplitter(Qt.Vertical, self)
self.top_splitter.addWidget(txt_top1)
self.top_splitter.addWidget(txt_top2)
self.top_splitter.addWidget(self.bottom_splitter)
self.top_splitter.resize(390, 300)

 

▼ 전체 소스는 다음과 같습니다.

#-*- coding: utf-8 -*-
import sys
from PyQt5.QtWidgets import QMainWindow, QApplication, \
    QSplitter, QTextEdit
from PyQt5.Qt import Qt


class MainWindow(QMainWindow):
    def __init__(self):
        super().__init__()
        # 윈도우 설정
        self.setGeometry(200, 100, 400, 600)  # x, y, w, h
        self.setWindowTitle('QSplitter Sample Window')

        # 하단 QSplitter 생성
        txt_bottom1 = QTextEdit()
        txt_bottom2 = QTextEdit()

        self.bottom_splitter = QSplitter(Qt.Horizontal, self)
        self.bottom_splitter.addWidget(txt_bottom1)
        self.bottom_splitter.addWidget(txt_bottom2)

        # splitter 에 추가할 Frame 생성
        txt_top1 = QTextEdit()
        txt_top2 = QTextEdit()

        # QSplitter1  추가
        self.top_splitter = QSplitter(Qt.Vertical, self)
        self.top_splitter.addWidget(txt_top1)
        self.top_splitter.addWidget(txt_top2)
        self.top_splitter.addWidget(self.bottom_splitter)
        self.top_splitter.resize(390, 300)


if __name__ == '__main__':
    app = QApplication(sys.argv)
    mainWindow = MainWindow()
    mainWindow.show()
    sys.exit(app.exec_())