diff options
Diffstat (limited to 'examples/declarative/modelviews/listview/sections.qml')
| -rw-r--r-- | examples/declarative/modelviews/listview/sections.qml | 77 |
1 files changed, 25 insertions, 52 deletions
diff --git a/examples/declarative/modelviews/listview/sections.qml b/examples/declarative/modelviews/listview/sections.qml index d2f9aba..8c038a0 100644 --- a/examples/declarative/modelviews/listview/sections.qml +++ b/examples/declarative/modelviews/listview/sections.qml @@ -42,70 +42,43 @@ import Qt 4.7 //! [0] Rectangle { + id: container width: 200 - height: 240 + height: 250 - // 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 - height: desc.height // height is the combined height of the description and the section separator + ListModel { + id: animalsModel + ListElement { name: "Parrot"; size: "Small" } + ListElement { name: "Guinea pig"; size: "Small" } + ListElement { name: "Dog"; size: "Medium" } + ListElement { name: "Cat"; size: "Medium" } + ListElement { name: "Elephant"; size: "Large" } + } - Item { - id: desc - x: 5; height: layout.height + 4 + // The delegate for each section header + Component { + id: sectionHeading + Rectangle { + width: container.width + height: childrenRect.height + color: "lightsteelblue" - Column { - id: layout - y: 2 - Text { text: 'Name: ' + name } - Text { text: 'Type: ' + type } - Text { text: 'Age: ' + age } - } + Text { + text: section + font.bold: true } } } - // Define a highlight component. Just one of these will be instantiated - // by each ListView and placed behind the current item. - Component { - id: petHighlight - Rectangle { color: "#FFFF88" } - } - - // The list ListView { - id: myList + anchors.fill: parent + model: animalsModel + delegate: Text { text: name } - width: 200; height: parent.height - model: MyPetsModel - delegate: petDelegate - highlight: petHighlight - focus: true - - // The sectionExpression is simply the size of the pet. - // We use this to determine which section we are in above. section.property: "size" section.criteria: ViewSection.FullString - section.delegate: Rectangle { - color: "lightsteelblue" - width: 200 - height: 20 - Text { - x: 2; height: parent.height - verticalAlignment: Text.AlignVCenter - text: section - font.bold: true - } - } + section.delegate: sectionHeading } } //! [0] + |