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