import QtQuick 2.0

Rectangle
{
    id: iRectangle

    property int sectionHeight: 25
    property int listItemHeight: 25

    width: 250
    height: 500

    ListView
    {
        anchors.fill: parent

        model: ListModel
        {
            ListElement { type: "One"; age: 8 }
            ListElement { type: "Two"; age: 8 }
            ListElement { type: "Three"; age: 8 }
            ListElement { type: "Four"; age: 9 }
            ListElement { type: "Five"; age: 9 }
            ListElement { type: "Six"; age: 9 }
        }
        section.property: "age"
        section.delegate: Rectangle
        {
            color: "red"
            width: parent.width / 2
            height: iRectangle.sectionHeight
            Text
            {
                font.pixelSize: 20
                text: "Age:" + section
            }

        }
        delegate: Rectangle
        {
            color: "yellow"
            width: parent.width
            height: iRectangle.listItemHeight
            Text
            {
                font.pixelSize: 20
                text: type
            }
        }
    }

    Timer
    {
        interval:1000
        running: true
        repeat: true
        onTriggered:
        {
            // Toggle the height of the section delegate
            iRectangle.sectionHeight = iRectangle.sectionHeight === 25 ? 50 : 25;

            // Toggle the height of the list item delegate
            // Uncomment the line below to see that list items when resized, updates the
            // ListView as expected.

            //iRectangle.listItemHeight = iRectangle.listItemHeight === 25 ? 50 : 25;
        }
    }
}