Qt는 데이터를 표시하는 Model, View, Delegate 개념을 가지고있다.
1

– Model : 컨테이너 데이터와 Structure가 포함되어 있다. QML의 여러 유형의 모델이 있다.
– View : 데이터를 표시하는 컨테이너다. 보기 목록, Grid 화면에서 데이터를 표시 할 수 있다.
– Delegate : 데이터를 Model과 View 간의 Editing, Rendering을 할 수 있도록 해준다. 모델에서 각 데이터를 받아 캡슐화를 한다. 이 데이터는 Delegate를 통해 액서스 할 수 있다.

그럼 ListModel은 QML에서 지정된 유형의 계층 구조이다.
ListModel 안에 ListElement 속성을 정의 할 수 있다.

[code language=”cpp”] ListModel {
id: fruitModel

ListElement {
name: "Apple"
cost: 2.45
}
ListElement {
name: "Orange"
cost: 3.45
}
ListElement {
name: "Banana"
cost: 1.45
}
}[/code] ListModel 안에 ListElement 속성을 주었다. name과 cost이다.

[code language=”cpp”] ListView {
anchors.fill: parent
model: fruitModel
delegate: fruitDelegate
}[/code]

ListView 에 delegate를 연결하여, ListModel의 fruitModel 데이터를 ListView의 model로 정의한다.

아래의 소스는 ListModel의 소스이다.

[code language=”cpp”] ListModel {
id: fruitModel

ListElement {
name: "Apple"
cost: 2.45
attributes: [
ListElement { description: "Core"}, ListElement { description: "Deciduous"}
] }
ListElement {
name: "Orange"
cost: 3.45
attributes: [
ListElement { description: "Citrus"}
] }
ListElement {
name: "Banana"
cost: 1.45
attributes: [
ListElement { description: "Tropical"}, ListElement { description: "Seedless"}
] }
}

[/code]

ListView에 정의된 delegate를 Component 연결한다.

[code language=”cpp”] Component {
id: fruitDelegate
Item {
x: 10
y: 10
width: 200; height: 50
Text {id: nameField; text: name}
Text {text: ‘$’ + cost; color: "red"; anchors.left: nameField.right }
Row {
anchors.top: nameField.bottom
spacing: 10
Text {text: "Attributes :"}

Repeater {
model: attributes
Text {text: description; color: "darkblue" }
}
}
MouseArea {
anchors.fill: parent
onClicked: {
console.log("===> fruitModel index : " + index )
// fruitModel.setProperty(index, "cost", cost*2) // setProperty
// fruitModel.append({"cost": 5.95, "name":"Pizza" }) // append
// fruitModel.insert(3, {"cost": 2.25, "name":"Cherry"}) // insert
// fruitModel.move(0, fruitModel.count-3, 3) // move
fruitModel.remove(0, 2) // remove
// fruitModel.set(3, {"cost": 1.11, "name":"melon"}) // set
}
}
}
}

ListView {
anchors.fill: parent
model: fruitModel
delegate: fruitDelegate
}
}

[/code]
[fusion_old_table] Methods, Description
append(), List item 아래에 추가.
clear(), List item 모두 삭제.
get(), List item Index 항목 반환.
insert(), Position 값에 item 추가.
move(), Position 위치를 변경.
remove(), Index 삭제.
set(), Index 값 변경.
setProperty(), Index 항목에 있는 속성값을 변경.
sync(), 변경된 사항 스크립트에 기록.[/table]

▷ Repeater
유사한 항목 유형을 다수 생성하는 데 사용
모델의 항목으로 각 데이터를 인스턴스화 시킬 수 있음
행이나, 열 형태로 표현

[code language=”cpp”]

Row {
x: listViewTest.width + 100
Repeater {
model: 4
Rectangle {
width: 50; height: 40
border.width: 2
color: "yellow"
}
}

[/code] [실행화면]
2

[code language=”cpp”] Row {
x: 20
y: listViewTest.height + 30
Rectangle { width: 10; height: 20; color: "red" }
Repeater {
model: 10
Rectangle { width: 20; height: 20; radius: 10; color: "green" }
}
Rectangle { width: 10; height: 20; color: "blue" }
}[/code] Model은 데이터 모델이다.

[실행화면]
3

• A number that indicates the number of delegates to be created by the repeater
• A model (e.g. a ListModel item, or a QAbstractItemModel subclass)
• A string list
• An object list

Menus     |   ListView 》