QML Display Order(2) - Use Loader Object

<<Previous - Display Order(1)

Loader Object는 URL( source ) 또는 Component Object를 이용하여 동적으로 QML 구성 요소를 생성하는데 사용된다. 

Loader는 QML 파일 (source 속성 사용) 또는 Component 객체 (sourceComponent 속성 사용)를 로드 할 수 있다. 필요에 따라 구성 요소를 작성해야하거나 성능상의 이유로 구성 요소를 불필요하게 작성하지 않아야 할 때까지 구성 요소의 작성을 지연시킬 때 유용하다.

다음은 Row에 Repeater 객체를 이용하여 Rectangle을 5개 만들고 각 Rectangle를 클릭할 때마다 Loader 객체를 이용하여 동적으로 QML 구성 요소를 로드하는 예제이다. 

 

Row 객체 안에 Repeater 객체를 선언하고 Repeater의 model 속성에 5개의 값을 주면 Repeater 객체 안에 선언되어 있는 visual 객체( 여기서는 Rectangle )를 model 수만큼 Row로 생성한다. ( Column 객체안에 Repeater가 선언되어 있다면 Column 형태로 객체가 생성된다. )  MouseArea 객체는 visual 객체 안에서 선언 할 수 있기 때무에 Rectangle 객체의 자식으로 선언되었다. MouseArea 객체안의 index 속성은 Repeater 객체에서 주는 속성이다. 이기 때문에 따로 선언을 하지 않아도 된다. 

[Rect1.qml]

[Rect2.qml]

<1> Rectangle 를 클릭하면 'id_loader'에 source로 "Rect1.qml" 파일을 설정한다. ( main.qml의 Line 38 부터 )

active = false는 혹시 몰라 load되어 있는 qml 파일을 삭제 하는 것이다. Rect1.qml 파일을 load 한 후 active = true를 해줘야 한다. Rect1.qml 을 load한 후 id_loader.item( item은 id_loader에 load되어 있는 객체를 가르킨다. 여기서는 Rect1.qml 객체이다.) 을 이용하여 Rect1.qml에 파일에 있는 객체에 값을 셋팅한다. ( id_loader.item.strTxt = "test" )

Rect1의 확인을 클릭하면 id_loader로 exit signal을 보낸다. blue Rectangle을 클릭하면 id_loader로 Rect1이 signal을 보내고 이 signal을 받은 id_loader가 다시 Rect1에 signal을 보낸다. 이로써 Loader 객체를 사용하여 동적으로 QML 파일을 생성해도 signal 통신 및 생성된 객체에 값을 전달하는 것도 가능하다는 것을 알 수 있다.

<2> Rectangle을 클릭하면 (2) 화면의 red Rectangle이 생성된다. 이 때 active = false를 해줌으로써 전에 로드 되어 있던 Rect1.qml은 삭제, 다시 source에 Rect2.qml을 로드한다. 함수 테스트를 위해 javascript 함수를 만들어서 사용해 봤다.

<3> Rectangle을 클릭하면 단순하게 id_loader의 속성인 visible에 true/false값을 할당하여 id_loader를 보였다 안보였다만 할 뿐이다. id_loader에 할당되어 있는 Rect2.qml은 그대로이다. 

<4> 은 Loader의 source 가 아니라 sourceComponent 속성을 이용하여 파일이 아니라 Component 객체를 로드한 예이다. Component 객체는 main.qml 에 기술되어 있지만 loader를 통해 로딩되기 전까지는 객체가 아니다. 객체가 아니기 때문에 선언되어 있어도 보이지 않는 것이다.

<5>은 visible 속성이 아니라 active 속성을 이용하여 보였다 안보였다 하는 것으로 이 경우 보이는 것이아니라 객체 자체를 해제했다 할당했다 하는 것이다.

exLoader.tar.gz

Next >>