diff options
author | Andrew den Exter <andrew.den-exter@nokia.com> | 2012-04-27 16:35:12 +1000 |
---|---|---|
committer | Qt by Nokia <qt-info@nokia.com> | 2012-04-30 04:33:55 +0200 |
commit | b0497cf5405e7ca95fa7a3eb51ff9c7f897c0e9e (patch) | |
tree | f2944d57e4780a5a56ac11735098c268018916ae /examples/quick/modelviews | |
parent | 15692017d5b94302305bf15cfd1dd34dcc8a3a9e (diff) |
Elaborate on drag and drop and model view examples with snippets.
Change-Id: I8a6874c4bb480ed9bcc59e743b97d439f053840e
Reviewed-by: Alan Alpert <alan.alpert@nokia.com>
Diffstat (limited to 'examples/quick/modelviews')
8 files changed, 73 insertions, 36 deletions
diff --git a/examples/quick/modelviews/gridview/gridview-example.qml b/examples/quick/modelviews/gridview/gridview-example.qml index ea3bb5cec9..bf7846f0c2 100644 --- a/examples/quick/modelviews/gridview/gridview-example.qml +++ b/examples/quick/modelviews/gridview/gridview-example.qml @@ -54,11 +54,16 @@ Rectangle { ListElement { name: "Todo List"; icon: "pics/TodoList_48.png" } ListElement { name: "Contacts"; icon: "pics/AddressBook_48.png" } } +//! [0] + GridView { + anchors.fill: parent + cellWidth: 100; cellHeight: 100 + focus: true + model: appModel - Component { - id: appDelegate + highlight: Rectangle { width: 80; height: 80; color: "lightsteelblue" } - Item { + delegate: Item { width: 100; height: 100 Image { @@ -76,18 +81,5 @@ Rectangle { } } } - - Component { - id: appHighlight - Rectangle { width: 80; height: 80; color: "lightsteelblue" } - } - - GridView { - anchors.fill: parent - cellWidth: 100; cellHeight: 100 - highlight: appHighlight - focus: true - model: appModel - delegate: appDelegate - } +//! [0] } diff --git a/examples/quick/modelviews/listview/dynamiclist.qml b/examples/quick/modelviews/listview/dynamiclist.qml index e6d43a0d61..0bd4e05cdc 100644 --- a/examples/quick/modelviews/listview/dynamiclist.qml +++ b/examples/quick/modelviews/listview/dynamiclist.qml @@ -84,8 +84,9 @@ Rectangle { // The delegate for each fruit in the model: Component { id: listDelegate - +//! [0] Item { +//! [0] id: delegateItem width: listView.width; height: 100 clip: true @@ -169,7 +170,7 @@ Rectangle { } // Animate adding and removing of items: - +//! [1] ListView.onAdd: SequentialAnimation { PropertyAction { target: delegateItem; property: "height"; value: 0 } NumberAnimation { target: delegateItem; property: "height"; to: 55; duration: 250; easing.type: Easing.InOutQuad } @@ -183,6 +184,7 @@ Rectangle { PropertyAction { target: delegateItem; property: "ListView.delayRemove"; value: false } } } +//! [1] } // The view: diff --git a/examples/quick/modelviews/listview/expandingdelegates.qml b/examples/quick/modelviews/listview/expandingdelegates.qml index 02d5edc1d1..bf0d0f642a 100644 --- a/examples/quick/modelviews/listview/expandingdelegates.qml +++ b/examples/quick/modelviews/listview/expandingdelegates.qml @@ -53,7 +53,7 @@ Rectangle { // 2. Details mode, which also shows the ingredients and method. Component { id: recipeDelegate - +//! [0] Item { id: recipe @@ -62,7 +62,7 @@ Rectangle { // rather than having a "PropertyChanges" line for each element we // want to fade. property real detailsOpacity : 0 - +//! [0] width: listView.width height: 70 @@ -78,6 +78,7 @@ Rectangle { // 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. +//! [1] MouseArea { anchors.fill: parent onClicked: recipe.state = 'Details'; @@ -86,6 +87,7 @@ Rectangle { // Lay out the page: picture, title and ingredients at the top, and method at the // bottom. Note that elements that should not be visible in the list // mode have their opacity set to recipe.detailsOpacity. + Row { id: topLayout x: 10; y: 10; height: recipeImage.height; width: parent.width @@ -96,7 +98,7 @@ Rectangle { width: 50; height: 50 source: picture } - +//! [1] Column { width: background.width - recipeImage.width - 20; height: recipeImage.height spacing: 5 @@ -121,12 +123,14 @@ Rectangle { } } +//! [2] Item { id: details x: 10; width: parent.width - 20 + anchors { top: topLayout.bottom; topMargin: 10; bottom: parent.bottom; bottomMargin: 10 } opacity: recipe.detailsOpacity - +//! [2] SmallText { id: methodTitle anchors.top: parent.top @@ -155,6 +159,7 @@ Rectangle { source: "content/pics/moreDown.png" opacity: flick.atYEnd ? 0 : 1 } +//! [3] } // A button to close the detailed view, i.e. set the state back to default (''). @@ -190,6 +195,7 @@ Rectangle { } } } +//! [3] } // The actual list diff --git a/examples/quick/modelviews/listview/highlight.qml b/examples/quick/modelviews/listview/highlight.qml index 239a946523..3f2a3dc0c4 100644 --- a/examples/quick/modelviews/listview/highlight.qml +++ b/examples/quick/modelviews/listview/highlight.qml @@ -76,6 +76,7 @@ Rectangle { } } +//! [0] // Define a highlight with customised movement between items. Component { id: highlightBar @@ -100,4 +101,5 @@ Rectangle { highlight: highlightBar highlightFollowsCurrentItem: false } +//! [0] } diff --git a/examples/quick/modelviews/listview/highlightranges.qml b/examples/quick/modelviews/listview/highlightranges.qml index 1cf5c06f45..be5a40d152 100644 --- a/examples/quick/modelviews/listview/highlightranges.qml +++ b/examples/quick/modelviews/listview/highlightranges.qml @@ -41,6 +41,7 @@ import QtQuick 2.0 import "content" +//! [0] Rectangle { id: root property int current: 0 @@ -57,6 +58,7 @@ Rectangle { to: 0 } } +//! [0] MouseArea{ id: ma z: 1 @@ -89,7 +91,7 @@ Rectangle { // The first ListView sets root.current whenever its currentIndex changes // due to keyboard interaction. // Flicking the third ListView with the mouse also changes root.current. - +//! [1] ListView { id: list1 height: 160; width: parent.width @@ -131,7 +133,7 @@ Rectangle { preferredHighlightBegin: 125; preferredHighlightEnd: 125 highlightRangeMode: ListView.StrictlyEnforceRange } - +//! [1] // The delegate for each list Component { id: petDelegate @@ -151,4 +153,6 @@ Rectangle { } } } +//! [2] } +//! [2] diff --git a/examples/quick/modelviews/modelviews.qml b/examples/quick/modelviews/modelviews.qml index ce0880c057..ab92fead4c 100644 --- a/examples/quick/modelviews/modelviews.qml +++ b/examples/quick/modelviews/modelviews.qml @@ -49,21 +49,51 @@ import "../../shared" as Examples This is a collection of small QML examples relating to model and view functionality. - GridView and PathView demonstrate usage of these elements to display views. + \section2 GridView and PathView demonstrate usage of these elements to display views. + \snippet examples/quick/modelviews/gridview/gridview-example.qml 0 - Dynamic List demonstrates runtime modification of a ListModel. + \section2 Dynamic List demonstrates animation of runtime additions and removals to a ListView. - Expanding Delegates demonstrates delegates that expand when activated. + The ListView.onAdd signal handler runs an animation when new items are added to the + view, and the ListView.onRemove another when they are removed. + \snippet examples/quick/modelviews/listview/dynamiclist.qml 0 + \snippet examples/quick/modelviews/listview/dynamiclist.qml 1 - Highlight demonstrates adding a custom highlight to a ListView. + \section2 Expanding Delegates demonstrates delegates that expand when activated. - Highlight Ranges shows the three different highlight range modes of ListView. + It has a complex delegate the size and appearance of which can change, displacing + other items in the view. + \snippet examples/quick/modelviews/listview/expandingdelegates.qml 0 + \snippet examples/quick/modelviews/listview/expandingdelegates.qml 1 + \snippet examples/quick/modelviews/listview/expandingdelegates.qml 2 + \snippet examples/quick/modelviews/listview/expandingdelegates.qml 3 - Sections demonstrates the various section headers and footers available to ListView. + \section2 Highlight demonstrates adding a custom highlight to a ListView. + \snippet examples/quick/modelviews/listview/highlight.qml 0 - Packages demonstrates using Packages to transition delegates between two views. + \section2 Highlight Ranges shows the three different highlight range modes of ListView. + \snippet examples/quick/modelviews/listview/highlightranges.qml 0 + \snippet examples/quick/modelviews/listview/highlightranges.qml 1 + \snippet examples/quick/modelviews/listview/highlightranges.qml 2 - VisualItemModel uses a VisualItemModel for the model instead of a ListModel. + \section2 Sections demonstrates the various section headers and footers available to ListView. + \snippet examples/quick/modelviews/listview/sections.qml 0 + + \section2 Packages demonstrates using Packages to transition delegates between two views. + + It has a Package which defines delegate items for each view and an item that can + be transferred between delegates. + + \snippet examples/quick/modelviews/package/Delegate.qml 0 + + A VisualDataModel allows the individual views to access their specific items from + the shared package delegate. + + \snippet examples/quick/modelviews/package/view.qml 0 + + \section2 VisualItemModel uses a VisualItemModel for the model instead of a ListModel. + + \snippet examples/quick/modelviews/visualitemmodel/visualitemmodel.qml 0 */ Item { diff --git a/examples/quick/modelviews/package/Delegate.qml b/examples/quick/modelviews/package/Delegate.qml index 3028318f10..14bba471af 100644 --- a/examples/quick/modelviews/package/Delegate.qml +++ b/examples/quick/modelviews/package/Delegate.qml @@ -40,7 +40,7 @@ import QtQuick 2.0 -//![0] +//! [0] Package { Text { id: listDelegate; width: parent.width; height: 25; text: 'Empty'; Package.name: 'list' } Text { id: gridDelegate; width: parent.width / 2; height: 50; text: 'Empty'; Package.name: 'grid' } @@ -75,4 +75,4 @@ Package { ] } } -//![0] +//! [0] diff --git a/examples/quick/modelviews/visualitemmodel/visualitemmodel.qml b/examples/quick/modelviews/visualitemmodel/visualitemmodel.qml index 2e012adec6..61a03ee1a4 100644 --- a/examples/quick/modelviews/visualitemmodel/visualitemmodel.qml +++ b/examples/quick/modelviews/visualitemmodel/visualitemmodel.qml @@ -50,6 +50,7 @@ Rectangle { height: 480 property bool printDestruction: false +//! [0] VisualItemModel { id: itemModel @@ -86,7 +87,7 @@ Rectangle { snapMode: ListView.SnapOneItem; flickDeceleration: 2000 cacheBuffer: 200 } - +//! [0] Rectangle { width: root.width; height: 30 anchors { top: view.bottom; bottom: parent.bottom } |