QML Component AccordionList

Comments

Hamishwillee - Nice -add to the component extras project?

Since it appears fairly consistent with the platform L&F

hamishwillee 03:22, 4 April 2012 (EEST)

Log in or Join to leave comments.

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

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: jaaura (22 Mar 2012)

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 Project