Pyside QT Designer로 버튼 만들기

 코드를 이용해서 GUI 디자인 하는 것보다 툴을 이용하여 디자인을 하고 그 결과물을 코드로 변환하여 적용하는 방식이 편리합니다. 

 Qt도 Designer라는 툴을 제공하므로 그것을 이용하는 방법을 알아보겠습니다. 

GUI 개발 환경 구성

 어이가 없지만, GUI 디자인 결과를 코드로 변경하는 프로그램(uic.exe)이 제 위치에 있지 않아서 제대로 작업을 수행할 수 없습니다. 그래서 먼저 프로그램 위치를 잡겠습니다. 

1.  venv/PySide6 아래에 bin 폴더를 생성합니다. 
2.  venv/PySide6/uic.exe 파일을 위에서 생성한 venv/PySide6/bin 폴더 아래에 복사해 넣습니다.

GUI 디자인 작업

venv/PySide6/designer.exe 실행 시켜서, Widget을 만듭니다. 

좌측 Buttons 메뉴에서 PushButton을 끌어다가 가운데에 놓습니다.

GUI 이벤트 처리 작업

상단에 Signal/Slot 모드를 선택하여 모드를 변경합니다.

만들어진 PushButton을 드래그 하면 붉은색 전기신호선 같은 선이 나오게 하면 됩니다.

드래그가 완료되면 Signal과 Slot을 연결시키는 창이 뜹니다. 현재는 Slot이 없으므로 편집 버튼을 눌러서 Slot 생성 준비합니다. 

Slot의 + 버튼을 누르고 pushTest() 함수를 생성합니다.

clicked() Signal과 위에서 만든 pushTest() Slot을 연결하고 확인 버튼을 누릅니다.

모든 작업이 완료되면, 모든 연결이 완료되어 파란색으로 표시 됩니다.

이제 만들어진 GUI를 코드로 변경해 보겠습니다. 

일단 먼저 UI를 잘 저장해 둡니다. 저장은 소중하니까요~

그리고 상단 메뉴에서 "폼" - "Python 코드보기"를 누릅니다. 

아래와 같이 코드나 나오게 되고 아래의 코드를 복사합니다.

Python 코드로 완성

 위에서 최종적으로 나온 UI 클래스는 아래의 과정을 거치면 사용가능합니다.

 Designer에서 작성한 Slot(이번에는 pushTest)을 처리해줄 클래스가 하나 필요해서, WindowClass 라는 Rapper 클래스를 만들어 줍니다. 만약에 Designer에서 나온 UI 클래스에 직접 함수를 넣게 되면, 다음에 Designer를 이용해 수정한 코드를 받을때, 내가 만든 함수를 다른곳에 복사했다가, 다시 붙여넣어 줘야 하는 불편함이 발생합니다. 

 WindowClass의 멤버 함수로 pushTest 함수를 정의합니다.

 Designer에서 복사해온 코드를 붙여넣기 하면 완료됩니다.

from PySide6.QtCore import *  # type: ignore
from PySide6.QtGui import *  # type: ignore
from PySide6.QtWidgets import *  # type: ignore

# 복사해서 가져온 클래스
class Ui_Form(object):
    def setupUi(self, Form):
        if not Form.objectName():
            Form.setObjectName(u"Form")
        Form.resize(400, 300)
        self.pushButton = QPushButton(Form)
        self.pushButton.setObjectName(u"pushButton")
        self.pushButton.setGeometry(QRect(150, 130, 75, 24))

        self.retranslateUi(Form)
        self.pushButton.clicked.connect(Form.pushTest)

        QMetaObject.connectSlotsByName(Form)
    # setupUi

    def retranslateUi(self, Form):
        Form.setWindowTitle(QCoreApplication.translate("Form", u"Form", None))
        self.pushButton.setText(QCoreApplication.translate("Form", u"PushButton", None))


# UI 디자이너에서 가져온 UI를 연결하는 클래스
class WindowClass(QMainWindow, Ui_Form):
    def __init__(self):
        super().__init__()
        self.setupUi(self)

    def pushTest(self):
        print('Hello Designer')


# Main 함수
if __name__ == '__main__':

    app = QApplication()
    window = WindowClass()
    window.show()
    app.exec()

 실행화면 입니다.

이상입니다.

더 다양한 정보는 Pyside Qt 강좌에서 확인해 보세요.