import QtQuick 2.6
import QtQuick.Window 2.2

import QtQuick.Controls 1.4


Window {
    visible: true

    ListModel {
        id: data

        ListElement { elementHeight: 40 ; groupName: "15"}
        ListElement { elementHeight: 40 ; groupName: "11"}
        ListElement { elementHeight: 40 ; groupName: "12"}
        ListElement { elementHeight: 40 ; groupName: "23"}
        ListElement { elementHeight: 40 ; groupName: "5"}
        ListElement { elementHeight: 40 ; groupName: "19"}
        ListElement { elementHeight: 40 ; groupName: "2"}
        ListElement { elementHeight: 40 ; groupName: "6"}
        ListElement { elementHeight: 40 ; groupName: "12"}
        ListElement { elementHeight: 40 ; groupName: "20"}
        ListElement { elementHeight: 40 ; groupName: "13"}
        ListElement { elementHeight: 40 ; groupName: "13"}
        ListElement { elementHeight: 40 ; groupName: "11"}
        ListElement { elementHeight: 40 ; groupName: "8"}
        ListElement { elementHeight: 40 ; groupName: "15"}
        ListElement { elementHeight: 40 ; groupName: "7"}
        ListElement { elementHeight: 40 ; groupName: "18"}
        ListElement { elementHeight: 40 ; groupName: "2"}
        ListElement { elementHeight: 40 ; groupName: "10"}
        ListElement { elementHeight: 40 ; groupName: "10"}
        ListElement { elementHeight: 40 ; groupName: "21"}
        ListElement { elementHeight: 40 ; groupName: "4"}
        ListElement { elementHeight: 40 ; groupName: "14"}
        ListElement { elementHeight: 40 ; groupName: "5"}
        ListElement { elementHeight: 40 ; groupName: "9"}
        ListElement { elementHeight: 40 ; groupName: "1"}
        ListElement { elementHeight: 40 ; groupName: "3"}
        ListElement { elementHeight: 40 ; groupName: "5"}
        ListElement { elementHeight: 40 ; groupName: "10"}
        ListElement { elementHeight: 40 ; groupName: "13"}
        ListElement { elementHeight: 40 ; groupName: "23"}
        ListElement { elementHeight: 40 ; groupName: "8"}
        ListElement { elementHeight: 40 ; groupName: "14"}
        ListElement { elementHeight: 40 ; groupName: "21"}
        ListElement { elementHeight: 40 ; groupName: "15"}
        ListElement { elementHeight: 40 ; groupName: "23"}
        ListElement { elementHeight: 40 ; groupName: "21"}
        ListElement { elementHeight: 40 ; groupName: "21"}
        ListElement { elementHeight: 40 ; groupName: "18"}
        ListElement { elementHeight: 40 ; groupName: "12"}
        ListElement { elementHeight: 40 ; groupName: "9"}
        ListElement { elementHeight: 40 ; groupName: "11"}
        ListElement { elementHeight: 40 ; groupName: "9"}
        ListElement { elementHeight: 40 ; groupName: "23"}
        ListElement { elementHeight: 40 ; groupName: "3"}
        ListElement { elementHeight: 40 ; groupName: "2"}
        ListElement { elementHeight: 40 ; groupName: "8"}
        ListElement { elementHeight: 40 ; groupName: "12"}
        ListElement { elementHeight: 40 ; groupName: "13"}
        ListElement { elementHeight: 40 ; groupName: "22"}
        ListElement { elementHeight: 40 ; groupName: "19"}
        ListElement { elementHeight: 40 ; groupName: "0"}
        ListElement { elementHeight: 40 ; groupName: "17"}
        ListElement { elementHeight: 40 ; groupName: "4"}
        ListElement { elementHeight: 40 ; groupName: "16"}
        ListElement { elementHeight: 40 ; groupName: "3"}
        ListElement { elementHeight: 40 ; groupName: "17"}
        ListElement { elementHeight: 40 ; groupName: "18"}
        ListElement { elementHeight: 40 ; groupName: "2"}
        ListElement { elementHeight: 40 ; groupName: "22"}
        ListElement { elementHeight: 40 ; groupName: "18"}
        ListElement { elementHeight: 40 ; groupName: "13"}
        ListElement { elementHeight: 40 ; groupName: "22"}
        ListElement { elementHeight: 40 ; groupName: "12"}
        ListElement { elementHeight: 40 ; groupName: "17"}
        ListElement { elementHeight: 40 ; groupName: "7"}
        ListElement { elementHeight: 40 ; groupName: "22"}
        ListElement { elementHeight: 40 ; groupName: "19"}
        ListElement { elementHeight: 40 ; groupName: "4"}
        ListElement { elementHeight: 40 ; groupName: "2"}
        ListElement { elementHeight: 40 ; groupName: "2"}
        ListElement { elementHeight: 40 ; groupName: "2"}
        ListElement { elementHeight: 40 ; groupName: "10"}
        ListElement { elementHeight: 40 ; groupName: "10"}
        ListElement { elementHeight: 40 ; groupName: "10"}
        ListElement { elementHeight: 40 ; groupName: "19"}
        ListElement { elementHeight: 40 ; groupName: "2"}
        ListElement { elementHeight: 40 ; groupName: "6"}
        ListElement { elementHeight: 40 ; groupName: "3"}
        ListElement { elementHeight: 40 ; groupName: "21"}
        ListElement { elementHeight: 40 ; groupName: "4"}
        ListElement { elementHeight: 40 ; groupName: "15"}
        ListElement { elementHeight: 40 ; groupName: "3"}
        ListElement { elementHeight: 40 ; groupName: "10"}
        ListElement { elementHeight: 40 ; groupName: "5"}
        ListElement { elementHeight: 40 ; groupName: "4"}
        ListElement { elementHeight: 40 ; groupName: "11"}
        ListElement { elementHeight: 40 ; groupName: "1"}
        ListElement { elementHeight: 40 ; groupName: "1"}
        ListElement { elementHeight: 40 ; groupName: "0"}
        ListElement { elementHeight: 40 ; groupName: "14"}
        ListElement { elementHeight: 40 ; groupName: "1"}
        ListElement { elementHeight: 40 ; groupName: "11"}
        ListElement { elementHeight: 40 ; groupName: "0"}
        ListElement { elementHeight: 40 ; groupName: "17"}
        ListElement { elementHeight: 40 ; groupName: "22"}
        ListElement { elementHeight: 40 ; groupName: "21"}
        ListElement { elementHeight: 40 ; groupName: "9"}
        ListElement { elementHeight: 40 ; groupName: "16"}
        ListElement { elementHeight: 40 ; groupName: "1"}
        ListElement { elementHeight: 40 ; groupName: "16"}
        ListElement { elementHeight: 40 ; groupName: "4"}
        ListElement { elementHeight: 40 ; groupName: "14"}
        ListElement { elementHeight: 40 ; groupName: "7"}
        ListElement { elementHeight: 40 ; groupName: "11"}
        ListElement { elementHeight: 40 ; groupName: "5"}
        ListElement { elementHeight: 40 ; groupName: "19"}
        ListElement { elementHeight: 40 ; groupName: "19"}
        ListElement { elementHeight: 40 ; groupName: "9"}
        ListElement { elementHeight: 40 ; groupName: "15"}
        ListElement { elementHeight: 40 ; groupName: "23"}
        ListElement { elementHeight: 40 ; groupName: "17"}
        ListElement { elementHeight: 40 ; groupName: "24"}
        ListElement { elementHeight: 40 ; groupName: "9"}
        ListElement { elementHeight: 40 ; groupName: "6"}
        ListElement { elementHeight: 40 ; groupName: "2"}
        ListElement { elementHeight: 40 ; groupName: "10"}
        ListElement { elementHeight: 40 ; groupName: "6"}
        ListElement { elementHeight: 40 ; groupName: "1"}
        ListElement { elementHeight: 40 ; groupName: "18"}
        ListElement { elementHeight: 40 ; groupName: "17"}
        ListElement { elementHeight: 40 ; groupName: "8"}
        ListElement { elementHeight: 40 ; groupName: "2"}
        ListElement { elementHeight: 40 ; groupName: "16"}
        ListElement { elementHeight: 40 ; groupName: "1"}
        ListElement { elementHeight: 40 ; groupName: "15"}
        ListElement { elementHeight: 40 ; groupName: "3"}
        ListElement { elementHeight: 40 ; groupName: "19"}
        ListElement { elementHeight: 40 ; groupName: "7"}
        ListElement { elementHeight: 40 ; groupName: "24"}
        ListElement { elementHeight: 40 ; groupName: "3"}
        ListElement { elementHeight: 40 ; groupName: "11"}
        ListElement { elementHeight: 40 ; groupName: "22"}
        ListElement { elementHeight: 40 ; groupName: "15"}
        ListElement { elementHeight: 40 ; groupName: "1"}
        ListElement { elementHeight: 40 ; groupName: "24"}
        ListElement { elementHeight: 40 ; groupName: "0"}
        ListElement { elementHeight: 40 ; groupName: "22"}
        ListElement { elementHeight: 40 ; groupName: "16"}
        ListElement { elementHeight: 40 ; groupName: "1"}
        ListElement { elementHeight: 40 ; groupName: "8"}
        ListElement { elementHeight: 40 ; groupName: "14"}
        ListElement { elementHeight: 40 ; groupName: "22"}
        ListElement { elementHeight: 40 ; groupName: "8"}
        ListElement { elementHeight: 40 ; groupName: "4"}
        ListElement { elementHeight: 40 ; groupName: "11"}
        ListElement { elementHeight: 40 ; groupName: "20"}
        ListElement { elementHeight: 40 ; groupName: "11"}
        ListElement { elementHeight: 40 ; groupName: "22"}
        ListElement { elementHeight: 40 ; groupName: "5"}
        ListElement { elementHeight: 40 ; groupName: "11"}
        ListElement { elementHeight: 40 ; groupName: "4"}
        ListElement { elementHeight: 40 ; groupName: "0"}
        ListElement { elementHeight: 40 ; groupName: "20"}
        ListElement { elementHeight: 40 ; groupName: "14"}
        ListElement { elementHeight: 40 ; groupName: "24"}
        ListElement { elementHeight: 40 ; groupName: "3"}
        ListElement { elementHeight: 40 ; groupName: "5"}
        ListElement { elementHeight: 40 ; groupName: "7"}
        ListElement { elementHeight: 40 ; groupName: "10"}
        ListElement { elementHeight: 40 ; groupName: "11"}
        ListElement { elementHeight: 40 ; groupName: "14"}
        ListElement { elementHeight: 40 ; groupName: "20"}
        ListElement { elementHeight: 40 ; groupName: "20"}
        ListElement { elementHeight: 40 ; groupName: "23"}
        ListElement { elementHeight: 40 ; groupName: "2"}
        ListElement { elementHeight: 40 ; groupName: "15"}
        ListElement { elementHeight: 40 ; groupName: "2"}
        ListElement { elementHeight: 40 ; groupName: "15"}
        ListElement { elementHeight: 40 ; groupName: "14"}
        ListElement { elementHeight: 40 ; groupName: "9"}
        ListElement { elementHeight: 40 ; groupName: "3"}
        ListElement { elementHeight: 40 ; groupName: "21"}
        ListElement { elementHeight: 40 ; groupName: "6"}
        ListElement { elementHeight: 40 ; groupName: "7"}
        ListElement { elementHeight: 40 ; groupName: "15"}
        ListElement { elementHeight: 40 ; groupName: "4"}
        ListElement { elementHeight: 40 ; groupName: "15"}
        ListElement { elementHeight: 40 ; groupName: "1"}
        ListElement { elementHeight: 40 ; groupName: "11"}
        ListElement { elementHeight: 40 ; groupName: "17"}
        ListElement { elementHeight: 40 ; groupName: "16"}
        ListElement { elementHeight: 40 ; groupName: "7"}
        ListElement { elementHeight: 40 ; groupName: "2"}
        ListElement { elementHeight: 40 ; groupName: "8"}
        ListElement { elementHeight: 40 ; groupName: "4"}
        ListElement { elementHeight: 40 ; groupName: "16"}
        ListElement { elementHeight: 40 ; groupName: "6"}
        ListElement { elementHeight: 40 ; groupName: "10"}
        ListElement { elementHeight: 40 ; groupName: "2"}
        ListElement { elementHeight: 40 ; groupName: "1"}
        ListElement { elementHeight: 40 ; groupName: "10"}
        ListElement { elementHeight: 40 ; groupName: "9"}
        ListElement { elementHeight: 40 ; groupName: "2"}
        ListElement { elementHeight: 40 ; groupName: "7"}
        ListElement { elementHeight: 40 ; groupName: "1"}
        ListElement { elementHeight: 40 ; groupName: "3"}
        ListElement { elementHeight: 40 ; groupName: "13"}
        ListElement { elementHeight: 40 ; groupName: "14"}
        ListElement { elementHeight: 40 ; groupName: "7"}
        ListElement { elementHeight: 40 ; groupName: "10"}
        ListElement { elementHeight: 40 ; groupName: "14"}
        ListElement { elementHeight: 40 ; groupName: "23"}
        ListElement { elementHeight: 40 ; groupName: "5"}
        ListElement { elementHeight: 40 ; groupName: "4"}
        ListElement { elementHeight: 40 ; groupName: "13"}
        ListElement { elementHeight: 40 ; groupName: "12"}
        ListElement { elementHeight: 40 ; groupName: "7"}
        ListElement { elementHeight: 40 ; groupName: "13"}
        ListElement { elementHeight: 40 ; groupName: "8"}
        ListElement { elementHeight: 40 ; groupName: "7"}
        ListElement { elementHeight: 40 ; groupName: "11"}
        ListElement { elementHeight: 40 ; groupName: "4"}
        ListElement { elementHeight: 40 ; groupName: "21"}
        ListElement { elementHeight: 40 ; groupName: "3"}
        ListElement { elementHeight: 40 ; groupName: "8"}
        ListElement { elementHeight: 40 ; groupName: "24"}
        ListElement { elementHeight: 40 ; groupName: "8"}
        ListElement { elementHeight: 40 ; groupName: "22"}
        ListElement { elementHeight: 40 ; groupName: "15"}
        ListElement { elementHeight: 40 ; groupName: "10"}
        ListElement { elementHeight: 40 ; groupName: "16"}
        ListElement { elementHeight: 40 ; groupName: "9"}
        ListElement { elementHeight: 40 ; groupName: "22"}
        ListElement { elementHeight: 40 ; groupName: "8"}
        ListElement { elementHeight: 40 ; groupName: "6"}
        ListElement { elementHeight: 40 ; groupName: "24"}
        ListElement { elementHeight: 40 ; groupName: "1"}
        ListElement { elementHeight: 40 ; groupName: "22"}
        ListElement { elementHeight: 40 ; groupName: "21"}
        ListElement { elementHeight: 40 ; groupName: "6"}
        ListElement { elementHeight: 40 ; groupName: "17"}
        ListElement { elementHeight: 40 ; groupName: "15"}
        ListElement { elementHeight: 40 ; groupName: "14"}
        ListElement { elementHeight: 40 ; groupName: "23"}
        ListElement { elementHeight: 40 ; groupName: "24"}
        ListElement { elementHeight: 40 ; groupName: "15"}
        ListElement { elementHeight: 40 ; groupName: "23"}
        ListElement { elementHeight: 40 ; groupName: "21"}
        ListElement { elementHeight: 40 ; groupName: "15"}
        ListElement { elementHeight: 40 ; groupName: "7"}
        ListElement { elementHeight: 40 ; groupName: "1"}
        ListElement { elementHeight: 40 ; groupName: "2"}
        ListElement { elementHeight: 40 ; groupName: "21"}
        ListElement { elementHeight: 40 ; groupName: "17"}
        ListElement { elementHeight: 40 ; groupName: "2"}
        ListElement { elementHeight: 40 ; groupName: "14"}
        ListElement { elementHeight: 40 ; groupName: "15"}
        ListElement { elementHeight: 40 ; groupName: "4"}
        ListElement { elementHeight: 40 ; groupName: "4"}

    }

    ScrollView {
        id: scoller1
        anchors.fill: parent

        width: 300

        ListView {
            model: data
            delegate: Rectangle {
                color: index % 2 ? "red" : "blue"

                anchors {
                    left: parent.left
                    right: parent.right
                }
                height: elementHeight

                Text {
                    text: "#" + index
                    verticalAlignment: Text.AlignVCenter
                    horizontalAlignment: Text.AlignHCenter
                    anchors {
                        fill: parent
                    }
                }
            }

            section.property: "groupName"
            section.delegate: Rectangle {
                color: "lime"
                anchors.left: parent.left
                anchors.right: parent.right
                height: 40
                Text {
                    text: section
                    anchors.fill: parent
                    verticalAlignment: Text.AlignVCenter
                    horizontalAlignment: Text.AlignHCenter
                }

            }
        }
    }

}