diff options
Diffstat (limited to 'examples/declarative/listview')
| -rw-r--r-- | examples/declarative/listview/highlight.qml | 133 | ||||
| -rw-r--r-- | examples/declarative/listview/listview.qml | 184 | ||||
| -rw-r--r-- | examples/declarative/listview/recipes.qml | 289 |
3 files changed, 384 insertions, 222 deletions
diff --git a/examples/declarative/listview/highlight.qml b/examples/declarative/listview/highlight.qml index 5ce7acb..cbadb72 100644 --- a/examples/declarative/listview/highlight.qml +++ b/examples/declarative/listview/highlight.qml @@ -1,56 +1,77 @@ -<Rect width="400" height="300" 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. - 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"> - <VerticalLayout> - <Text text="{'Name: ' + name}"/> - <Text text="{'Type: ' + type}"/> - <Text text="{'Age: ' + age}"/> - </VerticalLayout> - - <!-- - Use the ListView.isCurrentItem attached property to - indent the item if it is the current item. - --> - <states> - <State name="Current" when="{Wrapper.ListView.isCurrentItem}"> - <SetProperty target="{Wrapper}" property="x" value="10"/> - </State> - </states> - <transitions> - <Transition> - <NumericAnimation properties="x" duration="200" /> - </Transition> - </transitions> - </Item> - </Component> - - <!-- - Specify a highlight with custom movement. Note that autoHighlight - is set to false in the ListView so that we can control how the - highlight moves to the current item. - --> - <Component id="PetHighlight"> - <Rect width="200" height="50" color="#FFFF88"> - <y> - <Follow source="{List1.current.y}" spring="3" damping="0.1"/> - </y> - </Rect> - </Component> - - <ListView id="List1" width="200" height="{parent.height}" model="{MyPetsModel}" - delegate="{PetDelegate}" highlight="{PetHighlight}" autoHighlight="false" - focus="true"/> - -</Rect> +Rect { + width: 400 + height: 300 + 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. + // 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 + VerticalLayout { + 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 + SetProperty { + target: Wrapper + property: "x" + value: 10 + } + } + ] + transitions: [ + Transition { + NumericAnimation { + properties: "x" + duration: 200 + } + } + ] + } + } + // Specify a highlight with custom movement. Note that autoHighlight + // is set to false in the ListView so that we can control how the + // highlight moves to the current item. + Component { + id: PetHighlight + Rect { + width: 200 + height: 50 + color: "#FFFF88" + y: Follow { + source: List1.current.y + spring: 3 + damping: 0.1 + } + } + } + ListView { + id: List1 + width: 200 + height: parent.height + model: MyPetsModel + delegate: PetDelegate + highlight: PetHighlight + autoHighlight: false + focus: true + } +} diff --git a/examples/declarative/listview/listview.qml b/examples/declarative/listview/listview.qml index 6cacdd1..b71ed4e 100644 --- a/examples/declarative/listview/listview.qml +++ b/examples/declarative/listview/listview.qml @@ -1,81 +1,103 @@ -<Rect width="600" height="300" 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. - 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"> - <VerticalLayout> - <Text text="{'Name: ' + name}"/> - <Text text="{'Type: ' + type}"/> - <Text text="{'Age: ' + age}"/> - </VerticalLayout> - </Item> - </Component> - - <!-- - Define a highlight component. Just one of these will be instantiated - by each ListView and placed behind the current item. - --> - <Component id="PetHighlight"> - <Rect color="#FFFF88"/> - </Component> - - <!-- - Show the model in three lists, with different currentItemPositioning. - currentItemPositioning determines how the list behaves when the - current item changes. 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, Free, 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. - - Snap currentItemPositioning attempts to keep the current item - aligned with the snapPosition by scrolling the view, however the - items will not scroll beyond the beginning or end of the view. - - SnapAuto currentItemPositioning always keeps the current item on - the snapPosition by scrolling the view. It also automatically - sets the current item as is scrolled with the mouse. 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}" - currentItemPositioning="Snap" snapPosition="125" - currentIndex="{List1.currentIndex}"/> - - <ListView id="List3" x="400" width="200" height="{parent.height}" model="{MyPetsModel}" - delegate="{PetDelegate}" - currentItemPositioning="SnapAuto" snapPosition="125" - currentIndex="{List1.currentIndex}"> - <children> - <!-- - Position a static highlight rather than a normal highlight so that - when the view is flicked, the highlight does not move. - By positioning the highlight at the same position as the snapPosition - the item under the highlight will always be the current item. - Note that we specify the 'children' property. This is because - the default property of a ListView is 'delegate'. - --> - <Rect y="125" width="200" height="50" color="#FFFF88" z="-1"/> - </children> - </ListView> - -</Rect> +Rect { + width: 600 + height: 300 + 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. + // 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 + VerticalLayout { + 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 + Rect { + color: "#FFFF88" + } + } + // Show the model in three lists, with different currentItemPositioning. + // currentItemPositioning determines how the list behaves when the + // current item changes. 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, Free, 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. + // Snap currentItemPositioning attempts to keep the current item + // aligned with the snapPosition by scrolling the view, however the + // items will not scroll beyond the beginning or end of the view. + // SnapAuto currentItemPositioning always keeps the current item on + // the snapPosition by scrolling the view. It also automatically + // sets the current item as is scrolled with the mouse. 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 + currentItemPositioning: "Snap" + snapPosition: 125 + currentIndex: List1.currentIndex + } + ListView { + id: List3 + x: 400 + width: 200 + height: parent.height + model: MyPetsModel + delegate: PetDelegate + currentItemPositioning: "SnapAuto" + snapPosition: 125 + currentIndex: List1.currentIndex + children: [ + // Position a static highlight rather than a normal highlight so that + // when the view is flicked, the highlight does not move. + // By positioning the highlight at the same position as the snapPosition + // the item under the highlight will always be the current item. + // Note that we specify the 'children' property. This is because + // the default property of a ListView is 'delegate'. + Rect { + y: 125 + width: 200 + height: 50 + color: "#FFFF88" + z: -1 + } + ] + } +} 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 + } +} |