diff options
Diffstat (limited to 'examples/declarative/modelviews/listview')
29 files changed, 887 insertions, 0 deletions
diff --git a/examples/declarative/modelviews/listview/content/ClickAutoRepeating.qml b/examples/declarative/modelviews/listview/content/ClickAutoRepeating.qml new file mode 100644 index 0000000..f65c2b3 --- /dev/null +++ b/examples/declarative/modelviews/listview/content/ClickAutoRepeating.qml @@ -0,0 +1,31 @@ +import Qt 4.7 + +Item { + id: page + property int repeatdelay: 300 + property int repeatperiod: 75 + property bool isPressed: false + + signal pressed + signal released + signal clicked + + SequentialAnimation on isPressed { + running: false + id: autoRepeat + PropertyAction { target: page; property: "isPressed"; value: true } + ScriptAction { script: page.pressed() } + ScriptAction { script: page.clicked() } + PauseAnimation { duration: repeatdelay } + SequentialAnimation { + loops: Animation.Infinite + ScriptAction { script: page.clicked() } + PauseAnimation { duration: repeatperiod } + } + } + MouseArea { + anchors.fill: parent + onPressed: autoRepeat.start() + onReleased: { autoRepeat.stop(); parent.isPressed = false; page.released() } + } +} diff --git a/examples/declarative/modelviews/listview/content/MediaButton.qml b/examples/declarative/modelviews/listview/content/MediaButton.qml new file mode 100644 index 0000000..a625b4c --- /dev/null +++ b/examples/declarative/modelviews/listview/content/MediaButton.qml @@ -0,0 +1,35 @@ +import Qt 4.7 + +Item { + property variant text + signal clicked + + id: container + Image { + id: normal + source: "pics/button.png" + } + Image { + id: pressed + source: "pics/button-pressed.png" + opacity: 0 + } + MouseArea { + id: clickRegion + anchors.fill: normal + onClicked: { container.clicked(); } + } + Text { + font.bold: true + color: "white" + anchors.centerIn: normal + text: container.text + } + width: normal.width + + states: State { + name: "Pressed" + when: clickRegion.pressed == true + PropertyChanges { target: pressed; opacity: 1 } + } +} diff --git a/examples/declarative/modelviews/listview/content/pics/add.png b/examples/declarative/modelviews/listview/content/pics/add.png Binary files differnew file mode 100644 index 0000000..f29d84b --- /dev/null +++ b/examples/declarative/modelviews/listview/content/pics/add.png diff --git a/examples/declarative/modelviews/listview/content/pics/archive-insert.png b/examples/declarative/modelviews/listview/content/pics/archive-insert.png Binary files differnew file mode 100644 index 0000000..b706248 --- /dev/null +++ b/examples/declarative/modelviews/listview/content/pics/archive-insert.png diff --git a/examples/declarative/modelviews/listview/content/pics/archive-remove.png b/examples/declarative/modelviews/listview/content/pics/archive-remove.png Binary files differnew file mode 100644 index 0000000..9640f6b --- /dev/null +++ b/examples/declarative/modelviews/listview/content/pics/archive-remove.png diff --git a/examples/declarative/modelviews/listview/content/pics/button-pressed.png b/examples/declarative/modelviews/listview/content/pics/button-pressed.png Binary files differnew file mode 100644 index 0000000..e434d32 --- /dev/null +++ b/examples/declarative/modelviews/listview/content/pics/button-pressed.png diff --git a/examples/declarative/modelviews/listview/content/pics/button.png b/examples/declarative/modelviews/listview/content/pics/button.png Binary files differnew file mode 100644 index 0000000..56a63ce --- /dev/null +++ b/examples/declarative/modelviews/listview/content/pics/button.png diff --git a/examples/declarative/modelviews/listview/content/pics/del.png b/examples/declarative/modelviews/listview/content/pics/del.png Binary files differnew file mode 100644 index 0000000..1d753a3 --- /dev/null +++ b/examples/declarative/modelviews/listview/content/pics/del.png diff --git a/examples/declarative/modelviews/listview/content/pics/fruit-salad.jpg b/examples/declarative/modelviews/listview/content/pics/fruit-salad.jpg Binary files differnew file mode 100644 index 0000000..da5a6b1 --- /dev/null +++ b/examples/declarative/modelviews/listview/content/pics/fruit-salad.jpg diff --git a/examples/declarative/modelviews/listview/content/pics/go-down.png b/examples/declarative/modelviews/listview/content/pics/go-down.png Binary files differnew file mode 100644 index 0000000..63331a5 --- /dev/null +++ b/examples/declarative/modelviews/listview/content/pics/go-down.png diff --git a/examples/declarative/modelviews/listview/content/pics/go-up.png b/examples/declarative/modelviews/listview/content/pics/go-up.png Binary files differnew file mode 100644 index 0000000..4459024 --- /dev/null +++ b/examples/declarative/modelviews/listview/content/pics/go-up.png diff --git a/examples/declarative/modelviews/listview/content/pics/hamburger.jpg b/examples/declarative/modelviews/listview/content/pics/hamburger.jpg Binary files differnew file mode 100644 index 0000000..d0a15be --- /dev/null +++ b/examples/declarative/modelviews/listview/content/pics/hamburger.jpg diff --git a/examples/declarative/modelviews/listview/content/pics/lemonade.jpg b/examples/declarative/modelviews/listview/content/pics/lemonade.jpg Binary files differnew file mode 100644 index 0000000..db445c9 --- /dev/null +++ b/examples/declarative/modelviews/listview/content/pics/lemonade.jpg diff --git a/examples/declarative/modelviews/listview/content/pics/list-add.png b/examples/declarative/modelviews/listview/content/pics/list-add.png Binary files differnew file mode 100644 index 0000000..e029787 --- /dev/null +++ b/examples/declarative/modelviews/listview/content/pics/list-add.png diff --git a/examples/declarative/modelviews/listview/content/pics/list-remove.png b/examples/declarative/modelviews/listview/content/pics/list-remove.png Binary files differnew file mode 100644 index 0000000..2bb1a59 --- /dev/null +++ b/examples/declarative/modelviews/listview/content/pics/list-remove.png diff --git a/examples/declarative/modelviews/listview/content/pics/moreDown.png b/examples/declarative/modelviews/listview/content/pics/moreDown.png Binary files differnew file mode 100644 index 0000000..31a35d5 --- /dev/null +++ b/examples/declarative/modelviews/listview/content/pics/moreDown.png diff --git a/examples/declarative/modelviews/listview/content/pics/moreUp.png b/examples/declarative/modelviews/listview/content/pics/moreUp.png Binary files differnew file mode 100644 index 0000000..fefb9c9 --- /dev/null +++ b/examples/declarative/modelviews/listview/content/pics/moreUp.png diff --git a/examples/declarative/modelviews/listview/content/pics/pancakes.jpg b/examples/declarative/modelviews/listview/content/pics/pancakes.jpg Binary files differnew file mode 100644 index 0000000..60c4396 --- /dev/null +++ b/examples/declarative/modelviews/listview/content/pics/pancakes.jpg diff --git a/examples/declarative/modelviews/listview/content/pics/trash.png b/examples/declarative/modelviews/listview/content/pics/trash.png Binary files differnew file mode 100644 index 0000000..2042595 --- /dev/null +++ b/examples/declarative/modelviews/listview/content/pics/trash.png diff --git a/examples/declarative/modelviews/listview/content/pics/vegetable-soup.jpg b/examples/declarative/modelviews/listview/content/pics/vegetable-soup.jpg Binary files differnew file mode 100644 index 0000000..9dce332 --- /dev/null +++ b/examples/declarative/modelviews/listview/content/pics/vegetable-soup.jpg diff --git a/examples/declarative/modelviews/listview/dummydata/MyPetsModel.qml b/examples/declarative/modelviews/listview/dummydata/MyPetsModel.qml new file mode 100644 index 0000000..f15dda3 --- /dev/null +++ b/examples/declarative/modelviews/listview/dummydata/MyPetsModel.qml @@ -0,0 +1,61 @@ +import Qt 4.7 + +// ListModel allows free form list models to be defined and populated. + +ListModel { + id: petsModel + ListElement { + name: "Polly" + type: "Parrot" + age: 12 + size: "Small" + } + ListElement { + name: "Penny" + type: "Turtle" + age: 4 + size: "Small" + } + ListElement { + name: "Warren" + type: "Rabbit" + age: 2 + size: "Small" + } + ListElement { + name: "Spot" + type: "Dog" + age: 9 + size: "Medium" + } + ListElement { + name: "Schrödinger" + type: "Cat" + age: 2 + size: "Medium" + } + ListElement { + name: "Joey" + type: "Kangaroo" + age: 1 + size: "Medium" + } + ListElement { + name: "Kimba" + type: "Bunny" + age: 65 + size: "Large" + } + ListElement { + name: "Rover" + type: "Dog" + age: 5 + size: "Large" + } + ListElement { + name: "Tiny" + type: "Elephant" + age: 15 + size: "Large" + } +} diff --git a/examples/declarative/modelviews/listview/dummydata/Recipes.qml b/examples/declarative/modelviews/listview/dummydata/Recipes.qml new file mode 100644 index 0000000..f707c82 --- /dev/null +++ b/examples/declarative/modelviews/listview/dummydata/Recipes.qml @@ -0,0 +1,90 @@ +import Qt 4.7 + +ListModel { + id: recipesModel + ListElement { + title: "Pancakes" + picture: "content/pics/pancakes.jpg" + ingredients: "<html> + <ul> + <li> 1 cup (150g) self-raising flour + <li> 1 tbs caster sugar + <li> 3/4 cup (185ml) milk + <li> 1 egg + </ul> + </html>" + method: "<html> + <ol> + <li> Sift flour and sugar together into a bowl. Add a pinch of salt. + <li> Beat milk and egg together, then add to dry ingredients. Beat until smooth. + <li> Pour mixture into a pan on medium heat and cook until bubbles appear on the surface. + <li> Turn over and cook other side until golden. + </ol> + </html>" + } + ListElement { + title: "Fruit Salad" + picture: "content/pics/fruit-salad.jpg" + ingredients: "* Seasonal Fruit" + method: "* Chop fruit and place in a bowl." + } + ListElement { + title: "Vegetable Soup" + picture: "content/pics/vegetable-soup.jpg" + ingredients: "<html> + <ul> + <li> 1 onion + <li> 1 turnip + <li> 1 potato + <li> 1 carrot + <li> 1 head of celery + <li> 1 1/2 litres of water + </ul> + </html>" + method: "<html> + <ol> + <li> Chop vegetables. + <li> Boil in water until vegetables soften. + <li> Season with salt and pepper to taste. + </ol> + </html>" + } + ListElement { + title: "Hamburger" + picture: "content/pics/hamburger.jpg" + ingredients: "<html> + <ul> + <li> 500g minced beef + <li> Seasoning + <li> lettuce, tomato, onion, cheese + <li> 1 hamburger bun for each burger + </ul> + </html>" + method: "<html> + <ol> + <li> Mix the beef, together with seasoning, in a food processor. + <li> Shape the beef into burgers. + <li> Grill the burgers for about 5 mins on each side (until cooked through) + <li> Serve each burger on a bun with ketchup, cheese, lettuce, tomato and onion. + </ol> + </html>" + } + ListElement { + title: "Lemonade" + picture: "content/pics/lemonade.jpg" + ingredients: "<html> + <ul> + <li> 1 cup Lemon Juice + <li> 1 cup Sugar + <li> 6 Cups of Water (2 cups warm water, 4 cups cold water) + </ul> + </html>" + method: "<html> + <ol> + <li> Pour 2 cups of warm water into a pitcher and stir in sugar until it dissolves. + <li> Pour in lemon juice, stir again, and add 4 cups of cold water. + <li> Chill or serve over ice cubes. + </ol> + </html>" + } +} diff --git a/examples/declarative/modelviews/listview/dynamic.qml b/examples/declarative/modelviews/listview/dynamic.qml new file mode 100644 index 0000000..693e88a --- /dev/null +++ b/examples/declarative/modelviews/listview/dynamic.qml @@ -0,0 +1,208 @@ +import Qt 4.7 +import "content" +import "../../ui-components/scrollbar" + +Rectangle { + id: container + width: 640; height: 480 + color: "#343434" + + ListModel { + id: fruitModel + + ListElement { + name: "Apple"; cost: 2.45 + attributes: [ + ListElement { description: "Core" }, + ListElement { description: "Deciduous" } + ] + } + ListElement { + name: "Banana"; cost: 1.95 + attributes: [ + ListElement { description: "Tropical" }, + ListElement { description: "Seedless" } + ] + } + ListElement { + name: "Cumquat"; cost: 3.25 + attributes: [ + ListElement { description: "Citrus" } + ] + } + ListElement { + name: "Durian"; cost: 9.95 + attributes: [ + ListElement { description: "Tropical" }, + ListElement { description: "Smelly" } + ] + } + ListElement { + name: "Elderberry"; cost: 0.05 + attributes: [ + ListElement { description: "Berry" } + ] + } + ListElement { + name: "Fig"; cost: 0.25 + attributes: [ + ListElement { description: "Flower" } + ] + } + } + + Component { + id: fruitDelegate + + Item { + width: container.width; height: 55 + + Column { + 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" + MouseArea { anchors.fill: parent; onClicked: fruitModel.move(index,index+1,1) } + } + } + + Column { + anchors { right: itemButtons.left; verticalCenter: parent.verticalCenter; left: moveButtons.right; leftMargin: 10 } + + 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: description; color: "White" } + } + } + } + } + + Row { + id: itemButtons + + 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 + + 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" + scale: clickDown.isPressed ? 0.9 : 1 + + ClickAutoRepeating { + id: clickDown + anchors.fill: parent + onClicked: fruitModel.setProperty(index, "cost", Math.max(0,cost-0.25)) + } + } + } + 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) } + } + } + } + + ListView { + id: view + 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: 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 } + } + } + + 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"}] + }) + } + } + } + + Image { + source: "content/pics/archive-remove.png" + + MouseArea { + anchors.fill: parent + onClicked: fruitModel.clear() + } + } + } +} diff --git a/examples/declarative/modelviews/listview/highlight.qml b/examples/declarative/modelviews/listview/highlight.qml new file mode 100644 index 0000000..ade355d --- /dev/null +++ b/examples/declarative/modelviews/listview/highlight.qml @@ -0,0 +1,55 @@ +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. + + // Define a delegate component. A component will be + // instantiated for each visible item in the list. + Component { + id: petDelegate + Item { + id: wrapper + width: 200; height: 50 + 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. + 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 + // is set to false in the ListView so that we can control how the + // highlight moves to the current item. + Component { + id: petHighlight + Rectangle { + 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 + highlight: petHighlight; highlightFollowsCurrentItem: false + focus: true + } +} diff --git a/examples/declarative/modelviews/listview/itemlist.qml b/examples/declarative/modelviews/listview/itemlist.qml new file mode 100644 index 0000000..b73b3a3 --- /dev/null +++ b/examples/declarative/modelviews/listview/itemlist.qml @@ -0,0 +1,67 @@ +// This example demonstrates placing items in a view using +// a VisualItemModel + +import Qt 4.7 + +Rectangle { + color: "lightgray" + width: 240 + height: 320 + + VisualItemModel { + id: itemModel + + Rectangle { + width: view.width; height: view.height + color: "#FFFEF0" + Text { text: "Page 1"; font.bold: true; anchors.centerIn: parent } + } + Rectangle { + width: view.width; height: view.height + color: "#F0FFF7" + Text { text: "Page 2"; font.bold: true; anchors.centerIn: parent } + } + Rectangle { + width: view.width; height: view.height + color: "#F4F0FF" + Text { text: "Page 3"; font.bold: true; anchors.centerIn: parent } + } + } + + ListView { + id: view + anchors { fill: parent; bottomMargin: 30 } + model: itemModel + preferredHighlightBegin: 0; preferredHighlightEnd: 0 + highlightRangeMode: ListView.StrictlyEnforceRange + orientation: ListView.Horizontal + snapMode: ListView.SnapOneItem; flickDeceleration: 2000 + } + + Rectangle { + width: 240; height: 30 + anchors { top: view.bottom; bottom: parent.bottom } + color: "gray" + + Row { + anchors.centerIn: parent + spacing: 20 + + Repeater { + model: itemModel.count + + Rectangle { + width: 5; height: 5 + radius: 3 + color: view.currentIndex == index ? "blue" : "white" + + MouseArea { + width: 20; height: 20 + anchors.centerIn: parent + onClicked: view.currentIndex = index + } + } + } + } + } +} diff --git a/examples/declarative/modelviews/listview/listview-example.qml b/examples/declarative/modelviews/listview/listview-example.qml new file mode 100644 index 0000000..2e8cdda --- /dev/null +++ b/examples/declarative/modelviews/listview/listview-example.qml @@ -0,0 +1,93 @@ +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 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 + focus: true + } + + ListView { + id: list2 + x: 200; width: 200; height: parent.height + model: MyPetsModel + delegate: petDelegate + + highlight: petHighlight + currentIndex: list1.currentIndex + preferredHighlightBegin: 80; preferredHighlightEnd: 220 + highlightRangeMode: ListView.ApplyRange + } + + ListView { + id: list3 + x: 400; width: 200; height: parent.height + model: MyPetsModel + delegate: petDelegate + + highlight: Rectangle { color: "lightsteelblue" } + currentIndex: list1.currentIndex + preferredHighlightBegin: 125; preferredHighlightEnd: 125 + highlightRangeMode: ListView.StrictlyEnforceRange + flickDeceleration: 1000 + } +} diff --git a/examples/declarative/modelviews/listview/listview.qmlproject b/examples/declarative/modelviews/listview/listview.qmlproject new file mode 100644 index 0000000..d4909f8 --- /dev/null +++ b/examples/declarative/modelviews/listview/listview.qmlproject @@ -0,0 +1,16 @@ +import QmlProject 1.0 + +Project { + /* Include .qml, .js, and image files from current directory and subdirectories */ + QmlFiles { + directory: "." + } + JavaScriptFiles { + directory: "." + } + ImageFiles { + directory: "." + } + /* List of plugin directories passed to QML runtime */ + // importPaths: [ " ../exampleplugin " ] +} diff --git a/examples/declarative/modelviews/listview/recipes.qml b/examples/declarative/modelviews/listview/recipes.qml new file mode 100644 index 0000000..990e272 --- /dev/null +++ b/examples/declarative/modelviews/listview/recipes.qml @@ -0,0 +1,160 @@ +import Qt 4.7 +import "content" + +// This example illustrates expanding a list item to show a more detailed view + +Rectangle { + id: page + 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 + + // Create a property to contain the visibility of the details. + // We can bind multiple element's opacity to this one property, + // rather than having a "PropertyChanges" line for each element we + // 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 + } + + // This mouse region covers the entire delegate. + // 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'; + } + + // Layout the page. Picture, title and ingredients at the top, method at the + // bottom. Note that elements that should not be visible in the list + // mode have their opacity set to wrapper.detailsOpacity. + Row { + id: topLayout + x: 10; y: 10; height: recipePic.height; width: parent.width + spacing: 10 + + Image { + id: recipePic + source: picture; width: 48; height: 48 + } + + Column { + 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 + opacity: wrapper.detailsOpacity + } + + Text { + text: ingredients + wrapMode: Text.WordWrap + width: parent.width + opacity: wrapper.detailsOpacity + } + } + } + + Item { + id: details + x: 10; width: parent.width-20 + anchors { top: topLayout.bottom; topMargin: 10; bottom: parent.bottom; bottomMargin: 10 } + opacity: wrapper.detailsOpacity + + Text { + id: methodTitle + anchors.top: parent.top + text: "Method" + font.pointSize: 12; font.bold: true + } + + Flickable { + id: flick + 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; top: flick.top } + source: "content/pics/moreUp.png" + opacity: flick.atYBeginning ? 0 : 1 + } + + Image { + 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 { + y: 10; anchors { right: background.right; rightMargin: 5 } + opacity: wrapper.detailsOpacity + text: "Close" + + onClicked: wrapper.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 + + // 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 } + } + + transitions: Transition { + // Make the state changes smooth + ParallelAnimation { + ColorAnimation { property: "color"; duration: 500 } + NumberAnimation { duration: 300; properties: "detailsOpacity,x,contentY,height,width" } + } + } + } + } + + // The actual list + ListView { + id: list + anchors.fill: parent + clip: true + model: Recipes + delegate: recipeDelegate + } +} diff --git a/examples/declarative/modelviews/listview/sections.qml b/examples/declarative/modelviews/listview/sections.qml new file mode 100644 index 0000000..21f9f03 --- /dev/null +++ b/examples/declarative/modelviews/listview/sections.qml @@ -0,0 +1,71 @@ +import Qt 4.7 + +//! [0] +Rectangle { + width: 200 + height: 240 + + // 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 + + Item { + id: desc + x: 5; height: layout.height + 4 + + Column { + 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 + Rectangle { color: "#FFFF88" } + } + + // The list + ListView { + id: myList + + 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 + } + } + } +} +//! [0] |
