VScode 와 Qt Desinger 연동 완벽가이드 - 2

Qt Designer를 활용하면 GUI 애플리케이션을 쉽게 개발할 수 있다.

이전 글에서 UI 파일을 VSCode에서 로드하는 방법을 다뤘다면, 이번에는 버튼 클릭 이벤트(Slot) 추가 방법을 상세히 알아보겠다.
이 글을 읽으면 Qt Designer에서 Signal & Slot을 활용하여 Python 코드와 연결하는 방법을 익힐 수 있다.

지난 번에 vscode 에서 qt designer 의 ui 파일을 불러오는 방법을 알아봤다.

 

ui 파일을 직접 로드하는 방법 외에 ui 파일을 python code 파일인 .py 로 변환 후 연동하는 방법도 있다.

이 방법은 차후에 다루도록 하겠다.

 

 

■ Qt Designer 의 ui 파일을 vscode python code 파일에서 불러오는 방법

VSCode에서 Qt Designer 사용하기 – 설치부터 연동까지 완벽 가이드

 

 

 

✅ Slot을 추가하는 방법

Qt에서는 **Signal(신호)**과 Slot(함수) 개념을 사용해 버튼 클릭 이벤트를 처리한다.

버튼 클릭 이벤트 연결

먼저, 버튼 클릭 시 실행할 함수를 정의한 뒤, clicked.connect() 메서드를 사용하여 연결하면 된다.

 

빨간색으로 표시된 PushButton 의 오브젝트 이름이 중요하다.

물론 개발자가 수정할 수 있다. 여기에서는 pushButton 으로 저장하였다.

 

그럼 이제 파이썬 코드를 수정해 보자.

 

지난 번 win01.py 에서 추가된 부분은 13~21 라인이다.

 

14라인은 변수 선언 부분인데 없어도 되지만 선언해 놓으면 코딩할 때 편리하다.

vscode에서 코딩할 때 변수의 멤버함수나 멤버변수를 자동으로 보여줄 수 있다.

 

16라인 pushButton 을 클릭했을 때 함수를 호출하는 부분이다. (Signal)

 

20~21라인은 pushButton을 클릭했을 때 실제 호출되는 함수를 정의한 부분이다. (slot)

 

 

 

파이썬 코드를 실행 후 pushButton을 클릭하면 아래와 같은 메세지 박스가 나온다.

 

이러한 방법으로 여러개의 pushButton을 qt designer에서 추가하고  파이썬 코드에서  위와 같이 추가하면 된다.

 

 

✅ 핵심 정리

✔️ self.pushButton.clicked.connect(self.on_button_click) 방식으로 Signal과 Slot 연결

 

 

Qt Designer에서 Signal/Slot Editor를 활용해 UI에서 직접 이벤트 추가하는 방법도 있다.

차후에 이 주제에 대해서도 다뤄보도록 하겠다.