4강. QGridLayout
1. QGridLayout: 표(그리드) 레이아웃
: 행/열로 위젯을 배치하는 2차원 레이아웃 공식문서
import sys
from PySide6.QtWidgets import (
QApplication, QWidget, QPushButton, QGridLayout
)
class GridExample(QWidget):
def __init__(self):
super().__init__()
b1 = QPushButton("One")
b2 = QPushButton("Two")
b3 = QPushButton("Three")
b4 = QPushButton("Four")
b5 = QPushButton("Five")
layout = QGridLayout(self)
layout.addWidget(b1, 0, 0) # (row=0, col=0)
layout.addWidget(b2, 0, 1) # (0, 1)
layout.addWidget(b3, 1, 0, 1, 2) # (1,0)에서 1행 2열 span
layout.addWidget(b4, 2, 0)
layout.addWidget(b5, 2, 1)
if __name__ == "__main__":
app = QApplication(sys.argv)
w = GridExample()
w.show()
sys.exit(app.exec())사용된 좌표 의미
- (0, 0) = 0행 0열
- (1, 0) = 1행 0열
2. Qt Designer 에서 QGridLayout 사용하기 (1)
위젯을 선택하고 레이아웃을 적용하면 → 선택한 위젯들만 묶는 부분 레이아웃이 만들어집니다.
3. Qt Designer 에서 QGridLayout 사용하기 (2)
`Break Layout`을 누르면 방금 만든 `QVBoxLayout` 묶음이 해제됩니다.
버튼들은 폼 위에 그대로 남아 있지만, 더 이상 `QVBoxLayout`이 버튼들의 위치와 크기를 관리하지 않습니다.
폼을 선택하고 레이아웃을 적용하면 → 폼 전체를 관리하는 최상위 레이아웃이 만들어집니다.
0. 학습 목표
이번 6.4 단계에서는 PySide6에서 위젯을 행과 열 기준으로 배치할 때 사용하는 QGridLayout을 학습합니다.
이전 단계에서 QHBoxLayout은 위젯을 가로 방향으로 배치하고, QVBoxLayout은 위젯을 세로 방향으로 배치한다고 배웠습니다.
이번에는 위젯을 표처럼 행(row)과 열(column) 위치에 배치하는 2차원 그리드 레이아웃을 살펴봅니다.
| 학습 목표 | 내용 |
| QGridLayout 개념 이해 | QGridLayout이 위젯을 행과 열로 배치하는 2차원 레이아웃이라는 점을 이해합니다. |
| row, column 좌표 이해 | 위젯을 어느 행과 어느 열에 배치하는지 지정하는 방법을 이해합니다. |
| addWidget() 위치 인자 이해 | addWidget(위젯, 행, 열) 구조를 이해합니다. |
| span 구조 이해 | 위젯이 여러 행 또는 여러 열을 차지하도록 배치하는 방법을 이해합니다. |
| Qt Designer 사용 흐름 이해 | Qt Designer에서 여러 위젯을 선택한 뒤 Grid Layout을 적용하는 흐름을 이해합니다. |
이번 단계의 핵심
QGridLayout은 위젯을 표처럼 행과 열 위치에 배치하는 레이아웃입니다.
단순히 위에서 아래, 왼쪽에서 오른쪽으로 배치하는 것이 아니라, 원하는 위치를 (row, column) 좌표로 지정할 수 있습니다.
1. QGridLayout이란?
1.1 QGridLayout의 기본 의미
QGridLayout은 PySide6에서 제공하는 레이아웃 클래스 중 하나입니다.
QHBoxLayout과 QVBoxLayout이 한 방향으로 위젯을 배치한다면, QGridLayout은 행과 열을 기준으로 위젯을 배치합니다.
| 이름 | 의미 |
| Q | Qt에서 제공하는 클래스라는 의미입니다. |
| Grid | 격자, 표, 행과 열로 나누어진 구조를 의미합니다. |
| Layout | 위젯의 위치와 크기를 자동으로 관리하는 배치 구조를 의미합니다. |
QGridLayout
↓
Grid Layout
↓
위젯을 행(row)과 열(column) 위치에 배치하는 레이아웃따라서 QGridLayout은 여러 위젯을 표 형태로 배치할 때 사용하는 레이아웃입니다.
1.2 QGridLayout이 필요한 경우
GUI 화면에서는 위젯을 단순히 한 줄로 나열하는 것보다, 표처럼 정렬해야 하는 경우가 많습니다.
예를 들어 계산기 버튼, 입력 폼, 설정 화면, 대시보드 화면은 행과 열 구조로 배치하는 것이 자연스럽습니다.
| 사용 예시 | 설명 |
| 계산기 버튼 | 숫자 버튼과 연산자 버튼을 행과 열에 맞춰 배치할 때 사용합니다. |
| 입력 폼 | 라벨과 입력창을 표처럼 정렬할 때 사용합니다. |
| 설정 화면 | 여러 설정 항목을 일정한 간격으로 정렬할 때 사용합니다. |
| 대시보드 화면 | 여러 정보 카드나 버튼을 격자 형태로 배치할 때 사용합니다. |
중요한 점
QGridLayout은 위젯을 직접 좌표 픽셀 위치에 놓는 방식이 아닙니다.
행과 열 위치를 지정하면, 레이아웃이 창 크기에 맞춰 위젯의 위치와 크기를 자동으로 관리합니다.
2. QGridLayout 기본 구조
2.1 기본 사용 흐름
QGridLayout을 사용하는 기본 흐름은 다음과 같습니다.
부모 위젯 생성
↓
버튼 같은 자식 위젯 생성
↓
QGridLayout 생성
↓
addWidget()으로 위젯과 위치 지정
↓
행과 열 기준으로 자동 배치QGridLayout에서 중요한 점은 addWidget()에 위젯뿐만 아니라 행 번호와 열 번호를 함께 전달한다는 것입니다.
2.2 addWidget()의 기본 구조
QGridLayout에서 가장 기본적인 위젯 추가 방식은 다음과 같습니다.
layout.addWidget(위젯, 행, 열)예를 들어 다음 코드는 버튼을 0행 0열에 배치합니다.
layout.addWidget(b1, 0, 0)| 인자 | 의미 |
| b1 | 레이아웃에 추가할 위젯입니다. |
| 0 | 위젯을 배치할 행 번호입니다. |
| 0 | 위젯을 배치할 열 번호입니다. |
중요한 점
QGridLayout의 행과 열 번호는 보통 0부터 시작합니다.
즉, 첫 번째 행은 0행이고, 첫 번째 열은 0열입니다.
2.3 row와 column 좌표 이해
QGridLayout은 표처럼 행과 열을 기준으로 위치를 지정합니다.
이때 위치는 (row, column) 형태로 생각할 수 있습니다.
column 0 column 1
row 0 (0, 0) (0, 1)
row 1 (1, 0) (1, 1)
row 2 (2, 0) (2, 1)| 좌표 | 의미 |
| (0, 0) | 0행 0열입니다. 가장 왼쪽 위 위치로 이해할 수 있습니다. |
| (0, 1) | 0행 1열입니다. 같은 행에서 오른쪽 열 위치입니다. |
| (1, 0) | 1행 0열입니다. 한 줄 아래의 첫 번째 열 위치입니다. |
| (2, 1) | 2행 1열입니다. 세 번째 행의 두 번째 열 위치입니다. |
2.4 여러 칸을 차지하는 span 구조
QGridLayout에서는 하나의 위젯이 한 칸만 차지할 수도 있고, 여러 칸을 차지할 수도 있습니다.
이때 사용하는 값이 rowSpan과 columnSpan입니다.
layout.addWidget(위젯, 시작행, 시작열, 차지할행수, 차지할열수)이번 예제에서는 다음 코드가 span 구조를 사용합니다.
layout.addWidget(b3, 1, 0, 1, 2)| 값 | 의미 |
| b3 | 배치할 버튼 위젯입니다. |
| 1 | 1행에서 시작합니다. |
| 0 | 0열에서 시작합니다. |
| 1 | 1개의 행을 차지합니다. |
| 2 | 2개의 열을 차지합니다. |
column 0 column 1
row 0 [ One ] [ Two ]
row 1 [ Three ] ← 1행 2열 차지
row 2 [ Four ] [ Five ]정리
QGridLayout에서 span은 위젯이 여러 칸을 차지하도록 만드는 기능입니다.
예를 들어 버튼 하나를 두 열 너비로 넓게 배치하고 싶을 때 사용할 수 있습니다.
3. 예제 코드
3.1 실습 준비
이번 예제는 PyCharm에서 진행합니다.
새 Python 파일을 만들고 파일명을 main.py로 저장합니다.
프로젝트 가상환경에는 PySide6가 설치되어 있어야 합니다.
3.2 main.py 예제 코드
import sys
from PySide6.QtWidgets import (
QApplication, QWidget, QPushButton, QGridLayout
)
class GridExample(QWidget):
def __init__(self):
super().__init__()
self.setWindowTitle("QGridLayout 예제")
self.resize(360, 220)
b1 = QPushButton("One")
b2 = QPushButton("Two")
b3 = QPushButton("Three")
b4 = QPushButton("Four")
b5 = QPushButton("Five")
layout = QGridLayout(self)
layout.addWidget(b1, 0, 0) # (row=0, col=0)
layout.addWidget(b2, 0, 1) # (row=0, col=1)
layout.addWidget(b3, 1, 0, 1, 2) # 1행 0열에서 시작, 1행 2열 차지
layout.addWidget(b4, 2, 0) # (row=2, col=0)
layout.addWidget(b5, 2, 1) # (row=2, col=1)
if __name__ == "__main__":
app = QApplication(sys.argv)
w = GridExample()
w.show()
sys.exit(app.exec())
이 예제는 버튼 5개를 만들고, QGridLayout을 사용해 버튼을 행과 열 위치에 맞춰 배치합니다.
GridExample(QWidget)
↓
QPushButton("One")
QPushButton("Two")
QPushButton("Three")
QPushButton("Four")
QPushButton("Five")
↓
QGridLayout(self)
↓
행(row), 열(column) 위치에 버튼 배치
3.3 실행 결과 구조
프로그램을 실행하면 창 안에 버튼 5개가 다음과 같은 그리드 구조로 배치됩니다.
┌───────────────────────────────────┐
│ [ One ] [ Two ] │
│ │
│ [ Three ] │
│ │
│ [ Four ] [ Five ] │
└───────────────────────────────────┘여기서 Three 버튼은 1행 0열에서 시작하여 2개의 열을 차지합니다.
따라서 One, Two 버튼보다 가로로 더 넓게 배치됩니다.
3.4 사용된 좌표 의미
| 코드 | 좌표 | 의미 |
| layout.addWidget(b1, 0, 0) | (0, 0) | 0행 0열에 One 버튼 배치 |
| layout.addWidget(b2, 0, 1) | (0, 1) | 0행 1열에 Two 버튼 배치 |
| layout.addWidget(b3, 1, 0, 1, 2) | (1, 0) | 1행 0열에서 시작하여 1행 2열을 차지 |
| layout.addWidget(b4, 2, 0) | (2, 0) | 2행 0열에 Four 버튼 배치 |
| layout.addWidget(b5, 2, 1) | (2, 1) | 2행 1열에 Five 버튼 배치 |
3.5 예제 파일
예제 파일은 main.py로 저장합니다.
4. 코드 분석
4.1 주석 포함 전체 코드
import sys # [1] 파이썬 실행 환경과 종료 처리를 위해 sys 모듈을 가져옴
from PySide6.QtWidgets import ( # [2] PySide6에서 GUI 구성에 필요한 클래스들을 가져옴
QApplication, QWidget, QPushButton, QGridLayout
)
# - QApplication: Qt GUI 프로그램 전체를 관리하는 클래스
# - QWidget: 화면에 표시되는 기본 창 위젯 클래스
# - QPushButton: 클릭 가능한 버튼 위젯 클래스
# - QGridLayout: 위젯을 행과 열로 배치하는 그리드 레이아웃 클래스
class GridExample(QWidget): # [3] QWidget을 상속받아 새 창 클래스를 정의
def __init__(self): # [4] GridExample 객체가 생성될 때 자동으로 실행되는 초기화 메서드
super().__init__() # [5] 부모 클래스(QWidget)의 초기화 기능을 먼저 실행
self.setWindowTitle("QGridLayout 예제") # [6] 창 제목 설정
self.resize(360, 220) # [7] 창 크기 설정
b1 = QPushButton("One") # [8] 첫 번째 버튼 생성
b2 = QPushButton("Two") # [9] 두 번째 버튼 생성
b3 = QPushButton("Three") # [10] 세 번째 버튼 생성
b4 = QPushButton("Four") # [11] 네 번째 버튼 생성
b5 = QPushButton("Five") # [12] 다섯 번째 버튼 생성
layout = QGridLayout(self) # [13] QGridLayout 생성
# - self는 현재 창을 의미함
# - QGridLayout(self)는 현재 창에 레이아웃을 바로 적용하는 방식
layout.addWidget(b1, 0, 0) # [14] b1을 0행 0열에 배치
layout.addWidget(b2, 0, 1) # [15] b2를 0행 1열에 배치
layout.addWidget(b3, 1, 0, 1, 2) # [16] b3를 1행 0열에서 시작해 1행 2열 크기로 배치
layout.addWidget(b4, 2, 0) # [17] b4를 2행 0열에 배치
layout.addWidget(b5, 2, 1) # [18] b5를 2행 1열에 배치
if __name__ == "__main__": # [19] 이 파일을 직접 실행할 때만 아래 코드 실행
app = QApplication(sys.argv) # [20] Qt GUI 프로그램 실행을 관리하는 QApplication 객체 생성
w = GridExample() # [21] GridExample 창 객체 생성
w.show() # [22] 창을 화면에 표시
sys.exit(app.exec()) # [23] 이벤트 루프 시작
# - 창이 닫힐 때까지 사용자 입력과 화면 이벤트를 처리함
4.2 단계별 분석
1단계: 필요한 클래스 가져오기
from PySide6.QtWidgets import (
QApplication, QWidget, QPushButton, QGridLayout
)이번 예제에서는 기본 창을 만들고, 버튼을 그리드 구조로 배치하기 위해 네 가지 클래스를 사용합니다.
| 클래스 | 역할 |
| QApplication | Qt GUI 프로그램 전체 실행을 관리합니다. |
| QWidget | 화면에 표시되는 기본 창을 만듭니다. |
| QPushButton | 클릭 가능한 버튼을 만듭니다. |
| QGridLayout | 위젯을 행과 열 기준으로 배치합니다. |
2단계: QWidget을 상속한 창 클래스 만들기
class GridExample(QWidget):
def __init__(self):
super().__init__()GridExample 클래스는 QWidget을 상속받아 만든 사용자 정의 창 클래스입니다.
이 클래스 안에서 버튼을 만들고, QGridLayout을 적용합니다.
3단계: 버튼 5개 생성하기
b1 = QPushButton("One")
b2 = QPushButton("Two")
b3 = QPushButton("Three")
b4 = QPushButton("Four")
b5 = QPushButton("Five")화면에 배치할 버튼 5개를 생성합니다.
이 단계에서는 버튼 객체만 만든 상태입니다.
아직 버튼이 창 안에 배치된 것은 아닙니다.
4단계: QGridLayout 생성하기
layout = QGridLayout(self)QGridLayout 객체를 생성합니다.
괄호 안에 self를 넣었으므로, 현재 창에 이 레이아웃이 바로 적용됩니다.
self
↓
현재 GridExample 창
↓
QGridLayout(self)
↓
현재 창의 그리드 레이아웃으로 적용
5단계: 버튼을 행과 열 위치에 배치하기
layout.addWidget(b1, 0, 0)
layout.addWidget(b2, 0, 1)
layout.addWidget(b4, 2, 0)
layout.addWidget(b5, 2, 1)위 코드는 각 버튼을 지정한 행과 열 위치에 배치합니다.
layout.addWidget(b1, 0, 0) → 0행 0열
layout.addWidget(b2, 0, 1) → 0행 1열
layout.addWidget(b4, 2, 0) → 2행 0열
layout.addWidget(b5, 2, 1) → 2행 1열6단계: Three 버튼을 두 열에 걸쳐 배치하기
layout.addWidget(b3, 1, 0, 1, 2)이 코드는 b3 버튼을 1행 0열에 배치하되, 2개의 열을 차지하도록 만듭니다.
| 인자 | 설명 |
| b3 | 배치할 버튼입니다. |
| 1 | 1행에서 시작합니다. |
| 0 | 0열에서 시작합니다. |
| 1 | 1개의 행을 차지합니다. |
| 2 | 2개의 열을 차지합니다. |
row 0 [ One ] [ Two ]
row 1 [ Three ]
row 2 [ Four ] [ Five ]중요한 점
QGridLayout에서는 addWidget()에 행과 열을 지정해야 합니다.
또한 rowSpan과 columnSpan을 사용하면 하나의 위젯이 여러 칸을 차지하도록 만들 수 있습니다.
5. Qt 위젯들을 선택하고 Lay Out in a Grid를 누른 경우
5.1 선택한 위젯끼리만 그리드 레이아웃으로 묶임
Qt Designer에서 폼 위에 버튼이나 입력창 같은 위젯을 여러 개 올려놓을 수 있습니다.
이때 위젯 여러 개를 선택한 뒤 Lay Out in a Grid 버튼을 누르면, 선택한 위젯들만 하나의 그리드 레이아웃으로 묶입니다.
즉, 폼 전체에 레이아웃이 적용된 것이 아니라, 선택한 위젯 묶음에만 QGridLayout이 적용된 상태입니다.
Form(QWidget)
└── gridLayout
├── QPushButton
├── QPushButton
├── QPushButton
├── QPushButton
└── QPushButtonObject Inspector에서는 gridLayout 같은 레이아웃 객체가 생긴 것을 확인할 수 있습니다.
Designer 화면에서는 선택한 위젯들이 하나의 격자 영역 안에 들어간 것처럼 보일 수 있습니다.
중요한 점
이때 생긴 것은 실제 화면에 보이는 QWidget이 아니라, 선택한 위젯들의 배치를 관리하는 QGridLayout 객체입니다.
겉으로는 표 영역이 생긴 것처럼 보이지만, 실제 역할은 선택한 위젯들을 행과 열 기준으로 정렬하는 배치 관리자입니다.
5.2 이 상태의 의미
예를 들어 버튼 4개를 선택하고 Lay Out in a Grid를 누르면 버튼들은 다음처럼 그리드 형태로 정렬될 수 있습니다.
[ Button 1 ] [ Button 2 ]
[ Button 3 ] [ Button 4 ]하지만 이 레이아웃은 폼 전체를 관리하는 레이아웃이 아닙니다.
선택한 버튼 묶음만 관리하는 부분 레이아웃입니다.
| 구분 | 설명 |
| 적용 대상 | 선택한 위젯들 |
| 생성되는 구조 | 선택한 위젯들을 관리하는 QGridLayout |
| 폼 전체 관리 여부 | 아직 폼 전체를 관리하는 최상위 레이아웃은 아님 |
| 주요 목적 | 일부 위젯들을 행과 열 기준으로 정렬하기 |
정리
위젯들을 선택하고 Lay Out in a Grid를 누르면, 선택한 위젯들만 QGridLayout으로 묶입니다.
이것은 폼 전체 레이아웃이 아니라 부분 레이아웃입니다.
6. Qt Break Layout을 한 경우
6.1 기존 레이아웃 묶음을 해제함
Break Layout은 이미 적용된 레이아웃을 해제하는 기능입니다.
앞에서 버튼 여러 개를 QGridLayout으로 묶었다면, Break Layout을 실행하면 그 묶음이 풀립니다.
Break Layout 전
Form(QWidget)
└── gridLayout
├── QPushButton
├── QPushButton
├── QPushButton
└── QPushButtonBreak Layout 후
Form(QWidget)
├── QPushButton
├── QPushButton
├── QPushButton
└── QPushButton버튼 자체가 삭제되는 것은 아닙니다.
삭제되는 것은 버튼들을 관리하던 QGridLayout 구조입니다.
6.2 Break Layout 후 화면 상태
Break Layout을 하면 위젯들은 폼 위에 그대로 남아 있습니다.
하지만 더 이상 레이아웃이 위젯의 위치와 크기를 자동으로 관리하지 않습니다.
Break Layout 전
[ Button 1 ] [ Button 2 ]
[ Button 3 ] [ Button 4 ]
↑
QGridLayout이 행과 열 배치를 관리함Break Layout 후
[ Button 1 ] [ Button 2 ] [ Button 3 ] [ Button 4 ]
↑ ↑ ↑ ↑
각 위젯이 폼 위에 따로 놓인 상태이 상태에서는 버튼들이 각각 독립적으로 폼 위에 놓여 있는 상태입니다.
따라서 창 크기를 바꿔도 버튼들이 레이아웃 기준으로 자연스럽게 재배치되지 않을 수 있습니다.
| 구분 | 설명 |
| 실행 기능 | 선택한 레이아웃을 해제합니다. |
| 위젯 삭제 여부 | 위젯은 삭제되지 않고 그대로 남습니다. |
| 레이아웃 관리 여부 | 해당 위젯들을 관리하던 레이아웃이 사라집니다. |
| 결과 상태 | 위젯들이 폼 위에 개별적으로 놓인 상태가 됩니다. |
중요한 점
Break Layout은 위젯을 삭제하는 기능이 아닙니다.
위젯을 묶고 있던 레이아웃만 해제하는 기능입니다.
7. Qt 그다음 폼을 선택하고 Lay Out in a Grid를 누른 경우
7.1 폼 전체에 최상위 레이아웃이 적용됨
Break Layout으로 기존 묶음을 해제한 뒤, 이번에는 버튼이 아니라 폼 자체를 선택합니다.
그리고 Lay Out in a Grid를 누르면 폼 전체에 QGridLayout이 적용됩니다.
이때 만들어지는 레이아웃은 선택한 위젯 묶음의 부분 레이아웃이 아니라, 폼 전체를 관리하는 최상위 레이아웃입니다.
Form(QWidget)
└── Top-Level QGridLayout
├── QPushButton
├── QPushButton
├── QPushButton
└── QPushButton코드로 생각하면 다음과 비슷한 구조입니다.
layout = QGridLayout(self)또는 다음 코드와도 같은 의미로 이해할 수 있습니다.
layout = QGridLayout()
self.setLayout(layout)즉, 폼 자체가 QGridLayout을 기준으로 자식 위젯들의 위치와 크기를 관리하게 됩니다.
7.2 위젯 선택 레이아웃과 폼 선택 레이아웃의 차이
위젯을 선택해서 레이아웃을 적용한 경우와 폼을 선택해서 레이아웃을 적용한 경우는 겉으로 비슷해 보일 수 있습니다.
하지만 실제 의미는 다릅니다.
| 구분 | 위젯 선택 후 레이아웃 | 폼 선택 후 레이아웃 |
| 적용 대상 | 선택한 위젯들 | 폼 전체 |
| 레이아웃 종류 | 부분 레이아웃 | 최상위 레이아웃 |
| 관리 범위 | 선택한 위젯 묶음만 관리 | 폼 안의 자식 위젯 전체를 관리 |
| 창 크기 변경 대응 | 폼 전체 기준 대응은 부족할 수 있음 | 폼 크기 변경에 맞춰 위젯들이 자동 조정됨 |
| 코드 관점 | 선택한 위젯 그룹을 QGridLayout에 넣은 상태 | self.setLayout() 또는 QGridLayout(self)에 가까운 상태 |
7.3 실습에서 확인할 핵심 흐름
이 차이는 실습 과정에서 다음 흐름으로 확인하면 이해하기 쉽습니다.
1. 버튼 여러 개를 선택한다.
2. Lay Out in a Grid를 누른다.
→ 선택한 버튼들만 QGridLayout으로 묶인다.
3. Break Layout을 누른다.
→ 버튼 묶음이 해제된다.
4. 폼 바탕을 선택한다.
5. Lay Out in a Grid를 누른다.
→ 폼 전체에 QGridLayout이 적용된다.따라서 같은 Lay Out in a Grid 버튼을 눌러도, 무엇을 선택한 상태에서 눌렀는지에 따라 결과가 달라집니다.
이번 단계의 핵심
위젯을 선택하고 Lay Out in a Grid를 누르면 선택한 위젯들만 묶는 부분 레이아웃이 만들어집니다.
폼을 선택하고 Lay Out in a Grid를 누르면 폼 전체를 관리하는 최상위 레이아웃이 만들어집니다.
기억할 문장
QGridLayout으로 묶는 것과 폼 전체에 QGridLayout을 적용하는 것은 다릅니다.
위젯 선택은 부분 레이아웃, 폼 선택은 최상위 레이아웃입니다.
8. 정리
이번 단계에서는 PySide6에서 위젯을 행과 열 기준으로 배치하는 QGridLayout을 살펴보았습니다.
QGridLayout은 버튼, 입력창, 라벨 같은 위젯을 표처럼 정렬할 때 사용합니다.
QPushButton 생성
↓
QGridLayout 생성
↓
addWidget()으로 행과 열 위치 지정
↓
표처럼 위젯 배치
↓
창 크기 변경 시 자동 재배치| 개념 | 정리 |
| QGridLayout | 위젯을 행과 열 기준으로 배치하는 2차원 레이아웃입니다. |
| row | 위젯을 배치할 행 번호입니다. |
| column | 위젯을 배치할 열 번호입니다. |
| addWidget(widget, row, column) | 위젯을 특정 행과 열에 배치합니다. |
| rowSpan | 위젯이 차지할 행의 개수입니다. |
| columnSpan | 위젯이 차지할 열의 개수입니다. |
| Qt Designer 방식 | 위젯을 선택한 뒤 Lay Out in a Grid를 적용하여 그리드 레이아웃을 만듭니다. |
이번 단계에서 기억할 문장
QGridLayout은 위젯을 표처럼 행과 열 위치에 배치하는 레이아웃입니다.
코드에서는 addWidget()에 row와 column을 지정하고, Qt Designer에서는 Lay Out in a Grid를 적용해 같은 구조를 만들 수 있습니다.
참고. 공식 문서로 확인하기
이번 예제에서 사용한 QGridLayout, Layout Management, .ui 파일, pyside6-uic는 Qt for Python 공식 문서에서 확인할 수 있습니다.
특히 이번 단계에서 중요한 부분은 QGridLayout이 행과 열로 나누어진 그리드 안에 위젯을 배치하는 레이아웃이라는 점입니다.
1. 공식 문서 참고 표
| 구분 | 공식 문서 | 확인할 내용 |
| QGridLayout | PySide6.QtWidgets.QGridLayout | QGridLayout이 위젯을 그리드 구조로 배치하는 레이아웃 클래스임을 확인할 수 있습니다. |
| Layout Management | Qt for Python - Layout Management | Qt 레이아웃 시스템이 부모 위젯 안에서 자식 위젯을 자동 배치하는 구조를 확인할 수 있습니다. |
| Basic Layouts Example | Qt for Python - Basic Layouts Example | QBoxLayout, QGridLayout, QFormLayout 같은 기본 레이아웃 사용 예제를 확인할 수 있습니다. |
| Using .ui files | Using .ui files from Designer or QtCreator | Qt Designer에서 만든 .ui 파일을 PySide6 프로젝트에서 사용하는 방법을 확인할 수 있습니다. |
| pyside6-uic | Qt for Python - pyside6-uic | .ui 파일을 Python 코드 파일로 변환하는 명령 도구를 확인할 수 있습니다. |
2. QGridLayout 공식 문서 연결
공식 문서에서 QGridLayout은 위젯을 그리드에 배치하는 레이아웃 클래스로 설명됩니다.
이번 예제에서 버튼들이 행과 열 위치에 맞춰 배치되는 이유가 바로 이 특징 때문입니다.
QGridLayout
↓
Grid 구조
↓
row, column 좌표 지정
↓
행과 열 위치에 위젯 배치
3. 이번 예제와 공식 문서 연결
| 이번 예제 코드 | 공식 문서와 연결되는 의미 |
| QGridLayout(self) | 그리드 레이아웃을 생성하고 현재 QWidget에 적용합니다. |
| layout.addWidget(b1, 0, 0) | 첫 번째 버튼을 0행 0열에 배치합니다. |
| layout.addWidget(b2, 0, 1) | 두 번째 버튼을 0행 1열에 배치합니다. |
| layout.addWidget(b3, 1, 0, 1, 2) | 세 번째 버튼을 1행 0열에서 시작하여 1행 2열 크기로 배치합니다. |
| pyside6-uic form.ui -o ui_form.py | Designer에서 만든 .ui 화면을 Python 코드 파일로 변환합니다. |
4. 정리 흐름도
공식 문서 기준으로 정리하면 다음과 같습니다.
QWidget
↓
QGridLayout
↓
addWidget(widget, row, column)
↓
행과 열 위치에 위젯 배치
↓
필요하면 rowSpan, columnSpan으로 여러 칸 차지
↓
창 크기 변경 시 레이아웃이 위치와 크기 자동 관리즉, QGridLayout은 PySide6에서 표 형태의 화면 구성을 만들 때 사용하는 기본 레이아웃입니다.