119 lines
3.4 KiB
QML
119 lines
3.4 KiB
QML
|
|
import QtQuick 2.0
|
|
|
|
Item {
|
|
// width: 200
|
|
// height: 700
|
|
|
|
ListView {
|
|
anchors.fill: parent
|
|
model: nestedModel
|
|
delegate: categoryDelegate
|
|
}
|
|
|
|
ListModel {
|
|
id: nestedModel
|
|
ListElement {
|
|
categoryName: "Veggies"
|
|
collapsed: true
|
|
|
|
// A ListElement can't contain child elements, but it can contain
|
|
// a list of elements. A list of ListElements can be used as a model
|
|
// just like any other model type.
|
|
subItems: [
|
|
ListElement { itemName: "Tomato" },
|
|
ListElement { itemName: "Cucumber" },
|
|
ListElement { itemName: "Onion" },
|
|
ListElement { itemName: "Brains" }
|
|
]
|
|
}
|
|
|
|
ListElement {
|
|
categoryName: "Fruits"
|
|
collapsed: true
|
|
subItems: [
|
|
ListElement { itemName: "Orange" },
|
|
ListElement { itemName: "Apple" },
|
|
ListElement { itemName: "Pear" },
|
|
ListElement { itemName: "Lemon" }
|
|
]
|
|
}
|
|
|
|
ListElement {
|
|
categoryName: "Cars"
|
|
collapsed: true
|
|
subItems: [
|
|
ListElement { itemName: "Nissan" },
|
|
ListElement { itemName: "Toyota" },
|
|
ListElement { itemName: "Chevy" },
|
|
ListElement { itemName: "Audi" }
|
|
]
|
|
}
|
|
}
|
|
|
|
Component {
|
|
id: categoryDelegate
|
|
Column {
|
|
width: 200
|
|
|
|
Rectangle {
|
|
id: categoryItem
|
|
border.color: "black"
|
|
border.width: 5
|
|
color: "white"
|
|
height: 50
|
|
width: 200
|
|
|
|
Text {
|
|
anchors.verticalCenter: parent.verticalCenter
|
|
x: 15
|
|
font.pixelSize: 24
|
|
text: categoryName
|
|
|
|
Component.onCompleted: {
|
|
nestedModel.setProperty(index, "collapsed", !collapsed)
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
Loader {
|
|
id: subItemLoader
|
|
|
|
// This is a workaround for a bug/feature in the Loader element. If sourceComponent is set to null
|
|
// the Loader element retains the same height it had when sourceComponent was set. Setting visible
|
|
// to false makes the parent Column treat it as if it's height was 0.
|
|
visible: !collapsed
|
|
property variant subItemModel : subItems
|
|
sourceComponent: collapsed ? null : subItemColumnDelegate
|
|
onStatusChanged: if (status == Loader.Ready) item.model = subItemModel
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
Component {
|
|
id: subItemColumnDelegate
|
|
Column {
|
|
property alias model : subItemRepeater.model
|
|
width: 200
|
|
Repeater {
|
|
id: subItemRepeater
|
|
delegate: Rectangle {
|
|
color: "#cccccc"
|
|
height: 40
|
|
width: 200
|
|
border.color: "black"
|
|
border.width: 2
|
|
|
|
Text {
|
|
anchors.verticalCenter: parent.verticalCenter
|
|
x: 30
|
|
font.pixelSize: 18
|
|
text: itemName
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|