Skip to content

Instantly share code, notes, and snippets.

@0xlitf
Forked from elpuri/gist:3753756
Created September 16, 2017 13:18
Show Gist options
  • Save 0xlitf/56b2c99fb678eb91f4b6ecc3e3699552 to your computer and use it in GitHub Desktop.
Save 0xlitf/56b2c99fb678eb91f4b6ecc3e3699552 to your computer and use it in GitHub Desktop.
A collapsible nested list example in QML
import QtQuick 1.1
Item {
width: 200
height: 300
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
}
Rectangle {
color: "red"
width: 30
height: 30
anchors.right: parent.right
anchors.rightMargin: 15
anchors.verticalCenter: parent.verticalCenter
MouseArea {
anchors.fill: parent
// Toggle the 'collapsed' property
onClicked: 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
}
}
}
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment