ListView {
width: 250
height: root.height
anchors.right: parent.right
model: menuModel
delegate: categoryDelegate
boundsBehavior: Flickable.StopAtBounds
}
ListModel {
id: menuModel
ListElement {
categoryName: "Acceuil"
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: "1" },
ListElement { itemName: "2" },
ListElement { itemName: "3" },
ListElement { itemName: "4" }
]
}
ListElement {
categoryName: "Compte"
collapsed: true
subItems: [
ListElement { itemName: "1" },
ListElement { itemName: "2" }
]
}
ListElement {
categoryName: "Outils"
collapsed: true
subItems: [
ListElement { itemName: "1" },
ListElement { itemName: "2" },
ListElement { itemName: "3" }
]
}
ListElement {
categoryName: "Statistiques"
collapsed: true
subItems: [
ListElement { itemName: "Naissances" },
ListElement { itemName: "Deces" }
]
}
ListElement {
categoryName: "Parametres"
collapsed: true
subItems: [
ListElement { itemName: "1" },
ListElement { itemName: "2" }
]
}
}
Component {
id: categoryDelegate
Column {
Rectangle {
id: categoryItem
color: base
border.color: Qt.lighter(color, 1.5)
height: 50
width: 250
Text {
anchors.centerIn: parent
color: "#f2f2f2"
font.pixelSize: 25
text: categoryName
font.family: "MS Reference Sans Serif"
}
Image {
id: fleche
source: "img/fleche.png"
sourceSize.width: 25
sourceSize.height: 25
anchors.left: parent.left
anchors.leftMargin: 6
anchors.verticalCenter: parent.verticalCenter
}
MouseArea {
anchors.fill: parent
hoverEnabled: true
// Toggle the 'collapsed' property
onClicked: {
console.log(menuModel.get(1).categoryName)
fleche.rotation+=180
menuModel.setProperty(index, "collapsed", !collapsed)
}
onEntered: categoryItem.color = "#0d0d0d"
onExited: categoryItem.color = base
}
}
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
Repeater {
id: subItemRepeater
delegate: Rectangle {
id: rectangle1
height: 40
width: 250
color: "#8c8c8c"
border.color: Qt.lighter(color)
//border.width: 2
Text {
id: subItemText
//anchors.centerIn: parent
font.pixelSize: 16
text: itemName
anchors.left: parent.left
anchors.leftMargin: 20
anchors.verticalCenter: parent.verticalCenter
}
MouseArea {
anchors.fill: parent
hoverEnabled: true
// Toggle the 'collapsed' property
onClicked:{
console.log(menuModel.get(0).categoryName)
stack.push(view2)}
onEntered: {
rectangle1.color= "#999999"
subItemText.color = "white"
}
onExited: {
rectangle1.color= "#8c8c8c"
subItemText.color = "black"
}
}
}
}
}
}
StackView{
Re: interaction StackView / ListView
Reply With Quote
Bookmarks