Back to Qt.io
Contact Us Blog Download Qt

모델 및 뷰 Qt Quick

Qt Quick 에는 데이터를 표시하기 위한 모델, 뷰 및 델리게이트의 개념이 있습니다. 이러한 개념은 개발자나 디자이너가 데이터의 다양한 측면을 제어할 수 있도록 데이터의 시각화를 모듈화합니다. 개발자는 데이터를 거의 변경하지 않고도 목록 보기를 그리드 보기로 바꿀 수 있습니다. 마찬가지로, 델리게이트에 데이터 인스턴스를 캡슐화하면 개발자가 데이터를 표시하거나 처리하는 방법을 지정할 수 있습니다.

  • 모델 - 데이터와 그 구조를 포함합니다. 모델을 만들기 위한 몇 가지 QML 유형이 있습니다.
  • 보기 - 데이터를 표시하는 컨테이너입니다. 보기는 데이터를 목록이나 그리드로 표시할 수 있습니다.
  • 델리게이트 - 데이터가 뷰에 표시되는 방식을 지정합니다. 델리게이트는 모델에서 각 데이터 단위를 가져와 캡슐화합니다. 델리게이트를 통해 데이터에 액세스할 수 있습니다. 또한 델리게이트는 편집 가능한 모델에 데이터를 다시 쓸 수도 있습니다(예: TextField 의 onAccepted 핸들러).

데이터를 시각화하려면 뷰의 model 속성을 모델에 바인딩하고 delegate 속성을 컴포넌트 또는 다른 호환 가능한 유형에 바인딩합니다.

뷰로 데이터 표시

뷰는 항목 컬렉션을 위한 컨테이너입니다. 뷰는 기능이 풍부하며 스타일 또는 동작 요구 사항을 충족하도록 사용자 지정할 수 있습니다.

표준 보기 세트는 Qt Quick 그래픽 유형의 기본 집합에 제공됩니다:

이러한 유형에는 각 유형에만 적용되는 속성과 동작이 있습니다. 자세한 내용은 해당 문서를 참조하세요.

또한 Qt Quick Controls 에는 애플리케이션 스타일에 따라 스타일이 지정된 몇 가지 추가 보기 및 델리게이트가 포함되어 있습니다(예: HorizontalHeaderView 및 VerticalHeaderView).

뷰 꾸미기

뷰는 header, footer, section 속성과 같은 장식 속성을 통해 시각적 사용자 지정을 허용합니다. 객체(일반적으로 다른 시각적 객체)를 이러한 속성에 바인딩하면 뷰를 꾸밀 수 있습니다. 바닥글에는 테두리를 표시하는 Rectangle 유형이나 목록 위에 로고를 표시하는 머리글이 포함될 수 있습니다.

특정 클럽에서 회원 목록을 브랜드 색상으로 꾸미고 싶다고 가정해 보겠습니다. 회원 목록은 model 에 있고 delegate 에는 모델의 콘텐츠가 표시됩니다.

ListModel {
    id: nameModel
    ListElement { name: "Alice" }
    ListElement { name: "Bob" }
    ListElement { name: "Jane" }
    ListElement { name: "Harry" }
    ListElement { name: "Wendy" }
}
Component {
    id: nameDelegate
    Text {
        required property string name
        text: name
        font.pixelSize: 24
    }
}

클럽은 시각적 개체를 header 및 footer 속성에 바인딩하여 회원 목록을 꾸밀 수 있습니다. 시각적 개체는 인라인, 다른 파일 또는 Component 유형으로 정의할 수 있습니다.

ListView {
    anchors.fill: parent
    clip: true
    model: nameModel
    delegate: nameDelegate
    header: bannercomponent
    footer: Rectangle {
        width: parent.width; height: 30;
        gradient: clubcolors
    }
    highlight: Rectangle {
        width: parent.width
        color: "lightgray"
    }
}

Component {     //instantiated when header is processed
    id: bannercomponent
    Rectangle {
        id: banner
        width: parent.width; height: 50
        gradient: clubcolors
        border {color: "#9EDDF2"; width: 2}
        Text {
            anchors.centerIn: parent
            text: "Club Members"
            font.pixelSize: 32
        }
    }
}
Gradient {
    id: clubcolors
    GradientStop { position: 0.0; color: "#8EE2FE"}
    GradientStop { position: 0.66; color: "#7ED2EE"}
}

마우스 및 터치 처리

뷰는 콘텐츠의 드래그 및 플리킹을 처리하지만 개별 델리게이트와의 터치 상호 작용은 처리하지 않습니다. 예를 들어 currentIndex 을 설정하는 등 델리게이트가 터치 입력에 반응하려면 델리게이트가 적절한 터치 처리 로직이 포함된 MouseArea 을 제공해야 합니다.

highlightRangeMode 가 StrictlyEnforceRange 로 설정된 경우 뷰는 항상 currentIndex 이 지정된 하이라이트 범위 내에 있는지 확인하기 때문에 뷰를 드래그/플리크하면 currentIndex가 영향을 받습니다.

목록 뷰 섹션

ListView 콘텐츠를 섹션으로 그룹화할 수 있으며, 관련 목록 항목은 섹션에 따라 레이블이 지정됩니다. 또한 섹션은 델리게이트로 장식할 수 있습니다.

목록에는 사람의 이름과 그 사람이 속한 팀이 표시된 목록이 포함될 수 있습니다.

ListModel {
    id: nameModel
    ListElement { name: "Alice"; team: "Crypto" }
    ListElement { name: "Bob"; team: "Crypto" }
    ListElement { name: "Jane"; team: "QA" }
    ListElement { name: "Victor"; team: "QA" }
    ListElement { name: "Wendy"; team: "Graphics" }
}
Component {
    id: nameDelegate
    Text {
        text: name;
        font.pixelSize: 24
        anchors.left: parent.left
        anchors.leftMargin: 2
    }
}

ListView 유형에는 인접 유형 및 관련 유형을 섹션으로 결합할 수 있는 section 속성이 첨부되어 있습니다. section.property 은 섹션으로 사용할 목록 유형 속성을 결정합니다. section.criteria 은 섹션 이름이 표시되는 방식을 지정할 수 있으며 section.delegate 은 보기의 위임자 속성과 유사합니다.

ListView {
    anchors.fill: parent
    model: nameModel
    delegate: nameDelegate
    focus: true
    highlight: Rectangle {
        color: "lightblue"
        width: parent.width
    }
    section {
        property: "team"
        criteria: ViewSection.FullString
        delegate: Rectangle {
            color: "#b0dfb0"
            width: parent.width
            height: childrenRect.height + 4
            Text { anchors.horizontalCenter: parent.horizontalCenter
                font.pixelSize: 16
                font.bold: true
                text: section
            }
        }
    }
}

뷰 델리게이트

뷰에는 목록의 항목을 시각적으로 표현하기 위한 델리게이트가 필요합니다. 보기는 델리게이트가 정의한 템플릿에 따라 각 항목 목록을 시각화합니다. 모델의 항목은 index 속성 및 항목의 속성을 통해 액세스할 수 있습니다.

Component {
    id: petdelegate
    Text {
        id: label
        font.pixelSize: 24
        text: index === 0 ? type + " (default)" : type

        required property int index
        required property string type
    }
}

뷰 델리게이트의 위치 지정

뷰 유형에 따라 항목이 배치되는 방식이 결정됩니다. ListView 은 orientation 에 따라 항목을 일직선으로 배치하는 반면 GridView 은 2차원 그리드에 배치할 수 있습니다. 뷰의 레이아웃 동작이 항상 모든 위치 바인딩보다 우선하므로 x 및 y 에 직접 바인딩하는 것은 권장하지 않습니다.

델리게이트에서 뷰 및 모델에 액세스하기

델리게이트가 바인딩된 목록 보기는 델리게이트에서 ListView.view 속성을 통해 액세스할 수 있습니다. 마찬가지로 델리게이트는 GridView GridView.view 을 사용할 수 있습니다. 따라서 해당 모델과 해당 프로퍼티는 ListView.view.model 을 통해 사용할 수 있습니다. 또한 모델에 정의된 모든 신호 또는 메서드에도 액세스할 수 있습니다.

이 메커니즘은 예를 들어 여러 뷰에 동일한 델리게이트를 사용하되 각 뷰마다 데코레이션이나 기타 기능을 다르게 설정하고 이러한 서로 다른 설정을 각 뷰의 속성으로 사용하려는 경우에 유용합니다. 마찬가지로 모델의 일부 속성에 액세스하거나 표시하고 싶을 수도 있습니다.

다음 예에서는 델리게이트가 모델의 속성 언어를 표시하고 필드 중 하나의 색상이 뷰의 fruit_color 속성에 따라 달라집니다.

Rectangle {
     width: 200; height: 200

    ListModel {
        id: fruitModel
        property string language: "en"
        ListElement {
            name: "Apple"
            cost: 2.45
        }
        ListElement {
            name: "Orange"
            cost: 3.25
        }
        ListElement {
            name: "Banana"
            cost: 1.95
        }
    }

    Component {
        id: fruitDelegate
        Row {
                id: fruit
                Text { text: " Fruit: " + name; color: fruit.ListView.view.fruit_color }
                Text { text: " Cost: $" + cost }
                Text { text: " Language: " + fruit.ListView.view.model.language }
        }
    }

    ListView {
        property color fruit_color: "green"
        model: fruitModel
        delegate: fruitDelegate
        anchors.fill: parent
    }
}

모델

데이터는 델리게이트가 바인딩할 수 있는 명명된 데이터 역할을 통해 델리게이트에 제공됩니다. 다음은 유형과 연령이라는 두 가지 역할이 있는 ListModel 및 이러한 역할에 바인딩하여 해당 값을 표시하는 위임자가 있는 ListView 입니다:

import QtQuick

Item {
    width: 200
    height: 250

    ListModel {
        id: myModel
        ListElement { type: "Dog"; age: 8; noise: "meow" }
        ListElement { type: "Cat"; age: 5; noise: "woof" }
    }

    component MyDelegate : Text {
        required property string type
        required property int age
        text: type + ", " + age
        // WRONG: Component.onCompleted: () => console.log(noise)
        // The above line would cause a ReferenceError
        // as there is no required property noise,
        // and the presence of the required properties prevents
        // noise from being injected into the scope
    }

    ListView {
        anchors.fill: parent
        model: myModel
        delegate: MyDelegate {}
    }
}

대부분의 경우 필수 속성을 사용하여 모델 데이터를 델리게이트에 전달해야 합니다. 델리게이트에 필수 속성이 포함된 경우 QML 엔진은 필수 속성의 이름이 모델 역할의 이름과 일치하는지 확인합니다. 일치하는 경우 해당 속성은 모델의 해당 값에 바인딩됩니다.

드문 경우지만 모델 속성을 필수 속성이 아닌 QML 컨텍스트를 통해 전송하고 싶을 수도 있습니다. 델리게이트에 필수 속성이 없는 경우 명명된 역할이 컨텍스트 속성으로 제공됩니다:

import QtQuick

Item {
    width: 200; height: 250

    ListModel {
        id: myModel
        ListElement { type: "Dog"; age: 8 }
        ListElement { type: "Cat"; age: 5 }
    }

    Component {
        id: myDelegate
        Text { text: type + ", " + age }
    }

    ListView {
        anchors.fill: parent
        model: myModel
        delegate: myDelegate
    }
}

컨텍스트 속성은 툴링에 표시되지 않으며 Qt Quick Compiler 가 코드를 최적화하는 것을 방해합니다. 또한 델리게이트가 기대하는 특정 데이터를 추론하기가 더 어려워집니다. QML에서 QML 컨텍스트를 명시적으로 채울 수 있는 방법은 없습니다. 컴포넌트가 QML 컨텍스트를 통해 데이터를 전달하기를 기대하는 경우, 네이티브 수단을 통해 올바른 컨텍스트를 사용할 수 있는 곳에서만 사용할 수 있습니다. 여기에는 자체 C++ 코드나 주변 요소의 특정 구현이 포함될 수 있습니다. 반대로 필수 프로퍼티는 QML 또는 네이티브 수단을 통해 다양한 방식으로 설정할 수 있습니다. 따라서 QML 컨텍스트를 통해 데이터를 전달하면 컴포넌트의 재사용성이 떨어집니다.

모델의 속성과 델리게이트의 속성 간에 명명 충돌이 있는 경우, 대신 정규화된 모델 이름으로 역할에 액세스할 수 있습니다. 예를 들어 Text 유형에 (필수 항목이 아닌) 유형 또는 연령 속성이 있는 경우 위 예의 텍스트에는 모델 항목의 유형 및 연령 값 대신 해당 속성 값이 표시됩니다. 이 경우 델리게이트가 모델 항목의 속성 값을 표시하도록 하기 위해 속성을 model.type 및 model.age 으로 참조할 수 있습니다. 이 기능을 사용하려면 델리게이트에 model 프로퍼티가 있어야 합니다(컨텍스트 프로퍼티를 사용하지 않는 경우).

모델에 있는 항목의 인덱스가 포함된 특수 인덱스 역할도 델리게이트에서 사용할 수 있습니다. 이 인덱스는 항목이 모델에서 제거된 경우 -1로 설정됩니다. 인덱스 역할에 바인딩하는 경우 로직에서 인덱스가 -1이 될 가능성, 즉 항목이 더 이상 유효하지 않을 가능성을 고려해야 합니다. (일반적으로 항목은 곧 삭제되지만 delayRemove 첨부 속성을 통해 일부 보기에서 델리게이트 삭제를 지연시킬 수 있습니다.)

모델로 정수 또는 배열을 사용할 수 있다는 점을 기억하세요:

Repeater {
    model: 5
    Text {
        required property int modelData
        text: modelData
    }
}
Repeater {
    model: ["one", "two", "three"]
    Text {
        required property string modelData
        text: modelData
    }
}

이러한 모델은 델리게이트의 각 인스턴스에 단일한 익명의 데이터를 제공합니다. 이 데이터에 액세스하는 것이 모델데이터를 사용하는 주된 이유이지만 다른 모델도 모델데이터를 제공합니다.

모델 역할을 통해 제공되는 객체에는 이름이 비어 있는 프로퍼티가 있습니다. 이 익명 프로퍼티는 modelData를 보유합니다. 또한 모델 역할을 통해 제공되는 객체에는 modelData라는 또 다른 속성이 있습니다. 이 프로퍼티는 더 이상 사용되지 않으며 모델데이터도 보유합니다.

모델 역할 외에도 modelData 역할이 제공됩니다. modelData 역할은 modelData 속성 및 모델 역할을 통해 제공된 개체의 익명 속성과 동일한 데이터를 보유합니다.

모델 역할과 모델데이터에 액세스하는 다양한 방법의 차이점은 다음과 같습니다:

  • 명명된 역할이 없는 모델(예: 정수 또는 문자열 배열)은 modelData 역할을 통해 데이터가 제공됩니다. 이 경우 modelData 역할에 반드시 객체가 포함될 필요는 없습니다. 정수 모델의 경우 정수(현재 모델 항목의 인덱스)를 포함할 수 있습니다. 문자열 배열의 경우에는 문자열을 포함합니다. 모델 역할에는 여전히 객체가 포함되지만 명명된 역할에 대한 속성은 없습니다. 하지만 모델에는 여전히 일반적인 모델데이터 및 익명 속성이 포함됩니다.
  • 모델에 명명된 역할이 하나만 있는 경우 modelData 역할에는 명명된 역할과 동일한 데이터가 포함됩니다. 이 역할은 반드시 객체가 아니며 명명된 역할을 일반적인 방식대로 명명된 속성으로 포함하지 않습니다. 모델 역할에는 여전히 명명된 역할이 속성으로 있는 개체가 포함되며, 이 경우 모델데이터 및 익명 속성이 포함됩니다.
  • 여러 역할이 있는 모델의 경우 modelData 역할은 컨텍스트 속성이 아닌 필수 속성으로만 제공됩니다. 이는 이전 버전의 Qt와의 하위 호환성 때문입니다.

모델의 익명 속성을 사용하면 모델 데이터와 반응해야 하는 역할 이름을 모두 외부에서 속성으로 수신하는 델리게이트를 깔끔하게 작성할 수 있습니다. 명명된 역할이 없거나 하나만 있는 모델과 빈 문자열을 역할로 제공할 수 있습니다. 그러면 model[role] 에 간단히 액세스하는 바인딩이 예상한 대로 작동합니다. 이 경우에는 특별한 코드를 추가할 필요가 없습니다.

참고: 델리게이트에 이름이 일치하는 필수 속성이 있는 경우가 아니라면 모델, 인덱스 및 모델데이터 역할은 필수 속성이 포함되어 있는 경우 액세스할 수 없습니다.

QML은 기본 제공되는 QML 유형 세트 중 여러 유형의 데이터 모델을 제공합니다. 또한 Qt C++로 모델을 생성한 다음 QQmlEngine 에서 사용할 수 있도록 하여 QML 컴포넌트에서 사용할 수 있습니다. 이러한 모델을 만드는 방법에 대한 자세한 내용은 Qt Quick 보기와 함께 C++ 모델 사용 및 QML 유형 만들기 문서를 참조하세요.

모델에서 항목의 위치 지정은 Repeater 을 사용하여 수행할 수 있습니다.

목록 모델

ListModel 은 QML에 지정된 유형의 간단한 계층 구조입니다. 사용 가능한 역할은 ListElement 속성에 의해 지정됩니다.

ListModel {
    id: fruitModel

    ListElement {
        name: "Apple"
        cost: 2.45
    }
    ListElement {
        name: "Orange"
        cost: 3.25
    }
    ListElement {
        name: "Banana"
        cost: 1.95
    }
}

위 모델에는 이름과 비용이라는 두 가지 역할이 있습니다. 예를 들어 ListView 델리게이트로 바인딩할 수 있습니다:

ListView {
    anchors.fill: parent
    model: fruitModel
    delegate: Row {
        id: delegate
        required property string name
        required property real cost

        Text { text: "Fruit: " + delegate.name }
        Text { text: "Cost: $" + delegate.cost }
    }
}

ListModel 는 JavaScript를 통해 ListModel 를 직접 조작하는 메서드를 제공합니다. 이 경우 삽입된 첫 번째 항목에 따라 모델을 사용하는 모든 뷰에서 사용할 수 있는 역할이 결정됩니다. 예를 들어 빈 ListModel 을 만들고 JavaScript를 통해 채우는 경우 첫 번째 삽입에서 제공된 역할이 뷰에 표시되는 유일한 역할입니다:

ListModel { id: fruitModel }
    ...
MouseArea {
    anchors.fill: parent
    onClicked: fruitModel.append({"cost": 5.95, "name":"Pizza"})
}

MouseArea 을 클릭하면 fruitModel 에 비용과 이름이라는 두 가지 역할이 표시됩니다. 이후 역할을 추가하더라도 처음 두 역할만 모델을 사용하는 뷰에서 처리됩니다. 모델에서 사용 가능한 역할을 재설정하려면 ListModel::clear()를 호출합니다.

XML 모델

XmlListModel 을 사용하면 XML 데이터 소스에서 모델을 만들 수 있습니다. 역할은 XmlListModelRole 유형을 통해 지정됩니다. 유형을 가져와야 합니다.

import QtQml.XmlListModel

다음 모델에는 제목, 링크 및 pubDate의 세 가지 역할이 있습니다:

XmlListModel {
     id: feedModel
     source: "http://rss.news.yahoo.com/rss/oceania"
     query: "/rss/channel/item"
     XmlListModelRole { name: "title"; elementName: "title" }
     XmlListModelRole { name: "link"; elementName: "link" }
     XmlListModelRole { name: "pubDate"; elementName: "pubDate" }
}

query 속성은 XmlListModel 이 XML 문서의 각 <item> 에 대한 모델 항목을 생성하도록 지정합니다.

RSS 뉴스 데모는 XmlListModel 을 사용하여 RSS 피드를 표시하는 방법을 보여줍니다.

객체 모델

ObjectModel 에는 뷰에서 사용할 시각적 항목이 포함되어 있습니다. ObjectModel 을 뷰에 사용하는 경우 ObjectModel 에 이미 시각적 델리게이트(항목)가 포함되어 있으므로 뷰에 델리게이트가 필요하지 않습니다.

아래 예에서는 ListView 에 세 개의 색상이 지정된 직사각형을 배치합니다.

import QtQuick 2.0
import QtQml.Models 2.1

Rectangle {
    ObjectModel {
        id: itemModel
        Rectangle { height: 30; width: 80; color: "red" }
        Rectangle { height: 30; width: 80; color: "green" }
        Rectangle { height: 30; width: 80; color: "blue" }
    }

    ListView {
        anchors.fill: parent
        model: itemModel
    }
}

모델로서의 정수

정수는 특정 수의 유형을 포함하는 모델로 사용할 수 있습니다. 이 경우 모델에는 데이터 역할이 없습니다.

다음 예제는 5개의 요소로 구성된 ListView 을 만듭니다:

Item {
    width: 200; height: 250

    Component {
        id: itemDelegate

        Text {
            required property int index
            text: "I am item number: " + index
        }
    }

    ListView {
        anchors.fill: parent
        model: 5
        delegate: itemDelegate
    }

}

참고: 정수 모델의 항목 수 제한은 100,000,000개입니다.

모델로서의 객체 인스턴스

객체 인스턴스는 단일 객체 유형으로 모델을 지정하는 데 사용할 수 있습니다. 객체의 속성은 역할로 제공됩니다.

아래 예에서는 항목이 하나 있는 목록을 만들어 myText 텍스트의 색상을 표시합니다. 델리게이트에서 텍스트 유형의 색상 속성과 충돌하지 않도록 정규화된 model.color 속성을 사용한다는 점에 유의하세요.

Rectangle {
    width: 200; height: 250

    Text {
        id: myText
        text: "Hello"
        color: "#dd44ee"
    }

    Component {
        id: myDelegate

        Text {
            required property var model
            text: model.color
        }
    }

    ListView {
        anchors.fill: parent
        anchors.topMargin: 30
        model: myText
        delegate: myDelegate
    }
}

C++ 데이터 모델

모델을 C++로 정의한 다음 QML에서 사용할 수 있습니다. 이 메커니즘은 기존 C++ 데이터 모델이나 기타 복잡한 데이터 세트를 QML에 노출하는 데 유용합니다.

자세한 내용은 Qt Quick 보기에서 C++ 모델 사용하기 문서를 참조하세요.

배열 모델

JavaScript 배열과 다양한 종류의 QML 목록을 모델로 사용할 수 있습니다. 목록의 요소는 위에 설명된 규칙에 따라 model 및 modelData로 사용할 수 있습니다: 정수나 문자열과 같은 단수 데이터는 단수 모델데이터로 사용할 수 있습니다. JavaScript 객체나 QObject와 같은 구조화된 데이터는 구조화된 model 및 modelData로 사용할 수 있습니다.

개별 모델 역할도 필수 속성으로 요청하면 사용할 수 있습니다. 배열에 어떤 객체가 표시될지 미리 알 수 없으므로 델리게이트의 필수 속성은 필요한 유형에 undefined 강제로 채워질 수 있습니다. 하지만 개별 모델 역할은 QML 컨텍스트를 통해 제공되지 않습니다. 개별 모델 역할은 다른 모든 컨텍스트 속성을 가리게 됩니다.

리피터

리피터는 모델의 데이터를 사용하여 포지셔너와 함께 사용할 템플릿에서 항목을 만듭니다. 리피터와 포지셔너를 결합하면 많은 항목을 쉽게 배치할 수 있습니다. Repeater 항목은 포지셔너 안에 배치되며, 둘러싸는 포지셔너가 정렬하는 항목을 생성합니다.

각 리피터는 model 속성을 사용하여 지정된 모델의 각 데이터 요소를 리피터 내의 하위 항목으로 정의된 템플릿 항목과 결합하여 여러 개의 항목을 생성합니다. 총 항목 수는 모델의 데이터 양에 따라 결정됩니다.

다음 예는 그리드 항목과 함께 사각형 항목 집합을 정렬하는 데 사용되는 반복기를 보여줍니다. 반복기 항목은 그리드 항목이 5 x 5 배열로 배치할 24개의 직사각형 시리즈를 만듭니다.

import QtQuick

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 } }
        }
    }
}

반복기가 생성하는 항목의 수는 count 속성에 의해 결정됩니다. 이 속성을 설정하여 생성할 항목의 수를 결정할 수는 없습니다. 대신 위의 예제에서와 같이 정수를 모델로 사용합니다.

자세한 내용은 QML 데이터 모델 문서를 참조하세요.

모델이 문자열 목록인 경우 델리게이트는 문자열을 보유하는 일반적인 읽기 전용 modelData 속성에도 노출됩니다. 예를 들어

Column {
    Repeater {
        model: ["apples", "oranges", "pears"]
        Text {
            required property string modelData
            text: "Data: " + modelData
        }
    }
}

리피터에서 만든 항목의 템플릿으로 델리게이트를 사용할 수도 있습니다. 이는 delegate 속성을 사용하여 지정합니다.

모델 데이터 변경하기

모델 데이터를 변경하려면 model 프로퍼티에 업데이트된 값을 할당하면 됩니다. QML ListModel 은 기본적으로 편집 가능한 반면, C++ 모델은 setData()를 구현해야 편집할 수 있습니다. 정수 및 JavaScript 배열 모델은 읽기 전용입니다.

setData 메서드를 구현하는 QAbstractItemModel 기반 C++ 모델이 EditableModel 이라는 QML 유형으로 등록되어 있다고 가정해 보겠습니다. 그러면 다음과 같이 모델에 데이터를 쓸 수 있습니다:

ListView {
    anchors.fill: parent
    model: EditableModel {}
    delegate: TextEdit {
        required property var model

        width: ListView.view.width
        height: 30
        text: model.edit
        Keys.onReturnPressed: model.edit = text
    }
}

참고: edit 역할은 Qt::EditRole 과 동일합니다. 기본 제공 역할 이름은 roleNames()를 참조하세요. 그러나 실제 모델에서는 일반적으로 사용자 지정 역할을 등록합니다.

참고: 모델 역할이 필수 속성에 바인딩되어 있는 경우 해당 속성에 할당해도 모델이 수정되지 않습니다. 대신 모델에 대한 바인딩이 깨집니다(다른 속성에 할당하면 기존 바인딩이 깨지는 것과 마찬가지로). 필수 속성을 사용하면서 모델 데이터를 변경하려면 모델도 필수 속성으로 만들고 model.propertyName에 할당하세요.

자세한 내용은 Qt Quick 보기로 C++ 모델 사용하기 문서를 참조하세요.

전환 사용

트랜지션을 사용하여 포지셔너에 추가되거나, 포지셔너 내에서 이동되거나, 포지셔너에서 제거되는 항목에 애니메이션을 적용할 수 있습니다.

항목을 추가하기 위한 트랜지션은 포지셔너의 일부로 생성된 항목과 포지셔너의 자식이 되도록 다시 부모를 지정한 항목에 적용됩니다.

항목 제거를 위한 전환은 포지셔너 내에서 삭제된 항목과 포지셔너에서 제거되어 문서에서 새 부모가 된 항목에 적용됩니다.

참고: 항목의 불투명도를 0으로 변경해도 포지셔너에서 항목이 사라지지는 않습니다. 표시 속성을 변경하여 제거했다가 다시 추가할 수 있습니다.

© 2025 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.