[Qt프로그래밍] QML Repeater 리피터 예제

[Qt프로그래밍] QML Repeater 리피터 예제

Qt프로그래밍 QML 리피터(QML Repeaters) :  모델 데이터를 이용해 사용자가 정의한 템플릿 위에 아이템을 배치.

QML 리피터를 이용하면 사용자가 원하는 위치에 많은 요소를 쉽게 배치할 수 있다. QML 리피터가 생성하여 배치할 아이템의 총 개수는 내부의 model 값으로 결정된다.

여기서 소개할 샘플은 24개 도형을 5 by 5 크기로 생성한다. 반복 횟수는 model이 보유한 24이다. QML Repeater 내부의 Rectangle 생성 코드를 24번 반복하니, 총 24개의 도형이 생성된다는 뜻이다. 또한, 도형에는 텍스트가 추가된다.

즉, 도형엔 생성 순서별 번호가 쓰이는 것이다.

for (int i = 0; i < 100; i++)
{
    ...
    ...
}

이런 코드가 있을 때, 저 i를 쓴다. 아래 예제 코드를 실행시켜 먼저 결과를 확인하자.

[ListView] 리스트뷰 예제

수정 전 기본 소스

import QtQuick 2.5
import QtQuick.Window 2.2
 
Window {
    visible: true
    width: 400
    height: 400
 
    Rectangle {
        width: 400; height: 400; color: "black"
 
        Grid {
            x: 5;
            y: 5
 
            rows: 5;
            columns: 5;
            spacing: 10
 
            Repeater { model: 24
                Rectangle { width: 70; height: 70
                    color: "lightgreen"
 
                    Text { text: index
                        font.pointSize: 30
                        anchors.centerIn: parent }
                }
            }
        }
    }
}

위 그림처럼 QML Repeater는 5 by 5 형태의 결과 화면을 만든다

여기서, 예제를 조금 바꿔 도형에 표시되는 텍스트를 교체하자. 도형의 텍스트는 Rectangle 하단의 Text 영역에서 결정된다.

먼저 Qt프로그래밍 QML Repeater의 model을 아래처럼 수정한다.

//model: 10
model: ["KT", "두산", "NC", "삼성", "롯데", "LG", "KIA", "한화", "넥센", "SK"]

처음에 선언한 model: 24는 25번 반복이란 의미로 model을 배열 형태로 교체하면 마치 foreach 처럼 작동한다.

Qt프로그래밍 QML의 확장성과 코드의 유연함을 엿볼 수 있는 부분이기도 하다. 지금 바꾸고자 하는 도형 표시 텍스트가 바로 저 배열의 것이다. 그러려면 기존의 인덱스가 아닌, 인덱스에 해당하는 값을 불러와야 한다.

아래처럼 코드를 수정하자.

Text {
    text: modelData
        font.pointSize: 20
        anchors.centerIn: parent 
    }

QML modelData란 model 인덱스에 해당하는 값을 불러온다는 의미다.

수정이 되었다면 다시 실행해보자. 아래처럼 KBO 10개 구단 팀 명이 보인다.

[ListView] 리스트뷰 예제

QML model 요소는 외부에 선언된 것으로 대치할 수 있다. QML 리피터 내부에 model을 선언하고 싶지 않다면, 이 내용을 외부로 옮기자.

Qt프로그래밍 소스를 아래처럼 구성한다.

ListModel {
    id: kbo_model
    ListElement { name: "위즈" }
    ListElement { name: "베어스" }
    ListElement { name: "다이노스" }
    ListElement { name: "라이온즈" }
    ListElement { name: "자이언츠" }
    ListElement { name: "트윈스" }
    ListElement { name: "타이거즈" }
    ListElement { name: "이글수" }
    ListElement { name: "히어로즈" }
    ListElement { name: "와이번스" }
}
 
Rectangle {
    width: 400; height: 400; color: "black"
...
...
...

Rectangle 상단으로 model 요소를 이동했다. ListModel을 선언하면 편리하게 model의 요소를 관리할 수 있다.

QML Repeater는 kbo_model이란 id를 참조해 요소들을 사용할 수 있다. 그러니, QML 리피터의 model을 아래처럼 수정하자.

model: kbo_model

다시 실행하면 결과는 아래처럼 바뀐다.

[ListView] 리스트뷰 예제

여기까지, 간단하게 Qt프로그래밍 QML 리피터 사용방법을 살펴보았다.

반복문은 어디서건 사용되니 Qt프로그래밍 QML Repeters를 미리 알아두는 게 좋다.

마지막 - 최종 소스

import QtQuick 2.5
import QtQuick.Window 2.2
 
Window {
    visible: true
    width: 400
    height: 400
 
    ListModel {
        id: kbo_model
        ListElement { name: "위즈" }
        ListElement { name: "베어스" }
        ListElement { name: "다이노스" }
        ListElement { name: "라이온즈" }
        ListElement { name: "자이언츠" }
        ListElement { name: "트윈스" }
        ListElement { name: "타이거즈" }
        ListElement { name: "이글수" }
        ListElement { name: "히어로즈" }
        ListElement { name: "와이번스" }
    }
 
    Rectangle {
        width: 400; height: 400; color: "black"
 
        Grid {
            x: 5;
            y: 5
 
            rows: 5;
            columns: 5;
            spacing: 10
 
            Repeater {
                //model: 24
                //model: ["KT", "두산", "NC", "삼성", "롯데", "LG", "KIA", "한화", "넥센", "SK"]
                model: kbo_model
                Rectangle { width: 70; height: 70
                    color: "lightgreen"
 
                    Text { text: modelData
                        font.pointSize:10
                        anchors.centerIn: parent
                    }
                }
            }
        }
    }
}

[Qt프로그래밍] QML Repeater QML 리피터 예제