[Python] PyQt – Layout

GUI를 만들고 싶을 때 가장 먼저 생각나는 부분이 layout이다. Layout 종류는 다양하지만 대표적인 것 몇가지를 소개한다.

Layout Alignment

import sys

from PyQt5.QtWidgets import QWidget
from PyQt5.QtWidgets import QLabel
from PyQt5.QtWidgets import QBoxLayout

from PyQt5.QtWidgets import QApplication
from PyQt5.QtCore import Qt

class Form(QWidget):
    def __init__(self):
        QWidget.__init__(self, flags=Qt.Widget)

        self.lb_1 = QLabel()
        self.lb_2 = QLabel()
        self.lb_3 = QLabel()
        self.lb_4 = QLabel()
        self.lb_5 = QLabel()

        self.layout_1 = QBoxLayout(QBoxLayout.LeftToRight, self)
        self.setLayout(self.layout_1)
        self.init_widget()

    def init_widget(self):
        self.setWindowTitle("Layout Basic")
        self.setFixedWidth(640)
        self.setFixedHeight(480)

        self.lb_1.setText("Label 1")
        self.lb_2.setText("Label 2")
        self.lb_3.setText("Label 3")
        self.lb_4.setText("Label 4")
        self.lb_5.setText("Label 5")

        self.lb_1.setStyleSheet("background-color: yellow")
        self.lb_2.setStyleSheet("background-color: red")
        self.lb_3.setStyleSheet("background-color: blue")
        self.lb_4.setStyleSheet("background-color: pink")
        self.lb_5.setStyleSheet("background-color: grey")

        self.layout_1.addWidget(self.lb_1)
        self.layout_1.addWidget(self.lb_2, alignment=Qt.AlignTop)
        self.layout_1.addWidget(self.lb_3, alignment=Qt.AlignBottom)
        self.layout_1.addWidget(self.lb_4, alignment=Qt.AlignVCenter)
        self.layout_1.addWidget(self.lb_5, alignment=Qt.AlignHCenter)


if __name__ == "__main__":
    app = QApplication(sys.argv)
    form = Form()
    form.show()
    exit(app.exec_())

Layout widget을 만들어서 main widget에 등록하고, layout에 각 컴포넌트인 label을 하나씩 추가한다. 여기서 layout option으로 추가 할 때 alignment의 값을 각각 다르게 준 것을 볼 수 있다.

Layout in Layout

import sys

from PyQt5.QtWidgets import QWidget
from PyQt5.QtWidgets import QLabel
from PyQt5.QtWidgets import QSpacerItem
from PyQt5.QtWidgets import QLineEdit
from PyQt5.QtWidgets import QTextEdit
from PyQt5.QtWidgets import QPushButton
from PyQt5.QtWidgets import QGroupBox

from PyQt5.QtWidgets import QBoxLayout
from PyQt5.QtWidgets import QHBoxLayout
from PyQt5.QtWidgets import QGridLayout
from PyQt5.QtWidgets import QFormLayout

from PyQt5.QtWidgets import QApplication
from PyQt5.QtCore import Qt

class Form(QWidget):
    def __init__(self):
        QWidget.__init__(self, flags=Qt.Widget)

        self.setWindowTitle("Various Layout Widgets")
        self.setFixedWidth(640)
        self.setFixedHeight(480)

        layout_base = QBoxLayout(QBoxLayout.TopToBottom, self)
        self.setLayout(layout_base)

        grp_1 = QGroupBox("QBoxLayout")
        layout_base.addWidget(grp_1)
        layout = QHBoxLayout()
        layout.addWidget(QPushButton("Butoon 1"))
        layout.addWidget(QPushButton("Butoon 1"))
        layout.addWidget(QPushButton("Butoon 1"))
        grp_1.setLayout(layout)

        grp_2 = QGroupBox("QGridLayout")
        layout_base.addWidget(grp_2)
        grp_2_layout = QBoxLayout(QBoxLayout.LeftToRight)
        grp_2.setLayout(grp_2_layout)
        layout = QGridLayout()
        layout.addItem(QSpacerItem(10, 100))
        layout.addWidget(QLabel("Line Edit 1:"), 1, 0)
        layout.addWidget(QLabel("Line Edit 2:"), 2, 0)
        layout.addWidget(QLabel("Line Edit 2:"), 3, 0)
        layout.addWidget(QLineEdit(), 1, 1)
        layout.addWidget(QLineEdit(), 2, 1)
        layout.addWidget(QLineEdit(), 3, 1)
        grp_2_layout.addLayout(layout)
        grp_2_layout.addWidget(QTextEdit())

        grp_3 = QGroupBox("QFormLaytout")
        layout_base.addWidget(grp_3)
        layout = QFormLayout()
        grp_3.setLayout(layout)
        layout.addRow(QLabel("Line Edit 1:"), QLineEdit())
        layout.addRow(QLabel("Line Edit 2:"), QLineEdit())
        layout.addRow(QLabel("Line Edit 3:"), QLineEdit())


if __name__ == "__main__":
    app = QApplication(sys.argv)
    form = Form()
    form.show()
    exit(app.exec_())

코드는 정말 간단하다. Layout 안에 layout을 넣어 우리가 원하는 구조로 디자인을 한 것이다.
코드에 layout이 3개가 (layout_1, layout_2, layout_3) 존재하는데 바깥에 가장 큰 layout, 그리고 내부에 각각 layout이 존재한다.

간단해서 따로 설명을 하지는 않겠다.

Practical Example

import sys

from PyQt5.QtWidgets import QWidget
from PyQt5.QtWidgets import QLabel
from PyQt5.QtWidgets import QSpacerItem
from PyQt5.QtWidgets import QLineEdit
from PyQt5.QtWidgets import QTextEdit
from PyQt5.QtWidgets import QPushButton
from PyQt5.QtWidgets import QGroupBox

from PyQt5.QtWidgets import QBoxLayout
from PyQt5.QtWidgets import QHBoxLayout
from PyQt5.QtWidgets import QGridLayout
from PyQt5.QtWidgets import QFormLayout

from PyQt5.QtWidgets import QApplication
from PyQt5.QtCore import Qt

class Form(QWidget):
    def __init__(self):
        QWidget.__init__(self, flags=Qt.Widget)

        self.setWindowTitle("Various Layout Widgets")
        self.setFixedWidth(640)
        self.setFixedHeight(480)

        layout_base = QBoxLayout(QBoxLayout.TopToBottom, self)
        self.setLayout(layout_base)

        grp_1 = QGroupBox("QBoxLayout")
        layout_base.addWidget(grp_1)
        layout = QHBoxLayout()
        layout.addWidget(QPushButton("Butoon 1"))
        layout.addWidget(QPushButton("Butoon 1"))
        layout.addWidget(QPushButton("Butoon 1"))
        grp_1.setLayout(layout)

        grp_2 = QGroupBox("QGridLayout")
        layout_base.addWidget(grp_2)
        grp_2_layout = QBoxLayout(QBoxLayout.LeftToRight)
        grp_2.setLayout(grp_2_layout)
        layout = QGridLayout()
        layout.addItem(QSpacerItem(10, 100))
        layout.addWidget(QLabel("Line Edit 1:"), 1, 0)
        layout.addWidget(QLabel("Line Edit 2:"), 2, 0)
        layout.addWidget(QLabel("Line Edit 2:"), 3, 0)
        layout.addWidget(QLineEdit(), 1, 1)
        layout.addWidget(QLineEdit(), 2, 1)
        layout.addWidget(QLineEdit(), 3, 1)
        grp_2_layout.addLayout(layout)
        grp_2_layout.addWidget(QTextEdit())

        grp_3 = QGroupBox("QFormLaytout")
        layout_base.addWidget(grp_3)
        layout = QFormLayout()
        grp_3.setLayout(layout)
        layout.addRow(QLabel("Line Edit 1:"), QLineEdit())
        layout.addRow(QLabel("Line Edit 2:"), QLineEdit())
        layout.addRow(QLabel("Line Edit 3:"), QLineEdit())


if __name__ == "__main__":
    app = QApplication(sys.argv)
    form = Form()
    form.show()
    exit(app.exec_())

Layout에 테두리를 보이기 위해서 사용하는게 QGroupBox()다. group box 위젯을 layout에 추가하면 보이게 된다.

layout = QGridLayout()는 grid 모양으로 layout을 그리는 것으로, 행렬 구조로 만드는 것을 말한다.
layout.addItem(QSpacerItem(10, 100))는 세로, 가로를 10, 100만큼 크기로 공백을 추가한다는 의미다. 그리고 QLabel()과 QLineEdit()을 각 x, y 인덱스에 넣어준다.