QML Listview subitems
-
Hello all,
I am trying to make a folder view using listview. I am filling the folders & sub folders from C++ and exposing it to QML using a QVariantMap.
I am able to add the nested subitems in a listview by using the following code.
I want to add the subitems dynamically from C++.@
import QtQuick 1.1
Rectangle {
id: root
width: 400
height: 600ListView {
anchors.fill: parent
model: nestedModel
delegate: categoryDelegate
}ListModel {
id: nestedModelListElement {
categoryName: ""
collapsed: true
subItems: [
ListElement { itemName: "" }
]
}
}Component {
id: categoryDelegate
Column {
width: 200Rectangle {
id: categoryItem
border.color: "black"
border.width: 5
color: "blue"
height: 50
width: 200Text {
id:drText
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.verticalCenterMouseArea {
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: 2Text { anchors.verticalCenter: parent.verticalCenter x: 30 font.pixelSize: 18 text: itemName } } } }
}
function slot_fill_dirs(anArray1) {
for(var i = 0; i < anArray1.length; i++)
{
//nestedModel.append ({"categoryName" : anArray[i], collapsed: true, "subItems": [{itemName : anArray1[0]}, {itemName : anArray1[1]}, { itemName : anArray1[2]}, {itemName : anArray1[3]}], collapsed:true});
//nestedModel.append ({"categoryName" : anArray[i], collapsed: true, "subItems": [{itemName : anArray1[i]}], collapsed:true});
}
}function readValues(anObject) { for (var prop in anObject) { console.log("Object item:", prop, "=", anObject[prop]) nestedModel.append ({"categoryName" : prop, collapsed: true, "subItems": [{itemName : anObject[prop][0]}, {itemName : anObject[prop][2]}, {itemName : anObject[prop][4]}], collapsed:true}); } }
}
@
Kindly help.
Thanks ,
Narayanan K