QML 동적 뷰 정렬 튜토리얼 1 - 간단한 ListView와 델리게이트
애플리케이션을 시작하기 위해 ListView, 뷰에 데이터를 제공하는 모델, 그리고 뷰 내 항목을 구성하기 위한 템플릿을 제공하는 델리게이트를 정의합니다.
ListView 과 델리게이트의 코드는 다음과 같습니다:
import QtQuick
Rectangle {
id: root
width: 300
height: 400
Component {
id: dragDelegate
Rectangle {
id: content
required property string name
required property string type
required property string size
required property int age
width: view.width
height: column.implicitHeight + 4
border.width: 1
border.color: "lightsteelblue"
radius: 2
Column {
id: column
anchors {
fill: parent
margins: 2
}
Text { text: qsTr('Name: ') + content.name }
Text { text: qsTr('Type: ') + content.type }
Text { text: qsTr('Age: ') + content.age }
Text { text: qsTr('Size: ') + content.size }
}
}
}
ListView {
id: view
anchors {
fill: parent
margins: 2
}
model: PetsModel {}
delegate: dragDelegate
spacing: 4
cacheBuffer: 50
}
}모델은 다음과 같은 별도의 QML 파일에 정의됩니다:
import QtQuick
ListModel {
ListElement {
name: qsTr("Polly")
type: qsTr("Parrot")
age: 12
size: qsTr("Small")
}
ListElement {
name: qsTr("Penny")
type: qsTr("Turtle")
age: 4
size: qsTr("Small")
}
}단계별 설명
애플리케이션의 루트 Rectangle 내에 정의된 첫 번째 항목은 델리게이트 Component입니다. 이는 ListView 의 각 항목을 구성하는 데 사용되는 템플릿입니다.
델리게이트에서 참조되는 name, age, type 및 size 변수는 모델 데이터에서 가져옵니다. 변수 이름은 모델에 정의된 역할에 해당합니다.
Component {
id: dragDelegate
Rectangle {
id: content
required property string name
required property string type
required property string size
required property int age
width: view.width
height: column.implicitHeight + 4
border.width: 1
border.color: "lightsteelblue"
radius: 2
Column {
id: column
anchors {
fill: parent
margins: 2
}
Text { text: qsTr('Name: ') + content.name }
Text { text: qsTr('Type: ') + content.type }
Text { text: qsTr('Age: ') + content.age }
Text { text: qsTr('Size: ') + content.size }
}
}
}애플리케이션의 두 번째 부분은 모델과 델리게이트를 바인딩하는 ListView 자체입니다.
ListView {
id: view
anchors {
fill: parent
margins: 2
}
model: PetsModel {}
delegate: dragDelegate
spacing: 4
cacheBuffer: 50
}© 2026 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.
