diff options
Diffstat (limited to 'examples/declarative/listview/recipes.qml')
| -rw-r--r-- | examples/declarative/listview/recipes.qml | 76 |
1 files changed, 47 insertions, 29 deletions
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 } } |