[Python] Pyside 레이아웃 설정, 수직, 수평, 겹치기, 그리드(Layout, Vertical, Horizontal, Stack, Grid)

 

목차

 

 

 

 

Pyside는 최신 Pyside6를 사용했음을 알려드립니다.

 

파이썬 Pyside 레이아웃 설정: 수직(Vertical)

이번 포스트에서는 레이아웃(Layout) 설정에 대해 알아보겠습니다. 수직 레이아웃은 QVBoxLayout 객체를 사용해서 설정합니다. 아래 전체 예제 코드와 결과를 확인하고 코드에 대한 설명을 드리도록 하겠습니다.

 

 

수직 배치 예제 코드>>

import sys
from PySide6.QtWidgets import QApplication, QMainWindow, QWidget, QVBoxLayout
from PySide6.QtGui import QPalette, QColor
from PySide6.QtCore import QSize

class Set_color(QWidget):

    def __init__(self, color):
        super(Set_color, self).__init__()

        self.setAutoFillBackground(True)

        palette = self.palette()
        palette.setColor(QPalette.Window, QColor(color))
        self.setPalette(palette)

class Qt_Ex(QMainWindow):

    def __init__(self):
        super(Qt_Ex, self).__init__()

        self.setWindowTitle("Qt Example")
        self.setFixedSize(QSize(250, 300))

        layout = QVBoxLayout()

        layout.addWidget(Set_color('red'))
        layout.addWidget(Set_color('green'))
        layout.addWidget(Set_color('blue'))

        widget = QWidget()
        widget.setLayout(layout)
        self.setCentralWidget(widget)


app = QApplication(sys.argv)
w = Qt_Ex()
w.show()
app.exec()

 

 

결과>>

 

 

주석>>

class Set_color(QWidget):

색상을 넣기 위해 클래스를 설정합니다. 한번만 색상을 넣을 경우 Qt_Ex 클래스에서 처리하면 되나 여러번 색상 설정을 해야하기 때문에 별도로 제작하였습니다.

 

 

    def __init__(self, color):
        super(Set_color, self).__init__()

PySide 초기 값을 이용하기 위해 super로 상속해옵니다. 

 

 

        palette = self.palette()
        palette.setColor(QPalette.Window, QColor(color))
        self.setPalette(palette)

파렛트 함수로 색상을 설정합니다.

 

 

 

class Qt_Ex(QMainWindow):

메인함수로 GUI 윈도우 전체적인 설정을 합니다.

 

 

        layout = QVBoxLayout()

        layout.addWidget(Set_color('red'))
        layout.addWidget(Set_color('green'))
        layout.addWidget(Set_color('blue'))

 

QVBoxLayout 로 객체를 선언하고 각 레이어에 색상을 RGB로 각 각 넣습니다. addWidget을 통해서 위에서 아래로 순차적으로 위젯에 색을 하나씩 추가 합니다. 

 

 

 

 

 

 

 

파이썬 Pyside 레이아웃 설정: 수평(Horizontal)

 

사실 수평으로 배치하는 방법은 수직에서 몇가지만 수정하면 됩니다. 주석에서 설명드리겠습니다.

 

 

수평 배치 예제 코드>>

import sys
from PySide6.QtWidgets import QApplication, QMainWindow, QWidget, QHBoxLayout
from PySide6.QtGui import QPalette, QColor
from PySide6.QtCore import QSize

class Set_color(QWidget):

    def __init__(self, color):
        super(Set_color, self).__init__()

        self.setAutoFillBackground(True)

        palette = self.palette()
        palette.setColor(QPalette.Window, QColor(color))
        self.setPalette(palette)

class Qt_Ex(QMainWindow):

    def __init__(self):
        super(Qt_Ex, self).__init__()

        self.setWindowTitle("Qt Example")
        self.setFixedSize(QSize(300, 100))

        layout = QHBoxLayout()

        layout.addWidget(Set_color('red'))
        layout.addWidget(Set_color('green'))
        layout.addWidget(Set_color('blue'))

        widget = QWidget()
        widget.setLayout(layout)
        self.setCentralWidget(widget)


app = QApplication(sys.argv)
w = Qt_Ex()
w.show()
app.exec()

 

 

 

 

결과>>

 

 

 

 

 

주석>>

from PySide6.QtWidgets import QApplication, QMainWindow, QWidget, QHBoxLayout

QVBoxLayout 라이브러리에서 QHBoxLayout로 변경하였습니다.

 

 

 

        self.setFixedSize(QSize(300, 100))

        layout = QHBoxLayout()

 

윈도우 크기를 변경하고 layout 객체를 QHBoxLayout로 선언 합니다. 

결과는 왼쪽에서 부터 오른쪽으로 채워 집니다. 

 

 

 

 

 

 

 

파이썬 Pyside 레이아웃 설정: 겹치기(Stack, Overlay)

이번에는 한 화면에 여러개의 색상을 겹쳐 놓고 버튼을 누을때 마다 밑에 있는 화면이 하나씩 올라오게 만들어 보겠습니다. 마치 신호등의 스위치를 누르면 녹색 - 노랑 - 빨강 - 노랑 - 녹색 순으로 진행되게 만들었습니다.

 

 

 

겹치기 배치 예제 코드>>

from PySide6.QtCore import QSize
from PySide6.QtGui import QPalette, QColor
from PySide6.QtWidgets import QApplication, QMainWindow, QPushButton, QStackedLayout, QVBoxLayout, QWidget
import sys

class Set_color(QWidget):

    def __init__(self, color):
        super(Set_color, self).__init__()

        self.setAutoFillBackground(True)

        palette = self.palette()
        palette.setColor(QPalette.Window, QColor(color))
        self.setPalette(palette)


class Qt_Ex(QMainWindow):

    def __init__(self):
        super(Qt_Ex, self).__init__()

        self.setWindowTitle("Qt Example")
        self.setFixedSize(QSize(150, 150))

        over_layout = QVBoxLayout()
        btn_layout = QVBoxLayout()
        self.stack_layout = QStackedLayout()

        over_layout.addLayout(btn_layout)
        over_layout.addLayout(self.stack_layout)

        btn = QPushButton("신호등")
        btn.pressed.connect(self.change_color)
        btn_layout.addWidget(btn)

        self.stack_layout.addWidget(Set_color("red"))
        self.stack_layout.addWidget(Set_color("yellow"))
        self.stack_layout.addWidget(Set_color("green"))
        self.stack_layout.addWidget(Set_color("yellow"))

        widget = QWidget()
        widget.setLayout(over_layout)
        self.setCentralWidget(widget)

        self.cnt = 0
    def change_color(self):
        self.stack_layout.setCurrentIndex(self.cnt)
        self.cnt = self.cnt + 1
        if self.cnt == 4:
            self.cnt = 0


app = QApplication(sys.argv)

window = Qt_Ex()
window.show()

app.exec()

 

 

 

결과>>

 

 

 

 

주석>>

        over_layout = QVBoxLayout()
        btn_layout = QVBoxLayout()
        self.stack_layout = QStackedLayout()

전체 구성은 over_layout에 넣고 그 안에 btn_layout과 stack_layout을 넣기 위해 Layout 객체를 형성합니다. stack_layout의 경우 겹치기를 하기위해 QStackedLayout을 사용합니다.

 

 

        over_layout.addLayout(btn_layout)
        over_layout.addLayout(self.stack_layout)

over_layout 안에 두 layout을 넣어줍니다.

 

 

        btn = QPushButton("신호등")
        btn.pressed.connect(self.change_color)
        btn_layout.addWidget(btn)

버튼 위젯을 만들어 주고 버튼 클릭 시 change_color 함수를 실행합니다.

 

        self.stack_layout.addWidget(Set_color("red"))
        self.stack_layout.addWidget(Set_color("yellow"))
        self.stack_layout.addWidget(Set_color("green"))
        self.stack_layout.addWidget(Set_color("yellow"))

하나씩 쌓아 줍니다. 제일 위에 레이아웃이 빨간색이 됩니다. 

 

        self.cnt = 0
    def change_color(self):
        self.stack_layout.setCurrentIndex(self.cnt)
        self.cnt = self.cnt + 1
        if self.cnt == 4:
            self.cnt = 0

버튼 클릭 시 index 번호 cnt가 바뀌면서 stack의 위치를 옮겨 줍니다. 

 

 

 

 

 

 

 

파이썬 Pyside 레이아웃 설정: 그리드(Grid)

 

그리드(Grid)는 바둑판과 같이 가로 세로의 포인트를 가지고 정확한 위치를 지정할 수 있습니다. 그리드는 QGridLayout으로 설정 가능 합니다. 

 

 

그리드 예제 코드>>

from PySide6.QtCore import QSize
from PySide6.QtGui import QPalette, QColor
from PySide6.QtWidgets import QApplication, QMainWindow, QGridLayout, QWidget, QLabel
import sys

class Set_color(QWidget):

    def __init__(self, color):
        super(Set_color, self).__init__()

        self.setAutoFillBackground(True)

        palette = self.palette()
        palette.setColor(QPalette.Window, QColor(color))
        self.setPalette(palette)

class Qt_Ex(QMainWindow):

    def __init__(self):
        super(Qt_Ex, self).__init__()

        self.setWindowTitle("Qt Example")
        self.setFixedSize(QSize(150, 150))

        grid_layout = QGridLayout()

        grid_layout.addWidget(QLabel("<0,0>"), 0, 0)
        grid_layout.addWidget(Set_color('green'), 0, 1)
        grid_layout.addWidget(Set_color('red'), 1, 0)
        grid_layout.addWidget(QLabel("<1,1>"), 1, 1)
        

        widget = QWidget()
        widget.setLayout(grid_layout)
        self.setCentralWidget(widget)

app = QApplication(sys.argv)

window = Qt_Ex()
window.show()

app.exec()

 

 

결과>>

 

 

 

 

주석>>

grid_layout = QGridLayout()

그리드 객체를 선언 합니다. 

 

 

        grid_layout.addWidget(QLabel("<0,0>"), 0, 0)
        grid_layout.addWidget(Set_color('green'), 0, 1)
        grid_layout.addWidget(Set_color('red'), 1, 0)
        grid_layout.addWidget(QLabel("<1,1>"), 1, 1)

x를 0과 1 y를 0과1 해서 총 4개의 박스가 있는 그리드를 만들고 각 박스에 위치 정보나 색상을 넣습니다.