summaryrefslogtreecommitdiffstats
path: root/examples/declarative/listview
diff options
context:
space:
mode:
Diffstat (limited to 'examples/declarative/listview')
-rw-r--r--examples/declarative/listview/dynamic.qml139
-rw-r--r--examples/declarative/listview/highlight.qml32
-rw-r--r--examples/declarative/listview/itemlist.qml27
-rw-r--r--examples/declarative/listview/listview-example.qml36
-rw-r--r--examples/declarative/listview/recipes.qml76
-rw-r--r--examples/declarative/listview/sections.qml30
6 files changed, 218 insertions, 122 deletions
diff --git a/examples/declarative/listview/dynamic.qml b/examples/declarative/listview/dynamic.qml
index 32483fa..236a9c5 100644
--- a/examples/declarative/listview/dynamic.qml
+++ b/examples/declarative/listview/dynamic.qml
@@ -3,11 +3,13 @@ import "content"
import "../scrollbar"
Rectangle {
+ id: container
width: 640; height: 480
color: "#343434"
ListModel {
id: fruitModel
+
ListElement {
name: "Apple"; cost: 2.45
attributes: [
@@ -51,12 +53,16 @@ Rectangle {
Component {
id: fruitDelegate
+
Item {
- width: parent.width; height: 55
+ width: container.width; height: 55
Column {
- id: moveButtons; x: 5; width: childrenRect.width; anchors.verticalCenter: parent.verticalCenter
- Image { source: "content/pics/go-up.png"
+ id: moveButtons
+ x: 5; width: childrenRect.width; anchors.verticalCenter: parent.verticalCenter
+
+ 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"
@@ -66,33 +72,63 @@ Rectangle {
Column {
anchors { right: itemButtons.left; verticalCenter: parent.verticalCenter; left: moveButtons.right; leftMargin: 10 }
+
Text {
- id: label; font.bold: true; text: name; elide: Text.ElideRight; font.pixelSize: 15
- width: parent.width; color: "White"
+ 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: description; color: "White" } } }
+ Repeater {
+ model: attributes
+ Component {
+ Text { text: description; color: "White" }
+ }
+ }
}
}
Row {
id: itemButtons
- anchors.right: removeButton.left; anchors.rightMargin: 35; spacing: 10
- width: childrenRect.width; anchors.verticalCenter: parent.verticalCenter
- Image { source: "content/pics/list-add.png"
- ClickAutoRepeating { id: clickUp; anchors.fill: parent; onClicked: fruitModel.setProperty(index,"cost",cost+0.25) }
- scale: clickUp.isPressed ? 0.9 : 1; transformOrigin: Item.Center
+
+ anchors { right: removeButton.left; rightMargin: 35; verticalCenter: parent.verticalCenter }
+ width: childrenRect.width
+ spacing: 10
+
+ Image {
+ source: "content/pics/list-add.png"
+ scale: clickUp.isPressed ? 0.9 : 1
+ transformOrigin: Item.Center
+
+ ClickAutoRepeating {
+ id: clickUp
+ anchors.fill: parent
+ onClicked: fruitModel.setProperty(index, "cost", cost+0.25)
+ }
}
+
Text { id: costText; text: '$'+Number(cost).toFixed(2); font.pixelSize: 15; color: "White"; font.bold: true; }
- Image { source: "content/pics/list-remove.png"
- ClickAutoRepeating { id: clickDown; anchors.fill: parent; onClicked: fruitModel.setProperty(index,"cost",Math.max(0,cost-0.25)) }
- scale: clickDown.isPressed ? 0.9 : 1; transformOrigin: Item.Center
+
+ Image {
+ source: "content/pics/list-remove.png"
+ scale: clickDown.isPressed ? 0.9 : 1
+ transformOrigin: Item.Center
+
+ ClickAutoRepeating {
+ id: clickDown
+ anchors.fill: parent
+ onClicked: fruitModel.setProperty(index, "cost", Math.max(0,cost-0.25))
+ }
}
}
Image {
- id: removeButton; source: "content/pics/archive-remove.png"
+ 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) }
}
}
@@ -100,60 +136,75 @@ Rectangle {
ListView {
id: view
- model: fruitModel; delegate: fruitDelegate
anchors { top: parent.top; left: parent.left; right: parent.right; bottom: buttons.top }
+ 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: "Vertical"
position: view.visibleArea.yPosition
pageSize: view.visibleArea.heightRatio
- width: 8
- height: view.height
- anchors.right: view.right
+
// Only show the scrollbar when the view is moving.
- states: [
- State {
- name: "ShowBars"; when: view.moving
- PropertyChanges { target: verticalScrollBar; opacity: 1 }
- }
- ]
- transitions: [ Transition { NumberAnimation { properties: "opacity"; duration: 400 } } ]
+ states: State {
+ name: "ShowBars"; when: view.moving
+ PropertyChanges { target: verticalScrollBar; opacity: 1 }
+ }
+ transitions: Transition {
+ NumberAnimation { properties: "opacity"; duration: 400 }
+ }
}
Row {
- x: 8; width: childrenRect.width
- height: childrenRect.height
+ id: buttons
+
+ x: 8; width: childrenRect.width; height: childrenRect.height
anchors { bottom: parent.bottom; bottomMargin: 8 }
spacing: 8
- id: buttons
- Image { source: "content/pics/archive-insert.png"
- MouseArea { anchors.fill: parent;
+
+ 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"}]
- })
+ "name": "Pizza Margarita",
+ "cost": 5.95,
+ "attributes": [{"description": "Cheese"},{"description": "Tomato"}]
+ })
}
}
}
- Image { source: "content/pics/archive-insert.png"
- MouseArea { anchors.fill: parent;
+
+ 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"}]
- })
+ fruitModel.insert(0, {
+ "name": "Pizza Supreme",
+ "cost": 9.95,
+ "attributes": [{"description": "Cheese"},{"description": "Tomato"},{"description": "The Works"}]
+ })
}
}
}
- Image { source: "content/pics/archive-remove.png"
- MouseArea { anchors.fill: parent; onClicked: fruitModel.clear() }
+
+ Image {
+ source: "content/pics/archive-remove.png"
+
+ MouseArea {
+ anchors.fill: parent
+ onClicked: fruitModel.clear()
+ }
}
}
}
diff --git a/examples/declarative/listview/highlight.qml b/examples/declarative/listview/highlight.qml
index 2b54dd8..50ba2f7 100644
--- a/examples/declarative/listview/highlight.qml
+++ b/examples/declarative/listview/highlight.qml
@@ -1,12 +1,13 @@
import Qt 4.7
Rectangle {
- width: 400; height: 300; color: "white"
+ width: 400; 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 {
@@ -21,20 +22,14 @@ Rectangle {
}
// Use the ListView.isCurrentItem attached property to
// indent the item if it is the current item.
- states: [
- State {
- name: "Current"
- when: wrapper.ListView.isCurrentItem
- PropertyChanges { target: wrapper; x: 10 }
- }
- ]
- transitions: [
- Transition {
- NumberAnimation {
- properties: "x"; duration: 200
- }
- }
- ]
+ states: State {
+ name: "Current"
+ when: wrapper.ListView.isCurrentItem
+ PropertyChanges { target: wrapper; x: 10 }
+ }
+ transitions: Transition {
+ NumberAnimation { properties: "x"; duration: 200 }
+ }
}
}
// Specify a highlight with custom movement. Note that highlightFollowsCurrentItem
@@ -43,14 +38,17 @@ Rectangle {
Component {
id: petHighlight
Rectangle {
- width: 200; height: 50; color: "#FFFF88"
+ width: 200; height: 50
+ color: "#FFFF88"
SpringFollow on y { to: list1.currentItem.y; spring: 3; damping: 0.1 }
}
}
+
ListView {
id: list1
width: 200; height: parent.height
- model: MyPetsModel; delegate: petDelegate
+ model: MyPetsModel
+ delegate: petDelegate
highlight: petHighlight; highlightFollowsCurrentItem: false
focus: true
}
diff --git a/examples/declarative/listview/itemlist.qml b/examples/declarative/listview/itemlist.qml
index 2f4aa31..e387f28 100644
--- a/examples/declarative/listview/itemlist.qml
+++ b/examples/declarative/listview/itemlist.qml
@@ -10,23 +10,27 @@ Rectangle {
VisualItemModel {
id: itemModel
+
Rectangle {
- height: view.height; width: view.width; color: "#FFFEF0"
+ width: view.width; height: view.height
+ color: "#FFFEF0"
Text { text: "Page 1"; font.bold: true; anchors.centerIn: parent }
}
Rectangle {
- height: view.height; width: view.width; color: "#F0FFF7"
+ width: view.width; height: view.height
+ color: "#F0FFF7"
Text { text: "Page 2"; font.bold: true; anchors.centerIn: parent }
}
Rectangle {
- height: view.height; width: view.width; color: "#F4F0FF"
+ width: view.width; height: view.height
+ color: "#F4F0FF"
Text { text: "Page 3"; font.bold: true; anchors.centerIn: parent }
}
}
ListView {
id: view
- anchors.fill: parent; anchors.bottomMargin: 30
+ anchors { fill: parent; bottomMargin: 30 }
model: itemModel
preferredHighlightBegin: 0; preferredHighlightEnd: 0
highlightRangeMode: "StrictlyEnforceRange"
@@ -35,22 +39,27 @@ Rectangle {
}
Rectangle {
+ width: 240; height: 30
+ anchors { top: view.bottom; bottom: parent.bottom }
color: "gray"
- anchors.top: view.bottom
- anchors.bottom: parent.bottom
- height: 30
- width: 240
Row {
anchors.centerIn: parent
spacing: 20
+
Repeater {
model: itemModel.count
+
Rectangle {
width: 5; height: 5
radius: 3
- MouseArea { width: 20; height: 20; anchors.centerIn: parent; onClicked: view.currentIndex = index }
color: view.currentIndex == index ? "blue" : "white"
+
+ MouseArea {
+ width: 20; height: 20
+ anchors.centerIn: parent
+ onClicked: view.currentIndex = index
+ }
}
}
}
diff --git a/examples/declarative/listview/listview-example.qml b/examples/declarative/listview/listview-example.qml
index d648b60..6feedf6 100644
--- a/examples/declarative/listview/listview-example.qml
+++ b/examples/declarative/listview/listview-example.qml
@@ -1,12 +1,13 @@
import Qt 4.7
Rectangle {
- width: 600; height: 300; color: "white"
+ 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 {
@@ -31,46 +32,61 @@ Rectangle {
// 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 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 second list sets a highlight range which attempts to keep the
// 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.
+ //
// The third list sets the highlightRangeMode to StrictlyEnforceRange
// and sets a range smaller than the height of an item. This
// forces the current item to change when the view is flicked,
// since the highlight is unable to move.
+ //
// Note that the first ListView sets its currentIndex to be equal to
// the third ListView's currentIndex. By flicking List3 with
// the mouse, the current index of List1 will be changed.
+
ListView {
id: list1
width: 200; height: parent.height
- model: MyPetsModel; delegate: petDelegate
- highlight: petHighlight; currentIndex: list3.currentIndex
+ model: MyPetsModel
+ delegate: petDelegate
+
+ highlight: petHighlight
+ currentIndex: list3.currentIndex
focus: true
}
+
ListView {
id: list2
x: 200; width: 200; height: parent.height
- model: MyPetsModel; delegate: petDelegate; highlight: petHighlight
- preferredHighlightBegin: 80
- preferredHighlightEnd: 220
- highlightRangeMode: "ApplyRange"
+ model: MyPetsModel
+ delegate: petDelegate
+
+ highlight: petHighlight
currentIndex: list1.currentIndex
+ preferredHighlightBegin: 80; preferredHighlightEnd: 220
+ highlightRangeMode: "ApplyRange"
}
+
ListView {
id: list3
x: 400; width: 200; height: parent.height
- model: MyPetsModel; delegate: petDelegate; highlight: petHighlight
+ model: MyPetsModel
+ delegate: petDelegate
+
+ highlight: Rectangle { color: "lightsteelblue" }
currentIndex: list1.currentIndex
- preferredHighlightBegin: 125
- preferredHighlightEnd: 125
+ preferredHighlightBegin: 125; preferredHighlightEnd: 125
highlightRangeMode: "StrictlyEnforceRange"
flickDeceleration: 1000
}
diff --git a/examples/declarative/listview/recipes.qml b/examples/declarative/listview/recipes.qml
index 66c4109..990e272 100644
--- a/examples/declarative/listview/recipes.qml
+++ b/examples/declarative/listview/recipes.qml
@@ -5,16 +5,17 @@ import "content"
Rectangle {
id: page
- width: 400; height: 240; color: "black"
+ width: 400; height: 240
+ 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.
Component {
id: recipeDelegate
+
Item {
id: wrapper
- width: list.width
// Create a property to contain the visibility of the details.
// We can bind multiple element's opacity to this one property,
@@ -22,11 +23,15 @@ Rectangle {
// want to fade.
property real detailsOpacity : 0
+ width: list.width
+
// 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"; radius: 5
+ color: "#FEFFEE"
+ border.color: "#FFBE4F"
+ radius: 5
}
// This mouse region covers the entire delegate.
@@ -52,13 +57,17 @@ Rectangle {
}
Column {
- height: recipePic.height; width: background.width-recipePic.width-20
+ width: background.width-recipePic.width-20; height: recipePic.height;
spacing: 5
+
Text { id: name; text: title; font.bold: true; font.pointSize: 16 }
+
Text {
- text: "Ingredients"; font.pointSize: 12; font.bold: true
+ text: "Ingredients"
+ font.pointSize: 12; font.bold: true
opacity: wrapper.detailsOpacity
}
+
Text {
text: ingredients
wrapMode: Text.WordWrap
@@ -71,52 +80,61 @@ Rectangle {
Item {
id: details
x: 10; width: parent.width-20
- anchors.top: topLayout.bottom; anchors.topMargin: 10
- anchors.bottom: parent.bottom; anchors.bottomMargin: 10
+ anchors { top: topLayout.bottom; topMargin: 10; bottom: parent.bottom; bottomMargin: 10 }
opacity: wrapper.detailsOpacity
Text {
id: methodTitle
- text: "Method"; font.pointSize: 12; font.bold: true
anchors.top: parent.top
+ text: "Method"
+ font.pointSize: 12; font.bold: true
}
+
Flickable {
id: flick
- anchors.top: methodTitle.bottom; anchors.bottom: parent.bottom
- width: parent.width; contentHeight: methodText.height; clip: true
+ width: parent.width
+ anchors { top: methodTitle.bottom; bottom: parent.bottom }
+ contentHeight: methodText.height; clip: true
+
Text { id: methodText; text: method; wrapMode: Text.WordWrap; width: details.width }
}
+
Image {
- anchors.right: flick.right; anchors.top: flick.top
- source: "content/pics/moreUp.png"; opacity: flick.atYBeginning ? 0 : 1
+ anchors { right: flick.right; top: flick.top }
+ source: "content/pics/moreUp.png"
+ opacity: flick.atYBeginning ? 0 : 1
}
+
Image {
- anchors.right: flick.right; anchors.bottom: flick.bottom
- source: "content/pics/moreDown.png"; opacity: flick.atYEnd ? 0 : 1
+ anchors { right: flick.right; bottom: flick.bottom }
+ source: "content/pics/moreDown.png"
+ opacity: flick.atYEnd ? 0 : 1
}
}
// A button to close the detailed view, i.e. set the state back to default ('').
MediaButton {
- anchors.right: background.right; anchors.rightMargin: 5
- y: 10; opacity: wrapper.detailsOpacity
- text: "Close"; onClicked: wrapper.state = '';
+ y: 10; anchors { right: background.right; rightMargin: 5 }
+ opacity: wrapper.detailsOpacity
+ text: "Close"
+
+ onClicked: wrapper.state = '';
}
- // Make the default height equal the hight of the picture, plus margin.
+ // Set the default height to the height of the picture, plus margin.
height: 68
states: State {
name: "Details"
+
PropertyChanges { target: background; color: "white" }
- // Make the picture bigger
- PropertyChanges { target: recipePic; width: 128; height: 128 }
- // Make details visible
- PropertyChanges { target: wrapper; detailsOpacity: 1; x: 0 }
- // Make the detailed view fill the entire list area
- PropertyChanges { target: wrapper; height: list.height }
+ 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
+
// Move the list so that this item is at the top.
PropertyChanges { target: wrapper.ListView.view; explicit: true; contentY: wrapper.y }
+
// Disallow flicking while we're in detailed view
PropertyChanges { target: wrapper.ListView.view; interactive: false }
}
@@ -125,9 +143,7 @@ Rectangle {
// Make the state changes smooth
ParallelAnimation {
ColorAnimation { property: "color"; duration: 500 }
- NumberAnimation {
- duration: 300; properties: "detailsOpacity,x,contentY,height,width"
- }
+ NumberAnimation { duration: 300; properties: "detailsOpacity,x,contentY,height,width" }
}
}
}
@@ -136,7 +152,9 @@ Rectangle {
// The actual list
ListView {
id: list
- model: Recipes; delegate: recipeDelegate
- anchors.fill: parent; clip: true
+ anchors.fill: parent
+ clip: true
+ model: Recipes
+ delegate: recipeDelegate
}
}
diff --git a/examples/declarative/listview/sections.qml b/examples/declarative/listview/sections.qml
index 7c132a4..0a81f63 100644
--- a/examples/declarative/listview/sections.qml
+++ b/examples/declarative/listview/sections.qml
@@ -4,7 +4,7 @@ import Qt 4.7
Rectangle {
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.
@@ -13,15 +13,16 @@ Rectangle {
// 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: desc.height
+ height: desc.height // height is the combined height of the description and the section separator
+
Item {
id: desc
- x: 5
- height: layout.height + 4
+ x: 5; height: layout.height + 4
+
Column {
id: layout
y: 2
@@ -32,22 +33,24 @@ Rectangle {
}
}
}
+
// 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"
- }
+ Rectangle { color: "#FFFF88" }
}
+
// The list
ListView {
id: myList
- width: 200
- height: parent.height
+
+ 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"
@@ -57,11 +60,12 @@ Rectangle {
width: 200
height: 20
Text {
- text: section; font.bold: true
- x: 2; height: parent.height; verticalAlignment: 'AlignVCenter'
+ x: 2; height: parent.height
+ verticalAlignment: 'AlignVCenter'
+ text: section
+ font.bold: true
}
}
- focus: true
}
}
//! [0]
generated by cgit v0.12 at 2024-12-12 12:36:26 (GMT)