QT QML 시작하기 9 - QML Object Type

<< Previous

아래 링크는 QML의 모든 Object Type들이 정의되어 있다.

All QML Types

가장 많이 사용하고 기본적인 Object들은 아래 링크에 나와 있다.

Basic QML Visual Elements

 QML Basic Elements

Basic Elements 중에서 몇 개의 Example Code이다.

Rectangle Object

Rectangle Object는 사각형을 나타내는 Object Type이다. 기본적인 Property로는 위치를 나타내는 x, y, width, height와 색깔을 표시하는 color, 모서리의 라운드를 나타내는 radious, 외곽선을 나타내는 border 속성이 있다.

border 속성은 객체로서 자식 속성을 가지고 있다.

import 키워드는 java의 import 키워드와 같은 역활을 한다.

이외에 더 많은 속성은 링크를 따라 확인하면 된다.

Image Object

Image Object는 이미지 파일을 나타내는 객체이다. 로드할 수 있는 이미지 파일은 png, jpg, bmp등 종류는 다양하다. Image Object의 기본적인 property는 다른 객체들과 유사하다. 이미지 객체의 고유 property로 이미지 source의 path를 지정할 수 있는 'source' property가 있다. source property의 이미지 파일 경로명은 두 가지 방법으로 기술 할 수가 있다.

첫 째, 이미지를 리소스에 등록하는 방법이다.

이미지를 리소스에 등록하게 되면 "qrc:/폴더 경로 명" 으로 기술한다. ex) source: "qrc:/home/user/test.png"

둘 째, 이미지를 리소스에 등록하지 않고 경로명을 기술해주는 방법으로 경로명은 "file:///폴더 경로 명"로 기술한다.

ex) source: "file://home/user/test.png" 이 경우 file: 뒤에 슬래쉬가 3개가 들어가는게 포인트다.

두 가지 방법의 차이점은 딱히 없다. 리소스에 등록할 때는 컴파일된 실행 파일에 이미지까지 같이 묶여질 뿐이다.

Text Object

Text Object는 텍스트를 나타내는 객체다. Text Object의 property인 text에 기본적인 string으로 텍스트값을 줄 수도 있지만 HTML 형식으로도 텍스트 값을 줄 수 있다. 그 외에 폰트의 종류와 사이즈 등을 설정할 수 있는 font property 객체도 property 로 가지고 있다.

MouseArea Object

MouseArea Object는 Mouse event 객체이다. 이 객체는 단독으로 생성될 수는 없고 꼭 parent 객체가 필요하다. 예제 소스에서는 Rectangle 객체의 child 객체로 생성했다. MouseArea 객체는 이벤트( 여기서는 마우스 클릭 )를 받을 영역을 꼭 지정해야 동작한다. 즉 x, y, width, height 를 꼭 설정해줘야 한다.

anchors.fill: parent 라는 구문은 MouseArea 객체의 x, y, width, height 영역을을 부모 객체와 동일하게 지정한다는 뜻이다. 이벤트 받을 영역을 부모 객체인 Rectangle 객체의 크기로 지정한 후 클릭 이벤트가 왔을 경우 부모의 색깔을 red로 바꾼 다는 뜻이다.

onClicked: { parent.color = 'red' }

anchors property 는 이해하고 나면 UI를 그리는데 여러가지로 편한 키워드이다. 하지만 이해못하고 쓰면 UI가 이상한데 그려지기 일쑤이다.

객체를 생성하면서 property 초기값을 줄 때에는 color:'red'로 하지만 property 초기 값을 지정 후 호출하여 사용할 때는 color = 'red 라고 사용해야 한다.

QML은 스크립트 언어이기 때문에 컴파일 언어 처럼 정확한 신텍스 체크를 해주지는 않는다. property를 사용할 때 '=' 대신 ':' 를 사용해도 문법적 오류가 발생했다고 알려주지 않는다. 실제 동작할 때 이 부분에서 동작이 안 될 뿐이다

Next >>