6.10 QTabWidget

1. QTabWidget 으로 탭이 있는 윈도우 만들기

1. 구현 목표

QTabWidget 으로 탭이 있는 윈도우 만들기
QLabel, QLineEdit, QPushButton 을 각각의 탭 내부에 QWidget 으로 구현
레이아웃 사용하여 배치하기
clicked.connect(...)를 이용해 시그널과 슬롯 연결하기
클릭한 버튼 정보를 출력하는 슬롯 함수

2. 프로젝트 구조

widget.py
main.py

2.1 기본 윈도우 & QApplication 만들기

from PySide6.QtWidgets import QApplication
from widget import Widget
import sys

if __name__ == "__main__":
    app = QApplication(sys.argv)
    w = Widget()
    w.show()
    sys.exit(app.exec())

QApplication : 객체를 만들고, 우리가 만든 Widget 이 띄워질 프로그램을 구성한다.
Widget : 우리가 만든 메인 화면을 구성하는 클래스
app.exec() : GUI 프로그램이 계속 동작하게 해주는 루프

2.2 Widget 기본 클래스 만들기

from PySide6.QtWidgets import (
    QWidget, QHBoxLayout, QVBoxLayout,
    QTabWidget, QPushButton, QLabel, QLineEdit
)


class Widget(QWidget):
    def __init__(self):
        super().__init__()

        # 윈도우 제목
        self.setWindowTitle("QTabWidget 데모")

widget.py에서 QWidget을 상속받아 기본 창을 만든다.
여기까지 작성 후 python main.py 실행하면
아무것도 없는 빈 창이 한국어 제목과 함께 뜬다.

3. QTabWidget 생성 후 기본 탭 컨테이너 준비

        # [1] 탭 위젯 생성
        tab_widget = QTabWidget(self)

이후에 tab_widget 에 탭을 추가할 예정
QTabWidget: 여러 화면을 탭 형태로 전환할 수 있게 해주는 컨트롤

4. 첫 번째 탭: <정보 입력> 탭 만들기

        # [2] 첫 번째 탭 : 정보 입력 탭
        widget_form = QWidget()
        label_full_name = QLabel("이름 :")
        line_edit_full_name = QLineEdit()
        line_edit_full_name.setPlaceholderText("이름을 입력하세요")

        form_layout = QHBoxLayout()
        form_layout.addWidget(label_full_name)
        form_layout.addWidget(line_edit_full_name)
        widget_form.setLayout(form_layout)

QLabel("이름 :") : 설명용 텍스트
QLineEdit() : 한 줄 입력 칸
setPlaceholderText("이름을 입력하세요") : 회색 안내 텍스트
QHBoxLayout : 가로 방향 배치
[이름 :] [입력창] 형태로 나란히 배치

4.1 첫번째 탭에 구현될 요소만으로, 하나 창을 만들고, 프로그램을 구현하시오.

5. 두 번째 탭: <버튼> 탭 만들기

        # [3] 두 번째 탭 : 버튼 탭
        widget_buttons = QWidget()
        button_1 = QPushButton("버튼 1")
        button_2 = QPushButton("버튼 2")
        button_3 = QPushButton("버튼 3")

        buttons_layout = QVBoxLayout()
        buttons_layout.addWidget(button_1)
        buttons_layout.addWidget(button_2)
        buttons_layout.addWidget(button_3)
        widget_buttons.setLayout(buttons_layout)

QVBoxLayout : 세로 방향으로 버튼 3개를 쌓아서 배치

6. 탭 위젯에 두 개의 탭 추가하기

        # [4] 탭 위젯에 탭 추가
        tab_widget.addTab(widget_form, "정보 입력")
        tab_widget.addTab(widget_buttons, "버튼들")

첫 번째 탭
- 위젯: widget_form
- 탭 제목: "정보 입력"
두 번째 탭
- 위젯: widget_buttons
- 탭 제목: "버튼들"
실행 시켜보기

7. 전체 레이아웃에 QTabWidget 배치

        # [5] 위젯 전체 레이아웃 설정
        layout = QVBoxLayout()
        layout.addWidget(tab_widget)
        self.setLayout(layout)

QVBoxLayout : 화면을 위에서 아래로 레이아웃
layout.addWidget(tab_widget) : 탭 전체를 하나의 위젯으로 추가
self.setLayout(layout) : 이 Widget 창의 기본 레이아웃으로 지정

8. 슬롯 함수 구현 (버튼 클릭 시 동작)

        # 버튼 1 클릭 시 슬롯 함수 호출
        button_1.clicked.connect(self.button_1_clicked)

    # [6] 슬롯 함수 : 버튼 1 클릭 시 동작
    def button_1_clicked(self):
        print("버튼 1이 클릭되었습니다.")

콘솔(터미널)에 한국어 메시지 출력
실행 확인:
- 프로그램을 실행한 콘솔 창을 열어둔 채 버튼1을 눌러보면
  "버튼 1이 클릭되었습니다." 가 출력되는 것을 확인할 수 있음

9. 실행 결과 확인하기

프로그램 실행
“정보 입력” 탭이 기본으로 보인다.
“버튼들” 탭으로 이동
버튼 1, 2, 3이 세로로 배치된 화면.
버튼 1 클릭 시
콘솔에 버튼 1이 클릭되었습니다. 출력.

2. 추가 실습 과제

: 버튼 2, 버튼 3에도 동작 추가하기

1. 버튼 2, 버튼 3에도 동작 추가하기

목표:
버튼 2와 버튼 3을 눌렀을 때도 각각 다른 한국어 메시지를 출력해보자.

요구사항:

button_2.clicked.connect(...), button_3.clicked.connect(...) 코드 추가
새 슬롯 함수 2개를 Widget 클래스 안에 만든다.
- button_2_clicked : "버튼 2가 클릭되었습니다." 출력
- button_3_clicked : "버튼 3이 클릭되었습니다." 출력

파일

3. 추가 실습 과제

: <정보 입력 탭>에서 입력값을 이용해 출력하기

목표:

<정보 입력 탭>에서 버튼을 추가하고

<정보 입력 탭>에서 사용자가 이름을 입력하고,
추가한 버튼을 눌렀을 때
→ "OOO님, 버튼 1을 클릭하셨습니다." 같이 이름을 포함한 메시지를 출력해보자.

요구사항:

1. QLineEdit 위젯에 입력한 값을 가져오는 방법

# <추가 실습 과제>  QLineEdit 입력값 변수로 가져오는 방법
input_data = self.QLineEdit()객체변수명.text().strip()

2. 슬롯 함수에서 QLineEdit( )으로 입력받은 이름 값을

터미널에 print( ) 함수로 출력하는 기능을 구현하세요.

3. 이름이 비어 있으면 "이름을 먼저 입력해 주세요." 출력,
이름이 있으면 "홍길동님, 버튼 1을 클릭하셨습니다." 형태로 출력.

파일:

4. 추가 실습 과제

: <정보 입력 탭>에서 입력값을 이용해 출력하기

목표:
사용자가 <탭>을 클릭할 때마다
→ "OOO' 탭을 클릭했습니다."

QTabWidget의 시그널(currentChanged)을 이해하고 활용한다.
탭이 변경될 때 호출되는 슬롯 함수(tab_changed)를 직접 구현한다.
탭 이름(tabText)을 가져와 출력하는 방법을 익힌다.
기존 GUI 기능에 탭 이벤트 처리 기능을 확장하여 PySide6 이벤트 흐름을 더 깊이 이해한다.

참고 사항

>> 참고1. 탭 변경 시그널 연결하는 방법

# QTabWidget 생성 후
tab_widget.currentChanged.connect(self.tab_changed)

소스코드 형태로 탭 변경 이벤트를 슬롯 함수로 연결한다.

>> 참고2. 슬롯 함수(tab_changed) 작성

탭이 변경될 때 호출되는 함수 tab_changed(self, index)를 작성한다.
이 함수는 현재 클릭된 탭의 인덱스를 전달받아야 한다.

>> 참고 3. 현재 탭의 이름 가져오는 방법

tab_widget.tabText(index)

슬롯 함수 내부에서 tabText(index) 사용해 탭 이름을 가져온다.

>> 참고 4. 탭 이름 출력 예

탭 이름이 "정보 입력"이면 다음과 같이 출력되도록 한다:

'정보 입력' 탭을 클릭했습니다.
'버튼' 탭을 클릭했습니다.

파일:

5. 추가 실습 과제 4

: 첫 번째 탭에서 두 번째 탭으로 이동

목표:
사용자가 <정보 입력> 탭에서, [두 번재 탭으로 이동] 버튼을 클릭하면
→ <버튼들> 탭으로 이동

첫 번째 탭에서 두 번째 탭으로 이동하는 슬롯 함수 예시

    # <추가 실습 과제 4> 첫 번째 탭에서 두 번째 탭으로 이동하는 슬롯
    def go_to_second_tab(self):
        tab_widget = self.findChild(QTabWidget)
        if tab_widget is not None:
            tab_widget.setCurrentIndex(1)

상세 주석

    # <추가 실습 과제 4> 첫 번째 탭에서 두 번째 탭으로 이동하는 슬롯
    def go_to_second_tab(self):
        # 현재 위젯(self) 안에서 QTabWidget 타입의 자식 위젯을 찾아온다.
        # findChild(QTabWidget)은 self 바로 아래에 있는 탭 위젯을 반환한다.
        tab_widget = self.findChild(QTabWidget)

        # 탭 위젯을 정상적으로 찾았는지 확인한다.
        # 만약 tab_widget이 None이면, QTabWidget을 찾지 못한 것이므로 에러를 방지하기 위해 체크한다.
        if tab_widget is not None:
            # setCurrentIndex(1)은 두 번째 탭을 선택하라는 의미이다.
            # 탭의 인덱스는 0부터 시작하므로
            # 0 → 첫 번째 탭 ("정보 입력")
            # 1 → 두 번째 탭 ("버튼들")
            # 이 메서드가 호출되면 현재 선택된 탭이 두 번째 탭으로 전환된다.
            tab_widget.setCurrentIndex(1)

완료되면, 두번째 탭의 버튼3을 누르면 첫번째 탭으로 이동하도록 구현해본다.

티스토리툴바