티스토리 뷰

개발/QT, QML

QML의 Repeater

부캐: 개발하는 조대리 2024. 11. 19. 09:34
반응형

QML의 Repeater

Repeater는 QML에서 동일한 유형의 UI 요소를 반복적으로 생성하는 데 사용하는 컨트롤입니다. 주로 리스트여러 개의 동일한 컴포넌트를 표시할 때 사용합니다. Repeater는 단순히 동일한 형태의 여러 개의 아이템을 자동으로 생성하여 화면에 배치해 주는 역할을 합니다.

ListView와 달리 스크롤 기능은 제공하지 않으며, 주로 정적인 위치에 동일한 아이템을 반복해서 만들 때 사용됩니다.

 

 

 

 기본 문법

Repeater는 modeldelegate 속성을 사용하여 아이템을 생성합니다.

  • 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와 같은 레이아웃 요소를 사용해야 합니다.

 

 

 

 주요 특징

  1. 반복적 UI 생성:
    • Repeater는 동일한 모양의 아이템을 반복적으로 생성하기 때문에, 리스트처럼 여러 개의 같은 형식을 가진 UI 요소를 간단히 만들 수 있습니다.
  2. 동적 데이터:
    • model을 이용해 동적으로 데이터를 정의하고 이를 delegate로 표현할 수 있습니다.
  3. 레이아웃 제어:
    • Repeater는 생성된 아이템들의 위치를 제어하지 않기 때문에, 상위 레이아웃이 필요합니다.

 

 

 

 결론

  • Repeater는 QML에서 동일한 유형의 UI 요소를 여러 번 반복해서 생성할 때 사용하는 매우 편리한 도구입니다.
  • 정적인 리스트반복적 패턴을 표현하는 데 유용하며, 동적 데이터를 처리할 수도 있습니다.
  • 레이아웃 제어는 상위 요소에게 맡기며, 아이템 위치를 설정하기 위해 Column, Row와 같은 레이아웃 요소와 함께 사용됩니다.

 

 

이렇게 하면 Repeater를 통해 쉽고 빠르게 동일한 UI 요소를 반복적으로 생성할 수 있으며, 사용자의 요구에 따라 데이터를 동적으로 반영하는 반응형 UI를 만들 수 있습니다.

 

 


 

 

개인적으로 학습하면서 정리한 내용입니다.
잘못된 내용이 있을 경우 알려주시면 확인 후 수정 및 반영하도록 하겠습니다.

오늘도 감사합니다.(__)