前言

有時，鏈表的數據需要分組。例如使用首字母來劃分聯繫人，或者分類音樂。使用鏈表視圖可以把平面列表按類別劃分。

如何分組？

為了使用分組，section.property與section.criteria必須設置。section.property定義了哪些屬性用於內容的劃分。在這裡，最重要的是知道每一組的元素必須連續，否則相同的屬性名可能出現在幾個不同的地方。

section.criteria能夠被設置為ViewSection.FullString或者
ViewSection.FirstCharacter。默認下使用第一個值，能夠被用於模型中有清晰的分組，例如音樂專輯。第二個是使用一個屬性的首字母來分組，這說明任何屬性都可以被使用。通常的例子是用於聯繫人名單中的姓。

當組被定義好後，每個子項能夠使用綁定屬性ListView.section，ListView.previousSection與ListView.nextSection來訪問。使用這些屬性，可以檢測組的第一個與最後一個子項。

使用ListView的section.delegate屬性可以給組指定代理組件。它能夠創建段標題，並且可以在任意子項之前插入這個段代理。使用綁定屬性section可以訪問當前段的名稱。

下面這個例子使用國際分類展示了分組的一些概念。國籍作為section.property，組代理組件（section.delegate）使用每個國家作為標題。在每個組中，spacemen模型中的名字使用spaceManDelegate組件來代理顯示。

import QtQuick 2.3
import QtQuick.Window 2.2

Window {
    id: root
    visible: true
    width: 480
    height: 300
    color: "white"

    ListView {
        anchors.fill: parent
        anchors.margins: 20
        clip: true
        model: spaceMen
        delegate: spaceManDelegate
        section.property: "nation"
        section.delegate: sectionDelegate
    }

    Component {
        id: spaceManDelegate
        Item {
            width: 260
            height: 20
            Text {
                anchors.left: parent.left
                anchors.verticalCenter: parent.verticalCenter
                anchors.leftMargin: 10
                font.pixelSize: 12
                text: name
            }
        }
    }

    Component {
        id: sectionDelegate
        Rectangle {
            width: 260
            height: 20
            color: "lightBlue"
            Text {
                anchors.left: parent.left
                anchors.verticalCenter: parent.verticalCenter
                anchors.leftMargin: 10
                font.pixelSize: 12
                font.bold: true
                text: section
            }
        }
    }

    ListModel {
        id: spaceMen
        ListElement { name: "小趙"; nation: "中國" }
        ListElement { name: "小錢"; nation: "中國" }
        ListElement { name: "小孫"; nation: "中國" }
        ListElement { name: "小李"; nation: "中國" }
        ListElement { name: "Amy"; nation: "美國" }
        ListElement { name: "David"; nation: "美國" }
        ListElement { name: "Kim"; nation: "美國" }
        ListElement { name: "Helen"; nation: "俄羅斯" }
        ListElement { name: "Kate"; nation: "俄羅斯" }
    }
}

運行效果如下：

如果同一組下的內容不聯繫，如下面的代碼所示：

ListModel {
        id: spaceMen
        ListElement { name: "小趙"; nation: "中國" }
        ListElement { name: "小錢"; nation: "中國" }
        ListElement { name: "Amy"; nation: "美國" }
        ListElement { name: "Kim"; nation: "美國" }
        ListElement { name: "Helen"; nation: "俄羅斯" }
        ListElement { name: "Kate"; nation: "俄羅斯" }
        ListElement { name: "小孫"; nation: "中國" }
        ListElement { name: "小李"; nation: "中國" }
        ListElement { name: "David"; nation: "美國" }
    }

即會出現多個相同的屬性名，運行效果如下：