[PyQt] (내가 기억하기 위해 정리하는) Qt Designer 간단한 UI 프로그램 편집 순서

가끔 테스트 등을 위해 간단한 ui 툴을 만들어야 할 때가 있다.

PyQt로 뚝딱 만들면 되는데 ui는 Qt Designer로 짜는게 가시적이고 편해서 ui 파일을 만들고

pyqt 코드에서 uic import하는 방법으로 사용중이다.

 

오늘은 Qt Designer에서 간단한 ui 짜는 방법을 정리해 본다.

Qt 입문자나 초보자 분들께도 전반적인 내용을 이해할 때 유용하리라 생각이 든다.

 

 

 

순서

1. 종이에 ui 설계해보기

곧바로 컴퓨터로 ui를 짜기보다 종이에 미리 설계를 해놓는 편이 빠르다.

어떤 내용이 들어가야 하는지, ui 배치는 어떻게 할 것인지 등 러프하게 스케치한다.

 

 

2. Qt designer에서 ui 그리기

1) 위젯 선택

Qt에는 위젯이라는 것들이 있다. (위 그림에서 왼쪽에 배치된 내용들)

내게 필요한 위젯을 먼저 선택한 후 (QLabel, QPushButton, QLineEditor 등..)

이것들의 배치를 구체적으로 설정한다.

프로그램 순서 흐름도를 생각하여, 같은 흐름에 있는 것들끼리 같은 구조로 묶을 수 있다.

02.19 Item Widgets - Table Widget - 초보자를 위한 Python GUI 프로그래밍 - PyQt5 (wikidocs.net)

02.19 Item Widgets - Table Widget

이 링크에 위젯들에 대한 간단한 설명이 있으니 참고!

 

2) 위젯들의 구조 설계

위 그림처럼 자동으로 위젯들이 각이 맞게, 간격을 딱 맞춰주는 유용한 위젯이 있다.

Layout이다. 

나는 주로 Vertical Layout, Horizontal Layout을 사용한다.

 

3) 가장 작은 단위부터 배치

내가 짠 ui를 기준으로 설명해본다.

1. 위 사진에서 1번 위치의 라벨 3개, line editor 3개를 form layout에 넣어준다.
2. 1번 layout과 버튼하나, table Widget을 2-1 Vertical layout에 넣어주었다.
3. 2-2 Vertical layout과 2-3 Vertical layout에 각각 버튼과 label을 하나씩 넣어주었다.
4. 3-1 Vertical layout 안에 2-1,2-2,2-3을 배치한다.
5. 3-1, 3-2를 Horizontal layout 안에 넣어준다.

 

3. 간격 조정, 비율 조정, 위젯 이름 설정

이렇게 layout안에 넣고 넣고 하다보면 layout안에 들어간 위젯의 크기를 마우스로 조정하지 못하게 된다.

나도 처음에 당황했는데 layout내부 위젯의 비율을 조정하는 방법은 간단하다.

vertical 또는 horizontal layout을 선택하면

속성탭에 layoutStretch 항목이 나온다. 여기서 레이아웃 안에 있는 위젯의 사이즈 비율을 숫자로 입력하면 된다.

 

여기까지 하면 위 그림의 상태일것이다. 

마지막으로 전체 프로그램 사이즈, 즉 배경 전체에 ui를 맞추기 위해 배경 빈 공간을 마우스 우클릭을 하여

배치>격차형으로 배치를 누르면

이렇게 전체 화면에 딱 맞게 배치된다.

 

이렇게 어느정도 완성이 된 후에 위젯의 이름들을 설정해준다.

PyQt 코드를 작성할 때 위젯의 이름을 알아야 이벤트, 시그널, 슬롯을 사용할 수 있기 때문이다.

화면에 위젯배치를 완료하고 나서 이름을 한번에 수정하는 것이 좋은데, 

중간중간 위젯을 넣고 빼고 수정하면 이름을 계속 수정하는게 번거롭기 때문이다.

 

 

 

4. 직접 실행하여 확인 및 수정

코드를 빌드하여 내가 원하는 대로 잘 만들어졌는지 확인한다.

이후는 코딩을 하면서 필요한 ui를 추가 또는 삭제하면 된다.

경험상 ui 수정은 매번 있었다.

QtDesigner에서 배경 우클>배치>레이아웃 풀기 하면 고정해 놓은 레이아웃이 풀어진다.

 

 

5. python에서 기능 추가

ui가 완성되었다면 코딩을 통해 기능을 추가하면 된다.

예를 들어, 버튼을 클릭했을 때 라벨에 어떤 글씨가 나타나도록 하려면

라벨에 글씨를 출력하는 내용이 들어있는 함수를 만들고, 

버튼 위젯에 클릭 이벤트 발생시 그 함수를 connect 해주면 된다.

self.pb_import.clicked.connect(self.open)

이런식으로!