PySide6 QStackedWidget 완전 정복 – 클릭 이벤트와 사용법

📌 PySide6 QStackedWidget 완전 정복 – 클릭 이벤트와 사용법

🔹 QStackedWidget이란?

QStackedWidget은 여러 개의 위젯을 한 공간에서 전환하며 표시할 수 있도록 도와주는 컨테이너 위젯입니다. 쉽게 말해, 여러 개의 페이지를 겹쳐놓고 필요한 페이지를 선택해 보여주는 구조입니다. 이 글에서는 QStackedWidget의 특징, 클릭 이벤트 감지 방법, 사용 예제, 활용 사례를 다룹니다. 

---

1️⃣ QStackedWidget의 특징

✅ 주요 특징

특징	설명
위젯 전환	한 번에 하나의 위젯(페이지)만 표시
탭이 없는 구조	QTabWidget처럼 탭이 보이지 않음
페이지 관리	addWidget()을 이용하여 여러 개의 페이지 추가 가능
전환 방식	setCurrentIndex() 또는 setCurrentWidget()으로 페이지 전환
시그널 지원	currentChanged(int index) 시그널로 변경 감지 가능

✅ 사용해야 하는 경우

• 여러 페이지를 하나의 영역에서 관리할 때
• 설정 화면, 다단계 폼, 단계별 마법사(위자드 UI)
• 로그인 / 회원가입 화면처럼 한 화면에서 UI를 전환할 때

---

2️⃣ QStackedWidget 사용법

✅ 기본적인 사용법 (예제 코드)

먼저, QStackedWidget을 생성하고 여러 개의 페이지를 추가하는 예제입니다.

from PySide6.QtWidgets import QApplication, QWidget, QStackedWidget, QVBoxLayout, QPushButton, QLabel

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

        self.stack = QStackedWidget()

        # 첫 번째 페이지
        self.page1 = QWidget()
        layout1 = QVBoxLayout()
        self.label1 = QLabel("첫 번째 페이지")
        self.btn1 = QPushButton("2페이지로 이동")
        self.btn1.clicked.connect(lambda: self.stack.setCurrentIndex(1))
        layout1.addWidget(self.label1)
        layout1.addWidget(self.btn1)
        self.page1.setLayout(layout1)

        # 두 번째 페이지
        self.page2 = QWidget()
        layout2 = QVBoxLayout()
        self.label2 = QLabel("두 번째 페이지")
        self.btn2 = QPushButton("1페이지로 이동")
        self.btn2.clicked.connect(lambda: self.stack.setCurrentIndex(0))
        layout2.addWidget(self.label2)
        layout2.addWidget(self.btn2)
        self.page2.setLayout(layout2)

        # 페이지 추가
        self.stack.addWidget(self.page1)
        self.stack.addWidget(self.page2)

        # 메인 레이아웃
        main_layout = QVBoxLayout()
        main_layout.addWidget(self.stack)
        self.setLayout(main_layout)

        self.setWindowTitle("QStackedWidget 예제")
        self.resize(300, 200)

if __name__ == "__main__":
    app = QApplication([])
    window = StackedExample()
    window.show()
    app.exec()

반응형

✅ 설명:

• QStackedWidget을 생성하고 addWidget()으로 페이지 추가
• setCurrentIndex()를 이용해 버튼 클릭 시 페이지 전환
• QVBoxLayout()을 사용해 간단한 UI 구성

---

3️⃣ QStackedWidget 클릭 이벤트 감지

QStackedWidget은 기본적으로 클릭 이벤트를 제공하지 않습니다.
하지만 특정 위젯에서 클릭을 감지하거나 QStackedWidget 자체의 클릭 이벤트를 감지하려면 이벤트 필터를 활용할 수 있습니다.

✅ 클릭 이벤트 감지 코드 (이벤트 필터 활용)

from PySide6.QtCore import QObject, QEvent
from PySide6.QtWidgets import QApplication, QStackedWidget, QLabel, QVBoxLayout, QWidget

class ClickEventFilter(QObject):
    def eventFilter(self, obj, event):
        if event.type() == QEvent.MouseButtonPress:
            print("QStackedWidget 클릭됨!")
            return True  # 이벤트를 처리한 것으로 표시
        return super().eventFilter(obj, event)

app = QApplication([])

# QStackedWidget 생성
stacked_widget = QStackedWidget()
stacked_widget.installEventFilter(ClickEventFilter())  # 이벤트 필터 추가

# 페이지 추가
page1 = QWidget()
layout1 = QVBoxLayout()
layout1.addWidget(QLabel("클릭 테스트 페이지"))
page1.setLayout(layout1)

stacked_widget.addWidget(page1)

stacked_widget.show()
app.exec()

 

✅ 설명:

• installEventFilter()를 사용하여 QEvent.MouseButtonPress 감지
• 클릭 시 print("QStackedWidget 클릭됨!") 출력

---

4️⃣ QStackedWidget을 활용하는 UI 사례

📌 설정 화면 (Settings UI)

예제:

• QStackedWidget을 사용하여 왼쪽 사이드바에서 설정 항목 선택 시 해당 페이지 표시

📌 회원가입 & 로그인 UI

예제:

• 첫 번째 페이지: 로그인 화면
• 두 번째 페이지: 회원가입 화면
• "회원가입" 버튼 클릭 시 setCurrentIndex(1)로 회원가입 페이지 이동

📌 다단계 입력 폼 (Wizard UI)

예제:

• 단계별 입력 화면을 QStackedWidget으로 구성
• "다음 단계" 버튼 클릭 시 다음 페이지로 이동

---

5️⃣ QStackedWidget 관련 메서드 정리

메서드	설명
addWidget(QWidget)	새로운 페이지 추가
removeWidget(QWidget)	특정 페이지 제거
setCurrentIndex(int)	특정 페이지로 변경 (인덱스 기반)
setCurrentWidget(QWidget)	특정 위젯을 현재 페이지로 설정
currentIndex()	현재 페이지의 인덱스 반환
widget(int index)	특정 인덱스의 위젯 반환

---

🔹 결론

✅ QStackedWidget은 설정 화면, 로그인 UI, 다단계 입력 폼과 같은 경우에 사용하기 적합합니다.
✅ setCurrentIndex()를 사용하면 쉽게 페이지를 전환할 수 있습니다.
✅ installEventFilter()를 활용하면 클릭 이벤트를 감지할 수 있습니다.