한국어
Qt
 

QtCreator Design으로 GUI만들기

 

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

 

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

 

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

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

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 2020
71 QML, 이미지, 폰트등을 바이너리 리소스로 만들기 update makersweb 2019.06.24 6
70 Qt Creator에서 임베디드 장치로 deploy설정(Custom Process Step) file makersweb 2019.06.15 36
69 Qt Quick Controls 2사용 및 스타일 설정 file makersweb 2019.06.07 112
68 QML 강좌 - 동적 Listing (ListView) file makersweb 2019.06.01 150
67 QtInstallerFramework로 온라인 설치프로그램(Online Installer)만드는 방법 file makersweb 2019.05.28 79
» QtCreator Design으로 GUI만들기 (QML로 만드는 Hello World -2) file makersweb 2019.05.26 123
65 QML에서 멀티 스레드(multithreading) 프로그래밍 file makersweb 2019.05.25 80
64 QtSerialPort를 사용한 시리얼(Serial)통신 makersweb 2019.05.21 111
63 Qt기반의 오픈소스 프로젝트들 makersweb 2019.05.15 126
62 Q_D매크로와 d-pointer file makersweb 2019.05.07 56
61 가상키보드(Qt Virtual Keyboard)를 사용하는 방법 [7] file makersweb 2019.05.03 167
60 Windows에서 Qt D-Bus를 사용하여 프로세스간 통신(IPC) file makersweb 2019.05.02 116
59 QML과 QtQuick 모듈 개념과 기본 타입들 makersweb 2019.04.26 264
58 QML 전역 객체 (Global Object) file makersweb 2019.04.10 83
57 tslib의 ts_calibrate를 응용해서 Qt로 터치보정기능 구현 file makersweb 2019.04.06 75
56 GPU가 없는 장치에서 Qt Quick을 사용 makersweb 2019.04.02 97
55 QTextCodec클래스를 사용하여 유니코드와 EUC-KR 변환 makersweb 2019.03.25 74
54 qInstallMessageHandler를 이용한 디버그 메세지 출력 제어하기 makersweb 2019.02.25 95
53 Qt5기반 독립 프로세스(out-of-process)로 동작하는 가상키보드(virtual keyboard) file makersweb 2019.02.24 211
52 Qml 기본 컴포넌트 강좌 (4) - 모델 리스팅(Listing) file 운영자 2019.02.23 179