한국어
Qt
 

QtCreator Design으로 GUI만들기

 

간단하게 버튼을 누르면 HelloWorld 텍스트를 출력하는 예제이다. (QML로 만드는 Hello World 두번째)

 

먼저 Qt Quick 프로젝트를 생성한다.(프로젝트를 만드는 과정은 이 글을 참고하자: https://makersweb.net/qt/6585)

 

처음에 main.qml을 열어보면 Window 외에는 아무것도 없다. 이 윈도우에 사용자 인터페이스를 구성한다.

좌측 탭메뉴에서 Design을 클릭! (먼저 main.qml파일을 더블클릭해서 열면 Design 탭이 활성화 된다.)

 

참고: QtCreator 6 부터는 Design 버튼이 기본적으로 비활성화 된다. Help  About Plugins 에서 QmlDesigner 플러그인을 수동으로 다시 활성화할 수 있다.

 

20190526_1.png

 

백그라운드 컬러를 주기위해 왼쪽의 Library패널에서 여러가지 아이템 중 "Rectangle"을 마우스로 끌어와 놓는다.

(Window에 컬러를 지정할 수도 있지만 설명을 위해 Rectangle을 추가했다.)

20190526_2.png

 

 

그 다음 우측의 Rectangle Properties 패널에서 Color를 지정해 준다.

20190526_3.png

 

그 다음 Layout탭을 클릭하고 Anchors 중에 "Fill parent Item"(우측에서 네번째) 을 클릭한다.  (QML에서 Anchors는 효율적인 화면 구성을 할 수 있게 해준다.)

20190526_4.png

 

설정을 하면 아래 화면처럼 보인다.

20190526_5.png

 

 

 

다른 QML 타입 추가하기

 

이제 여기에 Text와 Button을 배치해보자.

 

먼저 Button을 추가하기위해 왼쪽 Library패널에서 Import탭을 클릭하고 Add Import 콤보박스를 클릭한다.

20190526_6.png

 

 

QtQuick.Controls를 클릭한다.

20190526_7.png

 

다시 QML Types 탭으로 가보면 Qt Quick - Controls 2 아이템들이 추가되어 있다. 기본적인 push버튼, Check Box, Radio Button, Dial 등 사용자 인터페이스를 구성하는 데 필요한 아이템들을 쉽게 추가 할 수 있다.

20190526_8.png

 

Library에서 Column을 배치한다. (Column이나 Row 또는 Grid등의 아이템을 적절히 사용하면 보기좋게 화면을 만들 수 있다.)

20190526_9.png

 

오른쪽 Column의 Propertis 패널에서 spacing은 15정도로 해줬다.

20190526_10.png

 

Text를 끌어다가 추가한다.

20190526_11.png

 

Navigator패널에는 현재 추가되어 있는 아이템트리를 볼 수 있는데 방금 추가한 Text를 드래그해서 column에 아래에 놓는다.

20190526_12.png

 

Text 아이템를 가운데로 정렬하기 위해 오른쪽 Propertis 패널의 Layout 탭의 Anchors중에 "Anchor item horizontally"를 선택한다.

20190526_13.png

 

Text를 추가했던것 처럼 Qt Quick - Controls 2 아이템에서 Button을 추가하고 column 아래에 가운데 정렬로 해준다.

20190526_14.png

 

사용자 인터페이스는 이정도만 하고 버튼을 클릭했을때 Text에 "HelloWorld"를 출력해보자.

 

 

버튼을 클릭하면 clicked 시그널이 방출될 것이고 우리는 이 시그널의 핸들러인 onClicked를 구현하고 시그널에 연결해주면 된다.

 

시그널 핸들러의 구현은 Text에 "HelloWorld"를 설정하면 되는데 Text에 접근하려면 id를 알아야 한다. 각 아이템들의 인스턴스들에는 고유한 id를 부여할 수 있으며 이 id를 통해 해당 인스턴스에 접근 할 수 있다. id는 Propertis 패널 상단에서 변경할 수 있다. 이 예제에서 Text의 id는 "element"이고 이 id를 통해  "HelloWorld"를 설정할 것이다.

 

Button을 선택하고 오른쪽 하단의 Text Editor를 클릭해서 Text 편집 모드로 전환한다. Text 편집 모드로 전환하면 지금까지 화면구성한 것들이 qml로 작성된 것을 볼 수 있다.

20190526_15.png

 

qml 코드에서 Button을 찾고 아래처럼 Button에 onClicked 를 작성해준다.

20190526_16.png

 

이제 키보드의 Ctrl + R을 누르거나 왼쪽 하단에 Run버튼을 클릭해서 실행해본다. 

20190526_17.png

 

화면의 Button을 클릭해보면 HelloWorld가 출력된다.

20190526_18.png

 

번호 제목 글쓴이 날짜 조회 수
공지 Qt프로그래밍(QtQuick) Beginner를 위한 글 읽는 순서 운영자 2019.01.05 85664
78 QSocketNotifier로 파일 디스크립터의 활동감지 makersweb 2019.08.28 1724
77 MCU용 Qt에 대해서 makersweb 2019.08.22 1905
76 [Qt News] Qt for Python을 위한 기술 비전 j2doll 2019.08.20 1620
75 열거형(enum)을 QML에서 사용하는 방법과 문자열(QString)로 얻기 makersweb 2019.08.20 3867
74 [Qt News] Qt 6 기술 비전 (Technical vision for Qt 6) [2] j2doll 2019.08.08 2107
73 [Qt News] Qt6 Git 개발 초기 단계 시작하기 j2doll 2019.08.02 2324
72 [Qt] Google Play의 향후 요구 사항을 준수하는 방법 [2] j2doll 2019.07.29 969
71 Qt기반의 오픈소스 프로젝트들 - 2 운영자 2019.07.21 3999
70 QML, 이미지, 폰트등을 바이너리 리소스로 만들기 makersweb 2019.06.24 3494
69 Qt Creator에서 임베디드 장치로 deploy설정(Custom Process Step) file makersweb 2019.06.15 2193
68 Qt Quick Controls 2사용 및 스타일 설정 file makersweb 2019.06.07 6228
67 QML 강좌 - 동적 Listing (ListView) file makersweb 2019.06.01 10068
66 QtInstallerFramework로 온라인 설치프로그램(Online Installer)만드는 방법 [4] file makersweb 2019.05.28 6243
» QtCreator Design으로 GUI만들기 (QML로 만드는 Hello World -2) [1] file makersweb 2019.05.26 14823
64 QML에서 멀티 스레드(multithreading) 프로그래밍 file makersweb 2019.05.25 2647
63 QtSerialPort를 사용한 시리얼(Serial)통신 [3] makersweb 2019.05.21 11858
62 Qt기반의 오픈소스 프로젝트들 makersweb 2019.05.15 5399
61 Q_D매크로와 d-pointer file makersweb 2019.05.07 756
60 가상키보드(Qt Virtual Keyboard)를 사용하는 방법 [32] file makersweb 2019.05.03 220698
59 Windows에서 Qt D-Bus를 사용하여 프로세스간 통신(IPC) file makersweb 2019.05.02 4465