diff options
Diffstat (limited to 'examples/declarative/listview/recipes.qml')
| -rw-r--r-- | examples/declarative/listview/recipes.qml | 289 |
1 files changed, 204 insertions, 85 deletions
diff --git a/examples/declarative/listview/recipes.qml b/examples/declarative/listview/recipes.qml index 6826b78..0f6324f 100644 --- a/examples/declarative/listview/recipes.qml +++ b/examples/declarative/listview/recipes.qml @@ -1,85 +1,204 @@ -<!-- This example illustrates expanding a list item to show a more detailed view --> -<?qtfx namespacepath:=content ?> -<Rect id="page" width="400" height="240" color="black"> - <resources> - <!-- - 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, - rather than having a "SetProperty" line for each element we - want to fade. - --> - <properties><Property name="detailsOpacity" value="0" type="real"/></properties> - <!-- A simple rounded rectangle for the background --> - <Rect id="background" x="1" y="2" width="{parent.width-2}" height="{parent.height-4}" color="#FEFFEE" pen.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. - --> - <MouseRegion 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. - --> - <HorizontalLayout id="topLayout" x="10" y="10" spacing="10" height="{recipePic.height}" width="{parent.width}"> - <Image id="recipePic" src="{picture}" width="48" height="48"/> - <VerticalLayout height="{recipePic.height}" spacing="5" width="{background.width-recipePic.width-20}"> - <Text id="name" text="{title}" font.bold="true" font.size="16"/> - <Text opacity="{wrapper.detailsOpacity}" text="Ingredients" font.size="12" font.bold="true"/> - <Text opacity="{wrapper.detailsOpacity}" text="{ingredients}" wrap="true" width="{parent.width}"/> - </VerticalLayout> - </HorizontalLayout> - <Item id="details" x="10" width="{parent.width-20}" anchors.top="{topLayout.bottom}" anchors.topMargin="10" - anchors.bottom="{parent.bottom}" anchors.bottomMargin="10" opacity="{wrapper.detailsOpacity}"> - <Text id="methodTitle" text="Method" font.size="12" font.bold="true" anchors.top="{parent.top}"/> - <Flickable id="flick" anchors.top="{methodTitle.bottom}" anchors.bottom="{parent.bottom}" width="{parent.width}" viewportHeight="{methodText.height}" clip="true"> - <Text id="methodText" text="{method}" wrap="true" width="{details.width}"/> - </Flickable> - <Image anchors.right="{flick.right}" anchors.top="{flick.top}" src="content/pics/moreUp.png" opacity="{flick.atYBeginning ? 0 : 1}"/> - <Image anchors.right="{flick.right}" anchors.bottom="{flick.bottom}" src="content/pics/moreDown.png" opacity="{flick.atYEnd ? 0 : 1}"/> - </Item> - <!-- 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 = ''"/> - <!-- Make the default height equal the hight of the picture, plus margin. --> - <height>68</height> - - <states> - <State name="Details"> - <SetProperty target="{background}" property="color" value="white" /> - <!-- Make the picture bigger --> - <SetProperties target="{recipePic}" width="128" height="128" /> - <!-- Make details visible --> - <SetProperties target="{wrapper}" detailsOpacity="1" x="0"/> - <!-- Make the detailed view fill the entire list area --> - <SetProperty target="{wrapper}" property="height" value="{List.height}"/> - <!-- Move the list so that this item is at the top. --> - <SetProperty target="{wrapper.ListView.view}" property="yPosition" value="{wrapper.y}"/> - <!-- Disallow flicking while we're in detailed view --> - <SetProperty target="{wrapper.ListView.view}" property="locked" value="1"/> - </State> - </states> - - <transitions> - <Transition> - <!-- Make the state changes smooth --> - <ParallelAnimation> - <ColorAnimation duration="500" /> - <NumericAnimation duration="300" properties="detailsOpacity,x,yPosition,height,width"/> - </ParallelAnimation> - </Transition> - </transitions> - </Item> - </Component> - </resources> - - <!-- The actual list --> - <ListView id="List" model="{Recipies}" anchors.fill="{parent}" clip="true" delegate="{recipeDelegate}"/> -</Rect> +import "content" +// This example illustrates expanding a list item to show a more detailed view +Rect { + id: page + width: 400 + height: 240 + color: "black" + resources: [ + // 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, + // rather than having a "SetProperty" line for each element we + // want to fade. + properties: Property { + name: "detailsOpacity" + value: 0 + type: "real" + } + // A simple rounded rectangle for the background + Rect { + id: background + x: 1 + y: 2 + width: parent.width-2 + height: parent.height-4 + color: "#FEFFEE" + pen.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. + MouseRegion { + 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. + HorizontalLayout { + id: topLayout + x: 10 + y: 10 + spacing: 10 + height: recipePic.height + width: parent.width + Image { + id: recipePic + src: picture + width: 48 + height: 48 + } + VerticalLayout { + height: recipePic.height + spacing: 5 + width: background.width-recipePic.width-20 + Text { + id: name + text: title + font.bold: true + font.size: 16 + } + Text { + opacity: wrapper.detailsOpacity + text: "Ingredients" + font.size: 12 + font.bold: true + } + Text { + opacity: wrapper.detailsOpacity + text: ingredients + wrap: true + width: parent.width + } + } + } + Item { + id: details + x: 10 + width: parent.width-20 + anchors.top: topLayout.bottom + anchors.topMargin: 10 + anchors.bottom: parent.bottom + anchors.bottomMargin: 10 + opacity: wrapper.detailsOpacity + Text { + id: methodTitle + text: "Method" + font.size: 12 + font.bold: true + anchors.top: parent.top + } + Flickable { + id: flick + anchors.top: methodTitle.bottom + anchors.bottom: parent.bottom + width: parent.width + viewportHeight: methodText.height + clip: true + Text { + id: methodText + text: method + wrap: true + width: details.width + } + } + Image { + anchors.right: flick.right + anchors.top: flick.top + src: "content/pics/moreUp.png" + opacity: flick.atYBeginning ? 0 : 1 + } + Image { + anchors.right: flick.right + anchors.bottom: flick.bottom + src: "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 = '' } + } + // Make the default height equal the hight of the picture, plus margin. + height: 68 + states: [ + State { + name: "Details" + SetProperty { + target: background + property: "color" + value: "white" + } + // Make the picture bigger + SetProperties { + target: recipePic + width: 128 + height: 128 + } + // Make details visible + SetProperties { + target: wrapper + detailsOpacity: 1 + x: 0 + } + // Make the detailed view fill the entire list area + SetProperty { + target: wrapper + property: "height" + value: List.height + } + // Move the list so that this item is at the top. + SetProperty { + target: wrapper.ListView.view + property: "yPosition" + value: wrapper.y + } + // Disallow flicking while we're in detailed view + SetProperty { + target: wrapper.ListView.view + property: "locked" + value: 1 + } + } + ] + transitions: [ + Transition { + // Make the state changes smooth + ParallelAnimation { + ColorAnimation { + duration: 500 + } + NumericAnimation { + duration: 300 + properties: "detailsOpacity,x,yPosition,height,width" + } + } + } + ] + } + } + ] + // The actual list + ListView { + id: List + model: Recipies + anchors.fill: parent + clip: true + delegate: recipeDelegate + } +} |