[PyQt5] 7. Qt Designer

Qt Designer 의 설치 경로

Qt Designer는 pyqt5-tools 패키지를 설치한 뒤 다음 경로에서 찾을 수 있습니다. 

path_of_projects\venv\Lib\site-packages\qt5_applications\Qt\bin\designer.exe

바로가기를 프로젝트 폴더에 만들어 두는 게 편합니다. 

객체 탐색기

객체 탐색기로 객체의 트리 구조를 보면서 작업합니다. 

 

미리 보기

CTRL+R으로 미리 보기 하면서 작업합니다. 

.ui 파일

GUI를 만든 뒤 .ui 라는 확장자로 저장할 수 있고,
이 파일은 XML 형식의 텍스트 파일입니다. 

<?xml version="1.0" encoding="UTF-8"?>
<ui version="4.0">
 <class>Form</class>
 <widget class="QWidget" name="Form">
  <property name="geometry">
   <rect>
    <x>0</x>
    <y>0</y>
    <width>400</width>
    <height>300</height>
   </rect>
  </property>
  <property name="windowTitle">
   <string>Form</string>
  </property>
  <layout class="QVBoxLayout" name="verticalLayout">
   <item>
    <widget class="QWidget" name="widget" native="true">
     <layout class="QHBoxLayout" name="horizontalLayout">
      <property name="leftMargin">
       <number>0</number>
      </property>
      <property name="topMargin">
       <number>0</number>
      </property>
      <property name="rightMargin">
       <number>0</number>
      </property>
      <property name="bottomMargin">
       <number>0</number>
      </property>
      <item>
       <widget class="QLineEdit" name="lineEdit"/>
      </item>
      <item>
       <widget class="QPushButton" name="pushButton">
        <property name="text">
         <string>PushButton</string>
        </property>
       </widget>
      </item>
     </layout>
    </widget>
   </item>
   <item>
    <widget class="QPlainTextEdit" name="plainTextEdit">
     <property name="enabled">
      <bool>false</bool>
     </property>
    </widget>
   </item>
  </layout>
 </widget>
 <resources/>
 <connections/>
</ui>

https://github.com/pycrawling/pyqt5_study/blob/main/pyqt5_study_07-1.ui

 

.ui 파일을 파이썬 코드(.py)로 변환하기

Qt Designer 이용

단 PySide2 기반의 코드입니다. 

UIC 이용

path_of_projects\venv\Lib\site-packages\PyQt5\uic

에 있는 pyuic.py 파일을 이용해서 변환할 수 있습니다. 
(인수의 대소문자에 주의)

venv 환경 아래에서는 이렇게 하면 됩니다. 

python -m PyQt5.uic.pyuic -x pyqt5_study_07-1.ui -o pyqt5_study_07-1.py

이런 코드를 얻을 수 있었습니다. 

# -*- coding: utf-8 -*-

# Form implementation generated from reading ui file 'untitled.ui'
#
# Created by: PyQt5 UI code generator 5.15.4
#
# WARNING: Any manual changes made to this file will be lost when pyuic5 is
# run again.  Do not edit this file unless you know what you are doing.


from PyQt5 import QtCore, QtGui, QtWidgets


class Ui_Form(object):
    def setupUi(self, Form):
        Form.setObjectName("Form")
        Form.resize(400, 300)
        self.verticalLayout = QtWidgets.QVBoxLayout(Form)
        self.verticalLayout.setObjectName("verticalLayout")
        self.widget = QtWidgets.QWidget(Form)
        self.widget.setObjectName("widget")
        self.horizontalLayout = QtWidgets.QHBoxLayout(self.widget)
        self.horizontalLayout.setContentsMargins(0, 0, 0, 0)
        self.horizontalLayout.setObjectName("horizontalLayout")
        self.lineEdit = QtWidgets.QLineEdit(self.widget)
        self.lineEdit.setObjectName("lineEdit")
        self.horizontalLayout.addWidget(self.lineEdit)
        self.pushButton = QtWidgets.QPushButton(self.widget)
        self.pushButton.setObjectName("pushButton")
        self.horizontalLayout.addWidget(self.pushButton)
        self.verticalLayout.addWidget(self.widget)
        self.plainTextEdit = QtWidgets.QPlainTextEdit(Form)
        self.plainTextEdit.setEnabled(False)
        self.plainTextEdit.setObjectName("plainTextEdit")
        self.verticalLayout.addWidget(self.plainTextEdit)

        self.retranslateUi(Form)
        QtCore.QMetaObject.connectSlotsByName(Form)

    def retranslateUi(self, Form):
        _translate = QtCore.QCoreApplication.translate
        Form.setWindowTitle(_translate("Form", "Form"))
        self.pushButton.setText(_translate("Form", "PushButton"))


if __name__ == "__main__":
    import sys
    app = QtWidgets.QApplication(sys.argv)
    Form = QtWidgets.QWidget()
    ui = Ui_Form()
    ui.setupUi(Form)
    Form.show()
    sys.exit(app.exec_())

https://github.com/pycrawling/pyqt5_study/blob/main/pyqt5_study_07-1.py

 

.ui 파일을 바로 불러오기

.ui 파일을 파이썬 코드로 변환하지 않고 바로 불러 올 수 있습니다. 

from PyQt5.QtWidgets import *
from PyQt5 import uic

ui = uic.loadUiType('pyqt5_study_07-1.ui')[0]


class MyWindow(QWidget, ui):
    def __init__(self):
        super().__init__()
        self.setupUi(self)


app = QApplication([])
my_window = MyWindow()
my_window.show()
app.exec_()

https://github.com/pycrawling/pyqt5_study/blob/main/pyqt5_study_07-2.py

만약 최상위 위젯이 QWidget이 아닌 QMainWindow 등으로 ui 파일을 작성하였다면,
클래스를 작성 시 당연히 그 위젯(QMainWindow 등)을 상속해야 합니다. 

끝까지 봐주셔서 감사합니다.