summaryrefslogtreecommitdiffstats
path: root/examples/declarative
diff options
context:
space:
mode:
authorBea Lam <bea.lam@nokia.com>2010-06-15 05:55:58 (GMT)
committerBea Lam <bea.lam@nokia.com>2010-06-16 00:19:39 (GMT)
commiteb05fde709f958a0a67f83455c02dcde3dfc1493 (patch)
tree7b592b628e58f4e754b65c567efc859c7cd64aca /examples/declarative
parentcbc1541ecf32ef0c52086b0fc83e1bca70a668ba (diff)
downloadQt-eb05fde709f958a0a67f83455c02dcde3dfc1493.zip
Qt-eb05fde709f958a0a67f83455c02dcde3dfc1493.tar.gz
Qt-eb05fde709f958a0a67f83455c02dcde3dfc1493.tar.bz2
Clean up list examples
Diffstat (limited to 'examples/declarative')
-rw-r--r--examples/declarative/modelviews/listview/PetsModel.qml (renamed from examples/declarative/modelviews/listview/dummydata/MyPetsModel.qml)0
-rw-r--r--examples/declarative/modelviews/listview/RecipesModel.qml (renamed from examples/declarative/modelviews/listview/dummydata/Recipes.qml)0
-rw-r--r--examples/declarative/modelviews/listview/content/PressAndHoldButton.qml (renamed from examples/declarative/modelviews/listview/content/ClickAutoRepeating.qml)42
-rw-r--r--examples/declarative/modelviews/listview/content/TextButton.qml (renamed from examples/declarative/modelviews/listview/content/MediaButton.qml)47
-rw-r--r--examples/declarative/modelviews/listview/dynamiclist.qml244
-rw-r--r--examples/declarative/modelviews/listview/expandingdelegates.qml74
-rw-r--r--examples/declarative/modelviews/listview/highlight.qml34
-rw-r--r--examples/declarative/modelviews/listview/highlightranges.qml70
-rw-r--r--examples/declarative/modelviews/listview/sections.qml77
9 files changed, 240 insertions, 348 deletions
diff --git a/examples/declarative/modelviews/listview/dummydata/MyPetsModel.qml b/examples/declarative/modelviews/listview/PetsModel.qml
index 70cdcdd..70cdcdd 100644
--- a/examples/declarative/modelviews/listview/dummydata/MyPetsModel.qml
+++ b/examples/declarative/modelviews/listview/PetsModel.qml
diff --git a/examples/declarative/modelviews/listview/dummydata/Recipes.qml b/examples/declarative/modelviews/listview/RecipesModel.qml
index 03ab961..03ab961 100644
--- a/examples/declarative/modelviews/listview/dummydata/Recipes.qml
+++ b/examples/declarative/modelviews/listview/RecipesModel.qml
diff --git a/examples/declarative/modelviews/listview/content/ClickAutoRepeating.qml b/examples/declarative/modelviews/listview/content/PressAndHoldButton.qml
index dc23b78..7c174e3 100644
--- a/examples/declarative/modelviews/listview/content/ClickAutoRepeating.qml
+++ b/examples/declarative/modelviews/listview/content/PressAndHoldButton.qml
@@ -40,32 +40,40 @@
import Qt 4.7
-Item {
- id: page
- property int repeatdelay: 300
- property int repeatperiod: 75
- property bool isPressed: false
+Image {
+ id: container
+
+ property int repeatDelay: 300
+ property int repeatDuration: 75
+ property bool pressed: false
- signal pressed
- signal released
signal clicked
- SequentialAnimation on isPressed {
+ scale: pressed ? 0.9 : 1
+
+ SequentialAnimation on pressed {
+ id: autoRepeatClicks
running: false
- id: autoRepeat
- PropertyAction { target: page; property: "isPressed"; value: true }
- ScriptAction { script: page.pressed() }
- ScriptAction { script: page.clicked() }
- PauseAnimation { duration: repeatdelay }
+
+ PropertyAction { target: container; property: "pressed"; value: true }
+ ScriptAction { script: container.clicked() }
+ PauseAnimation { duration: repeatDelay }
+
SequentialAnimation {
loops: Animation.Infinite
- ScriptAction { script: page.clicked() }
- PauseAnimation { duration: repeatperiod }
+ ScriptAction { script: container.clicked() }
+ PauseAnimation { duration: repeatDuration }
}
}
+
MouseArea {
anchors.fill: parent
- onPressed: autoRepeat.start()
- onReleased: { autoRepeat.stop(); parent.isPressed = false; page.released() }
+
+ onPressed: autoRepeatClicks.start()
+ onReleased: {
+ autoRepeatClicks.stop()
+ container.pressed = false
+ }
}
}
+
diff --git a/examples/declarative/modelviews/listview/content/MediaButton.qml b/examples/declarative/modelviews/listview/content/TextButton.qml
index 2aed6e0..ded7a11 100644
--- a/examples/declarative/modelviews/listview/content/MediaButton.qml
+++ b/examples/declarative/modelviews/listview/content/TextButton.qml
@@ -40,36 +40,39 @@
import Qt 4.7
-Item {
- property variant text
+Rectangle {
+ id: container
+
+ property alias text: label.text
+
signal clicked
- id: container
- Image {
- id: normal
- source: "pics/button.png"
- }
- Image {
- id: pressed
- source: "pics/button-pressed.png"
- opacity: 0
+ width: label.width + 20; height: label.height + 6
+ smooth: true
+ radius: 10
+
+ gradient: Gradient {
+ GradientStop { id: gradientStop; position: 0.0; color: palette.light }
+ GradientStop { position: 1.0; color: palette.button }
}
+
+ SystemPalette { id: palette }
+
MouseArea {
- id: clickRegion
- anchors.fill: normal
- onClicked: { container.clicked(); }
+ id: mouseArea
+ anchors.fill: parent
+ onClicked: { container.clicked() }
}
+
Text {
- font.bold: true
- color: "white"
- anchors.centerIn: normal
- text: container.text
+ id: label
+ anchors.centerIn: parent
}
- width: normal.width
states: State {
- name: "Pressed"
- when: clickRegion.pressed == true
- PropertyChanges { target: pressed; opacity: 1 }
+ name: "pressed"
+ when: mouseArea.pressed
+ PropertyChanges { target: gradientStop; color: palette.dark }
}
}
+
diff --git a/examples/declarative/modelviews/listview/dynamiclist.qml b/examples/declarative/modelviews/listview/dynamiclist.qml
index df2e094..0e290f5 100644
--- a/examples/declarative/modelviews/listview/dynamiclist.qml
+++ b/examples/declarative/modelviews/listview/dynamiclist.qml
@@ -37,16 +37,18 @@
** $QT_END_LICENSE$
**
****************************************************************************/
-
import Qt 4.7
import "content"
-import "../../ui-components/scrollbar"
+
+// This example shows how items can be dynamically added to and removed from
+// a ListModel, and how these list modifications can be animated.
Rectangle {
id: container
width: 640; height: 480
color: "#343434"
+ // The model:
ListModel {
id: fruitModel
@@ -77,55 +79,43 @@ Rectangle {
ListElement { description: "Smelly" }
]
}
- ListElement {
- name: "Elderberry"; cost: 0.05
- attributes: [
- ListElement { description: "Berry" }
- ]
- }
- ListElement {
- name: "Fig"; cost: 0.25
- attributes: [
- ListElement { description: "Flower" }
- ]
- }
}
+ // The delegate for each fruit in the model:
Component {
- id: fruitDelegate
-
+ id: listDelegate
+
Item {
- id: wrapper
- width: container.width; height: 55
+ id: delegateItem
+ width: listView.width; height: 55
+ clip: true
- Column {
- id: moveButtons
- x: 5; width: childrenRect.width; anchors.verticalCenter: parent.verticalCenter
+ Row {
+ anchors.verticalCenter: parent.verticalCenter
+ spacing: 10
- Image {
- source: "content/pics/go-up.png"
- MouseArea { anchors.fill: parent; onClicked: fruitModel.move(index,index-1,1) }
- }
- Image { source: "content/pics/go-down.png"
- MouseArea { anchors.fill: parent; onClicked: fruitModel.move(index,index+1,1) }
+ Column {
+ Image {
+ source: "content/pics/go-up.png"
+ MouseArea { anchors.fill: parent; onClicked: fruitModel.move(index,index-1,1) }
+ }
+ Image { source: "content/pics/go-down.png"
+ MouseArea { anchors.fill: parent; onClicked: fruitModel.move(index,index+1,1) }
+ }
}
- }
- Column {
- anchors { right: itemButtons.left; verticalCenter: parent.verticalCenter; left: moveButtons.right; leftMargin: 10 }
+ Column {
+ anchors.verticalCenter: parent.verticalCenter
- Text {
- id: label
- width: parent.width
- color: "White"
- font.bold: true; font.pixelSize: 15
- text: name; elide: Text.ElideRight
- }
- Row {
- spacing: 5
- Repeater {
- model: attributes
- Component {
+ Text {
+ text: name
+ font.pixelSize: 15
+ color: "white"
+ }
+ Row {
+ spacing: 5
+ Repeater {
+ model: attributes
Text { text: description; color: "White" }
}
}
@@ -133,149 +123,81 @@ Rectangle {
}
Row {
- id: itemButtons
-
- anchors { right: removeButton.left; rightMargin: 35; verticalCenter: parent.verticalCenter }
- width: childrenRect.width
+ anchors.verticalCenter: parent.verticalCenter
+ anchors.right: parent.right
spacing: 10
- Image {
+ PressAndHoldButton {
+ anchors.verticalCenter: parent.verticalCenter
source: "content/pics/list-add.png"
- scale: clickUp.isPressed ? 0.9 : 1
-
- ClickAutoRepeating {
- id: clickUp
- anchors.fill: parent
- onClicked: fruitModel.setProperty(index, "cost", cost+0.25)
- }
+ onClicked: fruitModel.setProperty(index, "cost", cost + 0.25)
}
- Text { id: costText; text: '$'+Number(cost).toFixed(2); font.pixelSize: 15; color: "White"; font.bold: true; }
+ Text {
+ id: costText
+ anchors.verticalCenter: parent.verticalCenter
+ text: '$' + Number(cost).toFixed(2)
+ font.pixelSize: 15
+ color: "white"
+ font.bold: true
+ }
- Image {
+ PressAndHoldButton {
+ anchors.verticalCenter: parent.verticalCenter
source: "content/pics/list-remove.png"
- scale: clickDown.isPressed ? 0.9 : 1
+ onClicked: fruitModel.setProperty(index, "cost", Math.max(0,cost-0.25))
+ }
- ClickAutoRepeating {
- id: clickDown
- anchors.fill: parent
- onClicked: fruitModel.setProperty(index, "cost", Math.max(0,cost-0.25))
- }
+ Image {
+ source: "content/pics/archive-remove.png"
+ MouseArea { anchors.fill:parent; onClicked: fruitModel.remove(index) }
}
}
- Image {
- id: removeButton
- anchors { verticalCenter: parent.verticalCenter; right: parent.right; rightMargin: 10 }
- source: "content/pics/archive-remove.png"
- MouseArea { anchors.fill:parent; onClicked: fruitModel.remove(index) }
+ // Animate adding and removing of items:
+
+ ListView.onAdd: SequentialAnimation {
+ PropertyAction { target: delegateItem; property: "height"; value: 0 }
+ NumberAnimation { target: delegateItem; property: "height"; to: 55; duration: 250; easing.type: Easing.InOutQuad }
}
- // Animate adding and removing items
- ListView.delayRemove: true // so that the item is not destroyed immediately
- ListView.onAdd: state = "add"
- ListView.onRemove: state = "remove"
- states: [
- State {
- name: "add"
- PropertyChanges { target: wrapper; height: 55; clip: true }
- },
- State {
- name: "remove"
- PropertyChanges { target: wrapper; height: 0; clip: true }
- }
- ]
- transitions: [
- Transition {
- to: "add"
- SequentialAnimation {
- NumberAnimation { properties: "height"; from: 0; to: 55 }
- PropertyAction { target: wrapper; property: "state"; value: "" }
- }
- },
- Transition {
- to: "remove"
- SequentialAnimation {
- NumberAnimation { properties: "height" }
- // Make sure delayRemove is set back to false so that the item can be destroyed
- PropertyAction { target: wrapper; property: "ListView.delayRemove"; value: false }
- }
- }
- ]
+ ListView.onRemove: SequentialAnimation {
+ PropertyAction { target: delegateItem; property: "ListView.delayRemove"; value: true }
+ NumberAnimation { target: delegateItem; property: "height"; to: 0; duration: 250; easing.type: Easing.InOutQuad }
+
+ // Make sure delayRemove is set back to false so that the item can be destroyed
+ PropertyAction { target: delegateItem; property: "ListView.delayRemove"; value: false }
+ }
}
}
+ // The view:
ListView {
- id: view
- anchors { top: parent.top; left: parent.left; right: parent.right; bottom: buttons.top }
+ id: listView
+ anchors.fill: parent; anchors.margins: 20
model: fruitModel
- delegate: fruitDelegate
- }
-
- // Attach scrollbar to the right edge of the view.
- ScrollBar {
- id: verticalScrollBar
-
- width: 8; height: view.height; anchors.right: view.right
- opacity: 0
- orientation: Qt.Vertical
- position: view.visibleArea.yPosition
- pageSize: view.visibleArea.heightRatio
-
- // Only show the scrollbar when the view is moving.
- states: State {
- name: "ShowBars"; when: view.movingVertically
- PropertyChanges { target: verticalScrollBar; opacity: 1 }
- }
- transitions: Transition {
- NumberAnimation { properties: "opacity"; duration: 400 }
- }
+ delegate: listDelegate
}
Row {
- id: buttons
-
- x: 8; width: childrenRect.width; height: childrenRect.height
- anchors { bottom: parent.bottom; bottomMargin: 8 }
- spacing: 8
-
- Image {
- source: "content/pics/archive-insert.png"
-
- MouseArea {
- anchors.fill: parent
- onClicked: {
- fruitModel.append({
- "name": "Pizza Margarita",
- "cost": 5.95,
- "attributes": [{"description": "Cheese"},{"description": "Tomato"}]
- })
- }
- }
- }
-
- Image {
- source: "content/pics/archive-insert.png"
-
- MouseArea {
- anchors.fill: parent;
- onClicked: {
- fruitModel.insert(0, {
- "name": "Pizza Supreme",
- "cost": 9.95,
- "attributes": [{"description": "Cheese"},{"description": "Tomato"},{"description": "The Works"}]
- })
- }
+ anchors { left: parent.left; bottom: parent.bottom; margins: 20 }
+ spacing: 10
+
+ TextButton {
+ text: "Add an item"
+ onClicked: {
+ fruitModel.append({
+ "name": "Pizza Margarita",
+ "cost": 5.95,
+ "attributes": [{"description": "Cheese"}, {"description": "Tomato"}]
+ })
}
}
- Image {
- source: "content/pics/archive-remove.png"
-
- MouseArea {
- anchors.fill: parent
- onClicked: fruitModel.clear()
- }
+ TextButton {
+ text: "Remove all items"
+ onClicked: fruitModel.clear()
}
}
}
+
diff --git a/examples/declarative/modelviews/listview/expandingdelegates.qml b/examples/declarative/modelviews/listview/expandingdelegates.qml
index f4b97ea..94ea48f 100644
--- a/examples/declarative/modelviews/listview/expandingdelegates.qml
+++ b/examples/declarative/modelviews/listview/expandingdelegates.qml
@@ -41,7 +41,7 @@
import Qt 4.7
import "content"
-// This example illustrates expanding a list item to show a more detailed view
+// This example illustrates expanding a list item to show a more detailed view.
Rectangle {
id: page
@@ -49,13 +49,13 @@ Rectangle {
color: "black"
// Delegate for the recipes. This delegate has two modes:
- // 1. the list mode (default), which just shows the picture and title of the recipe.
- // 2. the details mode, which also shows the ingredients and method.
+ // 1. List mode (default), which just shows the picture and title of the recipe.
+ // 2. Details mode, which also shows the ingredients and method.
Component {
id: recipeDelegate
Item {
- id: wrapper
+ id: recipe
// Create a property to contain the visibility of the details.
// We can bind multiple element's opacity to this one property,
@@ -63,14 +63,15 @@ Rectangle {
// want to fade.
property real detailsOpacity : 0
- width: list.width
+ width: listView.width
+ height: 70
// A simple rounded rectangle for the background
Rectangle {
id: background
- x: 1; y: 2; width: parent.width - 2; height: parent.height - 4
- color: "#FEFFEE"
- border.color: "#FFBE4F"
+ x: 2; y: 2; width: parent.width - x*2; height: parent.height - y*2
+ color: "ivory"
+ border.color: "orange"
radius: 5
}
@@ -78,50 +79,53 @@ Rectangle {
// When clicked it changes mode to 'Details'. If we are already
// in Details mode, then no change will happen.
MouseArea {
- id: pageMouse
anchors.fill: parent
- onClicked: wrapper.state = 'Details';
+ onClicked: recipe.state = 'Details';
}
- // Layout the page. Picture, title and ingredients at the top, method at the
+ // Lay out the page: picture, title and ingredients at the top, and method at the
// bottom. Note that elements that should not be visible in the list
- // mode have their opacity set to wrapper.detailsOpacity.
+ // mode have their opacity set to recipe.detailsOpacity.
Row {
id: topLayout
- x: 10; y: 10; height: recipePic.height; width: parent.width
+ x: 10; y: 10; height: recipeImage.height; width: parent.width
spacing: 10
Image {
- id: recipePic
- source: picture; width: 48; height: 48
+ id: recipeImage
+ width: 50; height: 50
+ source: picture
}
Column {
- width: background.width-recipePic.width-20; height: recipePic.height;
+ width: background.width - recipeImage.width - 20; height: recipeImage.height
spacing: 5
- Text { id: name; text: title; font.bold: true; font.pointSize: 16 }
+ Text {
+ text: title
+ font.bold: true; font.pointSize: 16
+ }
Text {
text: "Ingredients"
font.pointSize: 12; font.bold: true
- opacity: wrapper.detailsOpacity
+ opacity: recipe.detailsOpacity
}
Text {
text: ingredients
wrapMode: Text.WordWrap
width: parent.width
- opacity: wrapper.detailsOpacity
+ opacity: recipe.detailsOpacity
}
}
}
Item {
id: details
- x: 10; width: parent.width-20
+ x: 10; width: parent.width - 20
anchors { top: topLayout.bottom; topMargin: 10; bottom: parent.bottom; bottomMargin: 10 }
- opacity: wrapper.detailsOpacity
+ opacity: recipe.detailsOpacity
Text {
id: methodTitle
@@ -153,30 +157,28 @@ Rectangle {
}
// A button to close the detailed view, i.e. set the state back to default ('').
- MediaButton {
- y: 10; anchors { right: background.right; rightMargin: 5 }
- opacity: wrapper.detailsOpacity
+ TextButton {
+ y: 10
+ anchors { right: background.right; rightMargin: 10 }
+ opacity: recipe.detailsOpacity
text: "Close"
- onClicked: wrapper.state = '';
+ onClicked: recipe.state = '';
}
- // Set the default height to the height of the picture, plus margin.
- height: 68
-
states: State {
name: "Details"
PropertyChanges { target: background; color: "white" }
- PropertyChanges { target: recipePic; width: 128; height: 128 } // Make picture bigger
- PropertyChanges { target: wrapper; detailsOpacity: 1; x: 0 } // Make details visible
- PropertyChanges { target: wrapper; height: list.height } // Fill the entire list area with the detailed view
+ PropertyChanges { target: recipeImage; width: 130; height: 130 } // Make picture bigger
+ PropertyChanges { target: recipe; detailsOpacity: 1; x: 0 } // Make details visible
+ PropertyChanges { target: recipe; height: listView.height } // Fill the entire list area with the detailed view
// Move the list so that this item is at the top.
- PropertyChanges { target: wrapper.ListView.view; explicit: true; contentY: wrapper.y }
+ PropertyChanges { target: recipe.ListView.view; explicit: true; contentY: recipe.y }
// Disallow flicking while we're in detailed view
- PropertyChanges { target: wrapper.ListView.view; interactive: false }
+ PropertyChanges { target: recipe.ListView.view; interactive: false }
}
transitions: Transition {
@@ -191,10 +193,10 @@ Rectangle {
// The actual list
ListView {
- id: list
+ id: listView
anchors.fill: parent
- clip: true
- model: Recipes
+ model: RecipesModel {}
delegate: recipeDelegate
+ clip: true
}
}
diff --git a/examples/declarative/modelviews/listview/highlight.qml b/examples/declarative/modelviews/listview/highlight.qml
index 239272a..5748974 100644
--- a/examples/declarative/modelviews/listview/highlight.qml
+++ b/examples/declarative/modelviews/listview/highlight.qml
@@ -41,12 +41,7 @@
import Qt 4.7
Rectangle {
- width: 400; height: 300
-
- // MyPets model is defined in dummydata/MyPetsModel.qml
- // The launcher automatically loads files in dummydata/* to assist
- // development without a real data source.
- // This one contains my pets.
+ width: 200; height: 300
// Define a delegate component. A component will be
// instantiated for each visible item in the list.
@@ -54,42 +49,45 @@ Rectangle {
id: petDelegate
Item {
id: wrapper
- width: 200; height: 50
+ width: 200; height: 55
Column {
Text { text: 'Name: ' + name }
Text { text: 'Type: ' + type }
Text { text: 'Age: ' + age }
}
- // Use the ListView.isCurrentItem attached property to
- // indent the item if it is the current item.
+ // indent the item if it is the current item
states: State {
name: "Current"
when: wrapper.ListView.isCurrentItem
- PropertyChanges { target: wrapper; x: 10 }
+ PropertyChanges { target: wrapper; x: 20 }
}
transitions: Transition {
NumberAnimation { properties: "x"; duration: 200 }
}
}
}
- // Specify a highlight with custom movement. Note that highlightFollowsCurrentItem
- // is set to false in the ListView so that we can control how the
- // highlight moves to the current item.
+
+ // Define a highlight with customised movement between items.
Component {
- id: petHighlight
+ id: highlightBar
Rectangle {
width: 200; height: 50
color: "#FFFF88"
- SpringFollow on y { to: list1.currentItem.y; spring: 3; damping: 0.1 }
+ SpringFollow on y { to: listView.currentItem.y; spring: 3; damping: 0.1 }
}
}
ListView {
- id: list1
+ id: listView
width: 200; height: parent.height
- model: MyPetsModel
+
+ model: PetsModel {}
delegate: petDelegate
- highlight: petHighlight; highlightFollowsCurrentItem: false
focus: true
+
+ // Set the highlight delegate. Note we must also set highlightFollowsCurrentItem
+ // to false so the highlight delegate can control how the highlight is moved.
+ highlight: highlightBar
+ highlightFollowsCurrentItem: false
}
}
diff --git a/examples/declarative/modelviews/listview/highlightranges.qml b/examples/declarative/modelviews/listview/highlightranges.qml
index a8a95c4..162d8b7 100644
--- a/examples/declarative/modelviews/listview/highlightranges.qml
+++ b/examples/declarative/modelviews/listview/highlightranges.qml
@@ -43,46 +43,20 @@ import Qt 4.7
Rectangle {
width: 600; height: 300
- // 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. A component will be
- // instantiated for each visible item in the list.
- Component {
- id: petDelegate
- Item {
- width: 200; height: 50
- Column {
- 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
- Rectangle { color: "#FFFF88" }
- }
-
// Show the model in three lists, with different highlight ranges.
// preferredHighlightBegin and preferredHighlightEnd set the
// range in which to attempt to maintain the highlight.
//
- // Note that the second and third ListView
- // set their currentIndex to be the same as the first, and that
- // the first ListView is given keyboard focus.
+ // The second and third ListView set their currentIndex to be the
+ // same as the first, and the first ListView is given keyboard focus.
//
- // The default mode allows the currentItem to move freely
- // within the visible area. If it would move outside the visible
- // area, the view is scrolled to keep it visible.
+ // The first list does not set a highlight range, so its currentItem
+ // can move freely within the visible area. If it moves outside the
+ // visible area, the view is automatically scrolled to keep the current
+ // item visible.
//
// The second list sets a highlight range which attempts to keep the
- // current item within the the bounds of the range, however
+ // current item within the the bounds of the range. However,
// items will not scroll beyond the beginning or end of the view,
// forcing the highlight to move outside the range at the ends.
//
@@ -98,21 +72,22 @@ Rectangle {
ListView {
id: list1
width: 200; height: parent.height
- model: MyPetsModel
+ model: PetsModel {}
delegate: petDelegate
- highlight: petHighlight
+ highlight: Rectangle { color: "lightsteelblue" }
currentIndex: list3.currentIndex
focus: true
}
ListView {
id: list2
- x: 200; width: 200; height: parent.height
- model: MyPetsModel
+ x: list1.width
+ width: 200; height: parent.height
+ model: PetsModel {}
delegate: petDelegate
- highlight: petHighlight
+ highlight: Rectangle { color: "yellow" }
currentIndex: list1.currentIndex
preferredHighlightBegin: 80; preferredHighlightEnd: 220
highlightRangeMode: ListView.ApplyRange
@@ -120,14 +95,25 @@ Rectangle {
ListView {
id: list3
- x: 400; width: 200; height: parent.height
- model: MyPetsModel
+ x: list1.width + list2.width
+ width: 200; height: parent.height
+ model: PetsModel {}
delegate: petDelegate
- highlight: Rectangle { color: "lightsteelblue" }
+ highlight: Rectangle { color: "yellow" }
currentIndex: list1.currentIndex
preferredHighlightBegin: 125; preferredHighlightEnd: 125
highlightRangeMode: ListView.StrictlyEnforceRange
- flickDeceleration: 1000
+ }
+
+ // The delegate for each list
+ Component {
+ id: petDelegate
+ Column {
+ width: 200
+ Text { text: 'Name: ' + name }
+ Text { text: 'Type: ' + type }
+ Text { text: 'Age: ' + age }
+ }
}
}
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]
+