Documentation for ListView

Convert to new format, use \snippet.

2 files changed, 97 insertions, 19 deletions

diff --git a/examples/declarative/listview/dummydata/MyPetsModel.qml b/examples/declarative/listview/dummydata/MyPetsModel.qml
index 5af7fbf..e1617a3 100644
--- a/examples/declarative/listview/dummydata/MyPetsModel.qml
+++ b/examples/declarative/listview/dummydata/MyPetsModel.qml
@@ -4,48 +4,57 @@ Be sure to name the file the same as the id.
 -->
 <ListModel id="MyPetsModel">
     <Pet>
-        <name>Rover</name>
-        <type>Dog</type>
-        <age>5</age>
+        <name>Polly</name>
+        <type>Parrot</type>
+        <age>12</age>
+        <size>Small</size>
     </Pet>
     <Pet>
-        <name>Whiskers</name>
-        <type>Cat</type>
-        <age>2</age>
+        <name>Penny</name>
+        <type>Turtle</type>
+        <age>4</age>
+        <size>Small</size>
     </Pet>
     <Pet>
         <name>Warren</name>
         <type>Rabbit</type>
         <age>2</age>
-    </Pet>
-    <Pet>
-        <name>Polly</name>
-        <type>Parrot</type>
-        <age>12</age>
+        <size>Small</size>
     </Pet>
     <Pet>
         <name>Spot</name>
         <type>Dog</type>
         <age>9</age>
+        <size>Medium</size>
     </Pet>
     <Pet>
-        <name>Tiny</name>
-        <type>Elephant</type>
-        <age>15</age>
-    </Pet>
-    <Pet>
-        <name>Penny</name>
-        <type>Turtle</type>
-        <age>4</age>
+        <name>Whiskers</name>
+        <type>Cat</type>
+        <age>2</age>
+        <size>Medium</size>
     </Pet>
     <Pet>
         <name>Joey</name>
         <type>Kangaroo</type>
         <age>1</age>
+        <size>Medium</size>
     </Pet>
     <Pet>
         <name>Kimba</name>
         <type>Bunny</type>
         <age>65</age>
+        <size>Large</size>
+    </Pet>
+    <Pet>
+        <name>Rover</name>
+        <type>Dog</type>
+        <age>5</age>
+        <size>Large</size>
+    </Pet>
+    <Pet>
+        <name>Tiny</name>
+        <type>Elephant</type>
+        <age>15</age>
+        <size>Large</size>
     </Pet>
 </ListModel>
diff --git a/examples/declarative/listview/sections.qml b/examples/declarative/listview/sections.qml
new file mode 100644
index 0000000..60acd62
--- /dev/null
+++ b/examples/declarative/listview/sections.qml
@@ -0,0 +1,69 @@
+//! [0]
+Rect {
+    width: 200
+    height: 240
+    color: "white"
+    // MyPets model is defined in dummydata/MyPetsModel.qml
+    // The viewer automatically loads files in dummydata/* to assist
+    // development without a real data source.
+    // This one contains my pets.
+
+    // Define a delegate component that includes a separator for sections.
+    Component {
+        id: PetDelegate
+        Item {
+            id: Wrapper
+            width: 200
+            // My height is the combined height of the description and the section separator
+            height: Separator.height + Desc.height
+            Rect {
+                id: Separator
+                color: "lightsteelblue"
+                width: parent.width
+                // Only show the section separator when we are the beginning of a new section
+                // Note that for this to work nicely, the list must be ordered by section.
+                height: Wrapper.ListView.prevSection != Wrapper.ListView.section ? 20 : 0
+                opacity: Wrapper.ListView.prevSection != Wrapper.ListView.section ? 1 : 0
+                Text {
+                    text: Wrapper.ListView.section; font.bold: true
+                    x: 2; height: parent.height; vAlign: 'AlignVCenter'
+                }
+            }
+            Item {
+                id: Desc
+                x: 5
+                height: Layout.height + 4
+                anchors.top: Separator.bottom
+                VerticalLayout {
+                    id: Layout
+                    y: 2
+                    Text { text: 'Name: ' + name }
+                    Text { text: 'Type: ' + type }
+                    Text { text: 'Age: ' + age }
+                }
+            }
+        }
+    }
+    // Define a highlight component.  Just one of these will be instantiated
+    // by each ListView and placed behind the current item.
+    Component {
+        id: PetHighlight
+        Rect {
+            color: "#FFFF88"
+        }
+    }
+    // The list
+    ListView {
+        id: List
+        width: 200
+        height: parent.height
+        model: MyPetsModel
+        delegate: PetDelegate
+        highlight: PetHighlight
+        // The sectionExpression is simply the size of the pet.
+        // We use this to determine which section we are in above.
+        sectionExpression: "size"
+        focus: true
+    }
+}
+//! [0]