×
Namespaces

Variants
Actions

QML Component AccordionList

From Nokia Developer Wiki
Jump to: navigation, search

This code snippet demonstrates how to build accordion list using standard Symbian QML components such as ListView, ListItem, ListItemText.

Article Metadata
Tested with
SDK: Nokia Qt SDK 1.2
Devices(s): all devices based on Symbian Anna, Nokia Belle
Compatibility
Platform(s): Symbian Anna, Nokia Belle
Symbian
Device(s): All
Dependencies: Symbian Qt Quick Components 1.1
Platform Security
Capabilities: None
Article
Keywords: Qml, accordion list
Created: Den123 (21 Mar 2012)
Last edited: kiran10182 (04 Nov 2013)

AccordionList.png

Accordion list should use advanced delegate which allows to show and hide sub items. Following code demonstrates how to define such component. Note: this component does not contain any details of list items realization, it only defines hide/show behaviour.

AccordionListDelegate.qml

import QtQuick 1.1
import com.nokia.symbian 1.1
 
Item {
id: root
property bool isExpanded: false // hide sub items by default
property int itemHeight: platformStyle.graphicSizeLarge // default height for each list item
property int subItemLeftMargin: 20
 
property alias subItem: subItemRepeater.delegate // this property will be used in descendants for defining sub items
 
anchors.left: parent.left
anchors.right: parent.right
height: itemHeight + ( isExpanded ? attributes.count * itemHeight : 0 ) // root item + subitems
y: 0
 
Behavior on height { // animate subitem expansion
NumberAnimation { duration: 100; easing.type: Easing.InOutQuad }
}
 
Item { // sub items area
y: itemHeight
height: root.height - itemHeight
 
anchors.leftMargin: root.subItemLeftMargin
anchors.left: parent.left
anchors.right: parent.right
clip: true
 
Column { // column of sub items
anchors.fill: parent
Repeater { // delegate of this component shows sub items
id: subItemRepeater
model: attributes
}
}
}
}

To define final accordion list delegate necessary to know list model structure. Assume that root items of the list contain fields title, subTitle, while the sub items contain fields title, memo. The source code of list model can be as follows:

    ListModel {
id: accListModel
ListElement {
title: "Item1"; subTitle: "Item1 description"
expanded: false
attributes: [] // no sub items
}
ListElement {
title: "Item2"; subTitle: "Item2 description"
expanded: true
attributes: [
ListElement { title: "SubItem 2-1"; memo: "SubItem 2-1 memo" },
ListElement { title: "SubItem 2-2"; memo: "SubItem 2-2 memo" },
ListElement { title: "SubItem 2-3"; memo: "SubItem 2-3 memo" },
ListElement { title: "SubItem 2-4"; memo: "SubItem 2-4 memo" }
]
}
ListElement {
title: "Item3"; subTitle: "Item3 description"
expanded: false
attributes: [
ListElement { title: "SubItem 3-1"; memo: "SubItem 3-1 memo" },
ListElement { title: "SubItem 3-2"; memo: "SubItem 3-2 memo" }
]
}
}

The final list delegate component can be defined based on list model structure and using AccordionListDelegate:

Component {
id: accListDelegate
AccordionListDelegate {
isExpanded: expanded
 
// root item uses two lines for title and desc
ListItem {
id: listItem
Column {
anchors {
left: listItem.paddingItem.left
top: listItem.paddingItem.top
bottom: listItem.paddingItem.bottom
right: indicatorIcon.left
}
 
ListItemText {
mode: listItem.mode
role: "Title"
text: title
}
ListItemText {
mode: listItem.mode
role: "SubTitle"
text: subTitle
}
}
Image {
id: indicatorIcon
anchors.right: parent.right
anchors.rightMargin: 10
anchors.verticalCenter: parent.verticalCenter
source: privateStyle.imagePath( "qtg_graf_drill_down_indicator", false ) // indicator icon >
rotation: isExpanded ? 90 : 0
}
 
onClicked: isExpanded = !isExpanded // hide/show sub items
}
 
// sub item also uses two lines for title and memo
subItem: ListItem {
id: subItem
Column {
anchors.fill: subItem.paddingItem
ListItemText {
mode: subItem.mode
role: "Title"
text: title
}
ListItemText {
mode: subItem.mode
role: "SubTitle"
text: memo
}
}
}
}
}

To build accordion list, shown in the beginning of this article, simply use following code:

AccordionList.qml

import QtQuick 1.1
import com.nokia.symbian 1.1
 
ListView {
anchors.fill: parent
model: accListModel
delegate: accListDelegate
}

Links

QML Templates

This page was last modified on 4 November 2013, at 18:23.
122 page views in the last 30 days.
×