티스토리 뷰
반응형
Repeater는 QML에서 동일한 유형의 UI 요소를 반복적으로 생성하는 데 사용하는 컨트롤입니다. 주로 리스트나 여러 개의 동일한 컴포넌트를 표시할 때 사용합니다. Repeater는 단순히 동일한 형태의 여러 개의 아이템을 자동으로 생성하여 화면에 배치해 주는 역할을 합니다.
ListView와 달리 스크롤 기능은 제공하지 않으며, 주로 정적인 위치에 동일한 아이템을 반복해서 만들 때 사용됩니다.
기본 문법
Repeater는 model과 delegate 속성을 사용하여 아이템을 생성합니다.
- model: 반복할 항목의 수 또는 데이터를 정의합니다.
- delegate: 반복하여 생성될 UI 컴포넌트를 정의합니다.
예시
qml
import QtQuick 2.15
import QtQuick.Controls 2.15
ApplicationWindow {
visible: true
width: 400
height: 400
Column {
anchors.centerIn: parent
// Repeater 컨트롤
Repeater {
model: 5 // 5개의 아이템을 생성
delegate: Rectangle {
width: 100
height: 40
color: index % 2 == 0 ? "lightblue" : "lightgreen"
border.color: "black"
Text {
anchors.centerIn: parent
text: "Item " + index
}
}
}
}
}
설명
- Repeater: 5개의 아이템을 생성합니다. model: 5로 설정했기 때문에 5개의 Rectangle이 반복적으로 생성됩니다.
- delegate: 각 아이템을 어떻게 표시할지 정의합니다. 여기서는 Rectangle을 사용하여 각 항목을 직사각형으로 나타내고 있습니다.
- index: delegate 내부에서 현재 아이템의 인덱스를 의미합니다. index는 0부터 시작하며, 각 아이템의 순서를 나타냅니다.
- 아이템 레이아웃: Column을 사용하여 생성된 아이템들을 세로 방향으로 나열합니다. Repeater 자체는 위치나 레이아웃을 제어하지 않으므로, 부모 레이아웃인 Column에서 아이템들의 위치를 결정하게 됩니다.
주요 속성 및 역할
- model: Repeater가 반복할 데이터를 정의합니다.
- 정수: 반복 횟수를 나타냅니다. 예를 들어, model: 5는 5개의 아이템을 생성합니다.
- JavaScript 배열 또는 ListModel 객체: 반복할 데이터를 정의할 수 있습니다.
- delegate: 생성할 아이템을 정의하는 UI 컴포넌트입니다. Repeater는 이 delegate를 반복하여 UI를 생성합니다.
model을 사용한 동적 데이터 생성
Repeater는 JavaScript 배열이나 ListModel을 model로 사용할 수도 있습니다. 이를 통해 동적인 데이터를 쉽게 시각화할 수 있습니다.
예시: JavaScript 배열 사용
qml
import QtQuick 2.15
import QtQuick.Controls 2.15
ApplicationWindow {
visible: true
width: 400
height: 400
Column {
anchors.centerIn: parent
Repeater {
model: ["Apple", "Banana", "Cherry", "Date", "Elderberry"]
delegate: Rectangle {
width: 200
height: 40
color: "lightyellow"
border.color: "black"
Text {
anchors.centerIn: parent
text: modelData // 배열의 각 요소 값
}
}
}
}
}
설명
- model: JavaScript 배열을 사용하여 각 아이템에 대한 데이터를 정의합니다. "Apple", "Banana" 등 5개의 항목을 사용합니다.
- modelData: delegate 내부에서 현재 아이템의 데이터 값을 나타냅니다. 여기서는 "Apple", "Banana" 같은 과일 이름을 출력합니다.
ListModel을 사용한 데이터 바인딩
Repeater는 ListModel을 사용해 더 복잡한 데이터를 처리할 수도 있습니다. 예를 들어, 여러 속성을 가진 데이터 모델을 사용할 수 있습니다.
예시: ListModel 사용
qml
import QtQuick 2.15
import QtQuick.Controls 2.15
ApplicationWindow {
visible: true
width: 400
height: 400
Column {
anchors.centerIn: parent
ListModel {
id: fruitModel
ListElement { name: "Apple"; color: "red" }
ListElement { name: "Banana"; color: "yellow" }
ListElement { name: "Cherry"; color: "darkred" }
}
Repeater {
model: fruitModel
delegate: Rectangle {
width: 200
height: 40
color: model.color
border.color: "black"
Text {
anchors.centerIn: parent
text: model.name // ListElement의 속성 사용
}
}
}
}
}
설명
- ListModel: ListElement를 사용해 여러 속성을 가진 데이터를 정의합니다. 각 과일에는 name과 color 속성이 있습니다.
- delegate에서 바인딩: model 속성을 통해 각 ListElement의 속성을 바인딩하여 색상(color)과 이름(name)을 사용합니다.
- model.name, model.color: delegate에서 각 아이템의 데이터를 바인딩하여 UI 요소에 적용합니다.
Repeater와 레이아웃
- 레이아웃 제어 없음: Repeater는 아이템들의 레이아웃을 스스로 제어하지 않습니다. 각 아이템의 위치는 부모 컨테이너나 레이아웃이 결정합니다.
- Column, Row 사용: 아이템들의 정렬이나 위치를 제어하려면 Column, Row와 같은 레이아웃 요소를 사용해야 합니다.
주요 특징
- 반복적 UI 생성:
- Repeater는 동일한 모양의 아이템을 반복적으로 생성하기 때문에, 리스트처럼 여러 개의 같은 형식을 가진 UI 요소를 간단히 만들 수 있습니다.
- 동적 데이터:
- model을 이용해 동적으로 데이터를 정의하고 이를 delegate로 표현할 수 있습니다.
- 레이아웃 제어:
- Repeater는 생성된 아이템들의 위치를 제어하지 않기 때문에, 상위 레이아웃이 필요합니다.
결론
- Repeater는 QML에서 동일한 유형의 UI 요소를 여러 번 반복해서 생성할 때 사용하는 매우 편리한 도구입니다.
- 정적인 리스트나 반복적 패턴을 표현하는 데 유용하며, 동적 데이터를 처리할 수도 있습니다.
- 레이아웃 제어는 상위 요소에게 맡기며, 아이템 위치를 설정하기 위해 Column, Row와 같은 레이아웃 요소와 함께 사용됩니다.
이렇게 하면 Repeater를 통해 쉽고 빠르게 동일한 UI 요소를 반복적으로 생성할 수 있으며, 사용자의 요구에 따라 데이터를 동적으로 반영하는 반응형 UI를 만들 수 있습니다.
개인적으로 학습하면서 정리한 내용입니다.
잘못된 내용이 있을 경우 알려주시면 확인 후 수정 및 반영하도록 하겠습니다.
오늘도 감사합니다.(__)
'개발 > QT, QML' 카테고리의 다른 글
QML에서 delegate (1) | 2024.11.21 |
---|---|
QML에서 MVVC (Model-View-ViewModel) 패턴 (1) | 2024.11.20 |
QML에서 시그널과 슬롯을 사용하기 위한 몇 가지 조건 (0) | 2024.11.18 |
빈 ListModel 생성 후 데이터 추가 (0) | 2024.11.17 |
QML의 ListModel과 ListView (1) | 2024.11.16 |