PyQT 5 속성 튜 토리 얼 의 Qt Designer 소개 및 입문

Qt Designer 소개

PyQt 에서 UI 인 터 페 이 스 를 작성 하면 코드 를 통 해 직접 구현 할 수도 있 고 Qt Designer 를 통 해 완성 할 수도 있 습 니 다.Qt Designer 의 디자인 은 MVC 의 구조 에 부합 되 고 보기 와 논리의 분 리 를 실현 하여 개발 의 편리 함 을 실현 했다.Qt Designer 의 조작 방식 은 매우 유연 하 며 끌 어 당 기 는 방식 으로 컨트롤 을 배치 하면 컨트롤 효 과 를 수시로 볼 수 있 습 니 다.Qt Designer 에서 생 성 된 ui 파일(실질 적 으로 XML 형식의 파일)도 pyuic 5 도 구 를 통 해.py 파일 로 변환 할 수 있 습 니 다.
Qt Designer 는 PyQt5-tools 패키지 와 함께 설치 되 어 있 으 며,설치 경 로 는"Python 설치 경로\Lib\site-packages\pyqt5-tools"아래 에 있 습 니 다.
Qt Designer 를 시작 하려 면 위 디 렉 터 리 에 직접 가서 designer.exe 를 두 번 눌 러 Qt Designer 를 열 수 있 습 니 다.또는 상기 경 로 를 환경 변수 에 추가 하고 명령 행 에 designer 를 입력 하여 엽 니 다.PyCharm 에서 외부 도구 로 설정 해서 엽 니 다.
다음은 PyCharm 을 예 로 들 어 PyCharm 의 Qt Designer 설정 방법 을 설명 한다.
PyCharm 에서 PyQt 5 도구 설정
PyCharm 을 열 고 Settings->Tools->External Tools 를 선택 하고 왼쪽 상단 의 녹색 가 호 를 클릭 합 니 다.
 
Name QtDesigner 를 입력 합 니 다.Program 은 우리 가 설치 한 PyQt5-tools 아래 designer.exe 를 선택 합 니 다.Working directory 는 작업 디 렉 터 리 를 선택 합 니 다.그리고 OK 를 누 르 면 PyCharm 의 외부 도구 로 QtDesigner 를 추가 합 니 다.
그리고 PyUIC(UI 변환 도구)를 추가 합 니 다.PyUIC 의 Program 은 Python.exe 입 니 다.Python 의 설치 디 렉 터 리 아래 Scripts 디 렉 터 리 에서 Working directory 는 우리 의 작업 디 렉 터 리 로 설정 되 고 Arguments 는 다음 코드 를 입력 합 니 다.

-m PyQt5.uic.pyuic $FileName$ -o $FileNameWithoutExtension$.py

마지막 으로 pyrcc 를 PyQt 5 에 사용 할 자원 파일 변환 코드 를 추가 합 니 다.구체 적 인 설정 은 위 내용 과 같 습 니 다.Arguments 입력:

$FileName$ -o $FileNameWithoutExtension$_rc.py

종료 하기 전에 Apply 를 누 르 면 설정 을 저장 합 니 다.설정 이 완료 되면 PyCharm 에 3 개의 도구 가 추 가 됩 니 다.
 
QtDesigner 를 누 르 면 QtDesigner 인터페이스 가 열 립 니 다.
Qt Designer 인터페이스 안내
Qt Designer 를 열 자마자 다음 그림 과 같은 창 이 팝 업 됩 니 다.
 
새 Form 을 만 드 는 데 는 Widget 과 Main Window 가 가장 많이 사용 되 는 5 개의 템 플 릿 이 있 습 니 다.여기에서 우 리 는 Main Window 를 만 드 는 것 을 선택 했다.
 
위 인터페이스의 맨 왼쪽 메뉴 는 Widget Box 이 고 Widget Box 에는 PyQt 5 의 모든 Widget 구성 요소 가 포함 되 어 있 습 니 다.우 리 는 왼쪽 Widget Box 에서 Button,View,Input 등 구성 요 소 를 중간 창 으로 끌 어 올 릴 수 있 습 니 다.
Form->Preview(단축 키 는 Ctrl+R)를 누 르 면 우리 가 디자인 한 인 터 페 이 스 를 미리 볼 수 있 고,Preview In 을 사용 하여 해당 테마 스타일 에서 미리 볼 수 있 습 니 다.
우 리 는 Label 과 Button 을 주 창(Main Window)으로 끌 어 들 였 다.
 
이 때 오른쪽 상단 에 있 는 Object Inspector(대상 뷰 어)에서 주 창 에 설 치 된 대상(label 과 pushbuton)과 해당 하 는 Qt 클래스 를 볼 수 있 습 니 다.
 
Label 의 경우,이때 우 리 는 Main Window 의 label 을 클릭 하거나 Object Inspector 에서 label 을 선택 한 후 오른쪽 에 있 는 영역 인 Property Editor(속성 편집기)를 봅 니 다.
 
그 주요 포함 속성 은 다음 과 같다.
명칭.
속뜻
objectName
컨트롤 개체 이름
geometry
상응하는 너비 와 높이 와 좌표
sizePolicy
컨트롤 크기 정책
minimumSize
최소 너비 와 높이
maximumSize
최대 너비 와 높이
font
글씨체
cursor
커서
PS:minimumSize 와 maximumSize 를 같은 수치 로 설정 한 후 창의 크기 를 고정 합 니 다.
맨 오른쪽 아래 부분 은 리 소스 브 라 우 저(자원 브 라 우 저)이 고 자원 브 라 우 저 에 이미지 소재,레이 블 이나 버튼 등 컨트롤 러 의 배경 그림 등 을 추가 할 수 있 습 니 다.

Qt Designer 의 UI 파일
Qt Designer 디자인 으로 저 장 된 파일 은 ui 형식의 파일 입 니 다.
메모 장 등 소프트웨어 를 저장 하고 사용 하여 열 면 ui 파일 의 내용 은 다음 과 같 습 니 다.

<?xml version="1.0" encoding="UTF-8"?>
<ui version="4.0">
 <class>MainWindow</class>
 <widget class="QMainWindow" name="MainWindow">
 <property name="geometry">
 <rect>
 <x>0</x>
 <y>0</y>
 <width>800</width>
 <height>600</height>
 </rect>
 </property>
 <property name="windowTitle">
 <string>MainWindow</string>
 </property>
 <widget class="QWidget" name="centralwidget">
 <widget class="QLabel" name="label">
 <property name="geometry">
  <rect>
  <x>240</x>
  <y>80</y>
  <width>72</width>
  <height>15</height>
  </rect>
 </property>
 <property name="text">
  <string>TextLabel</string>
 </property>
 </widget>
 <widget class="QPushButton" name="pushButton">
 <property name="geometry">
  <rect>
  <x>240</x>
  <y>120</y>
  <width>93</width>
  <height>28</height>
  </rect>
 </property>
 <property name="text">
  <string>PushButton</string>
 </property>
 </widget>
 </widget>
 <widget class="QMenuBar" name="menubar">
 <property name="geometry">
 <rect>
  <x>0</x>
  <y>0</y>
  <width>800</width>
  <height>26</height>
 </rect>
 </property>
 </widget>
 <widget class="QStatusBar" name="statusbar"/>
 </widget>
 <resources/>
 <connections/>
</ui>

ui 파일 의 첫 줄 에서 우 리 는 실질 적 으로 XML 파일 이라는 것 을 알 수 있다.ui 파일 에는 주 창 에 있 는 모든 컨트롤 의 속성 이 저 장 됩 니 다.UI 파일 을 XML 파일 로 저장 하여 가 독성 과 이식 성 이 높 기 때문에 ui 파일 을.py 파일 로 편리 하 게 변환 하여 Python 언어 로 디자인 된 GUI 에서 프로 그래 밍 할 수 있 습 니 다.
.ui 파일 을.py 파일 로 변환 합 니 다.
ui 파일 을.py 파일 로 변환 하 는 것 은 간단 합 니 다.앞에서 pyuic 5 도 구 를 설정 한 적 이 있 습 니 다.PyCharm 에 이 도 구 를 설정 하지 않 았 거나 PyCharm 을 전혀 사용 하지 않 았 다 면 명령 행 에서 다음 명령 을 사용 하여 ui 에서.py 로 전환 할 수 있 습 니 다.

pyuic5 - o      .py     .ui

또는 PyCharm 에서.ui 파일 을 찾 고 메뉴 를 오른쪽 클릭 으로 열 어 External Tools->PyUIC 를 찾 습 니 다.클릭 하면 해당 프로젝트 디 렉 터 리 에.py 파일 이 생 성 됩 니 다.(ui 파일 은 우리 의 External Tools 에 설 치 된 해당 항목 디 렉 터 리 에 저장 해 야 합 니 다)
 
변환 이 완료 되면.py 파일 을 엽 니 다.

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

# Form implementation generated from reading ui file 'mainWindow.ui'
#
# Created by: PyQt5 UI code generator 5.10.1
#
# WARNING! All changes made in this file will be lost!

from PyQt5 import QtCore, QtGui, QtWidgets

class Ui_MainWindow(object):
 def setupUi(self, MainWindow):
  MainWindow.setObjectName("MainWindow")
  MainWindow.resize(800, 600)
  self.centralwidget = QtWidgets.QWidget(MainWindow)
  self.centralwidget.setObjectName("centralwidget")
  self.label = QtWidgets.QLabel(self.centralwidget)
  self.label.setGeometry(QtCore.QRect(240, 80, 72, 15))
  self.label.setObjectName("label")
  self.pushButton = QtWidgets.QPushButton(self.centralwidget)
  self.pushButton.setGeometry(QtCore.QRect(240, 120, 93, 28))
  self.pushButton.setObjectName("pushButton")
  MainWindow.setCentralWidget(self.centralwidget)
  self.menubar = QtWidgets.QMenuBar(MainWindow)
  self.menubar.setGeometry(QtCore.QRect(0, 0, 800, 26))
  self.menubar.setObjectName("menubar")
  MainWindow.setMenuBar(self.menubar)
  self.statusbar = QtWidgets.QStatusBar(MainWindow)
  self.statusbar.setObjectName("statusbar")
  MainWindow.setStatusBar(self.statusbar)

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

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

위 파일 을 살 펴 보면 Qt Designer 를 통 해 인 터 페 이 스 를 만 들 지 않 으 면 버튼 과 Label 등 을 적당 한 위치 에 두 는 것 이 매우 고통스러운 과정 임 을 알 수 있 습 니 다.그리고 Qt Designer 를 통 해 우 리 는 UI 를 신속하게 만 들 고 Python 의 코드 를 생 성하 여 빠 른 UI 개발 을 실현 할 수 있 습 니 다.
변 환 된.py 파일 사용 하기
그러나 이 변 환 된 Python 파일 을 실행 하 는 동안 창 을 표시 할 수 없습니다.이 Python 파일 은 주 창 과 컨트롤 을 정의 하 는 코드 만 있 고 프로그램 입구 의 코드 가 없 기 때 문 입 니 다.보기 와 논리 가 분 리 된 원칙 을 지 키 기 위해 서 이 파일 을 호출 하고 창 을 만 드 는 새로운 스 크 립 트 를 만 듭 니 다.

import sys
from PyQt5.QtWidgets import QApplication, QMainWindow
from mainWindow import *


class MyWindow(QMainWindow, Ui_MainWindow):
 def __init__(self, parent=None):
  super(MyWindow, self).__init__(parent)
  self.setupUi(self)

if __name__ == '__main__':
 app = QApplication(sys.argv)
 myWin = MyWindow()
 myWin.show()
 sys.exit(app.exec_())

상기 코드 를 통 해 우 리 는 Ui 를 계승 하 였 습 니 다.MainWindow 클래스 는 메 인 창 을 구성 하고 프로그램의 입 구 를 정의 하 며 QApplication 대상 을 만들어 Qt 창 을 만 듭 니 다.그 운행 결 과 는 다음 과 같다.

상기 조작 을 통 해 우 리 는 Qt Designer 디자인 인터페이스 에서 업무 논 리 를 실현 하 는 대체적인 작업 절 차 를 익 혔 다.이 작업 절 차 를 통 해 업 무 를 간소화 하고 속도 의 향상 을 실현 할 수 있다.
보기 와 비 즈 니스 논리 에 대한 분 리 를 통 해 Qt Designer 의 UI 디자인 을 변경 할 때마다 코드 를 다시 작성 하지 않 고 변 경 된 부분 을 조금 만 수정 하면 됩 니 다.
다음 강 의 는 Qt Designer 의 사용 에 대해 계속 설명 할 것 입 니 다.
PyQT 5 속성 튜 토리 얼 의 Qt Designer 소개 와 입문 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 관련 Qt Designer 소개 와 입문 내용 은 저희 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 조회 하 시기 바 랍 니 다.앞으로 도 많은 응원 부 탁 드 리 겠 습 니 다!