Commit 793a01d2 authored by Andrew den Exter's avatar Andrew den Exter Committed by Qt by Nokia

Update model view examples to common launcher format.

Change-Id: I8dc30a9ade3cbbfa91d51d85617975ad7d46ee15
Reviewed-by: 's avatarAndrew den Exter <andrew.den-exter@nokia.com>
Reviewed-by: 's avatarAlan Alpert <alan.alpert@nokia.com>
parent ee4202a5
......@@ -87,70 +87,84 @@ Rectangle {
Item {
id: delegateItem
width: listView.width; height: 55
width: listView.width; height: 100
clip: true
Row {
anchors.verticalCenter: parent.verticalCenter
spacing: 10
Column {
Image {
source: "content/pics/arrow-up.png"
MouseArea { anchors.fill: parent; onClicked: fruitModel.move(index, index-1, 1) }
}
Image { source: "content/pics/arrow-down.png"
MouseArea { anchors.fill: parent; onClicked: fruitModel.move(index, index+1, 1) }
}
Column {
id: arrows
anchors {
left: parent.left
verticalCenter: parent.verticalCenter
}
Column {
anchors.verticalCenter: parent.verticalCenter
Text {
text: name
font.pixelSize: 15
color: "white"
}
Row {
spacing: 5
Repeater {
model: attributes
Text { text: description; color: "White" }
}
}
Image {
source: "content/pics/arrow-up.png"
MouseArea { anchors.fill: parent; onClicked: fruitModel.move(index, index-1, 1) }
}
Image { source: "content/pics/arrow-down.png"
MouseArea { anchors.fill: parent; onClicked: fruitModel.move(index, index+1, 1) }
}
}
Row {
anchors.verticalCenter: parent.verticalCenter
anchors.right: parent.right
spacing: 10
PressAndHoldButton {
anchors.verticalCenter: parent.verticalCenter
source: "content/pics/plus-sign.png"
onClicked: fruitModel.setProperty(index, "cost", cost + 0.25)
Column {
anchors {
left: arrows.right
horizontalCenter: parent.horizontalCenter;
bottom: parent.verticalCenter
}
Text {
id: costText
anchors.verticalCenter: parent.verticalCenter
text: '$' + Number(cost).toFixed(2)
Text {
anchors.horizontalCenter: parent.horizontalCenter
text: name
font.pixelSize: 15
color: "white"
font.bold: true
}
Row {
anchors.horizontalCenter: parent.horizontalCenter
spacing: 5
Repeater {
model: attributes
Text { text: description; color: "White" }
}
}
}
PressAndHoldButton {
anchors.verticalCenter: parent.verticalCenter
source: "content/pics/minus-sign.png"
onClicked: fruitModel.setProperty(index, "cost", Math.max(0,cost-0.25))
Item {
anchors {
left: arrows.right
horizontalCenter: parent.horizontalCenter;
top: parent.verticalCenter
bottom: parent.bottom
}
Image {
source: "content/pics/list-delete.png"
MouseArea { anchors.fill:parent; onClicked: fruitModel.remove(index) }
Row {
anchors.centerIn: parent
spacing: 10
PressAndHoldButton {
anchors.verticalCenter: parent.verticalCenter
source: "content/pics/plus-sign.png"
onClicked: fruitModel.setProperty(index, "cost", cost + 0.25)
}
Text {
id: costText
anchors.verticalCenter: parent.verticalCenter
text: '$' + Number(cost).toFixed(2)
font.pixelSize: 15
color: "white"
font.bold: true
}
PressAndHoldButton {
anchors.verticalCenter: parent.verticalCenter
source: "content/pics/minus-sign.png"
onClicked: fruitModel.setProperty(index, "cost", Math.max(0,cost-0.25))
}
Image {
source: "content/pics/list-delete.png"
MouseArea { anchors.fill:parent; onClicked: fruitModel.remove(index) }
}
}
}
......@@ -174,12 +188,17 @@ Rectangle {
// The view:
ListView {
id: listView
anchors.fill: parent; anchors.margins: 20
anchors {
left: parent.left; top: parent.top;
right: parent.right; bottom: buttons.top;
margins: 20
}
model: fruitModel
delegate: listDelegate
}
Row {
id: buttons
anchors { left: parent.left; bottom: parent.bottom; margins: 20 }
spacing: 10
......
......@@ -69,6 +69,10 @@ Rectangle {
transitions: Transition {
NumberAnimation { properties: "x"; duration: 200 }
}
MouseArea {
anchors.fill: parent
onClicked: wrapper.ListView.view.currentIndex = index
}
}
}
......
......@@ -44,7 +44,27 @@ import "content"
Rectangle {
id: root
property int current: 0
width: 600; height: 300
// Example index automation for convenience, disabled on click or tap
SequentialAnimation on current {
id: anim
loops: -1
NumberAnimation {
duration: 5000
to: aModel.count - 1
}
NumberAnimation {
duration: 5000
to: 0
}
}
MouseArea{
id: ma
z: 1
anchors.fill: parent
onClicked: {ma.enabled = false; anim.running = false;}
}
width: 320; height: 480
// This example shows the same model in three different ListView items,
// with different highlight ranges. The highlight ranges are set by the
......@@ -72,9 +92,10 @@ Rectangle {
ListView {
id: list1
width: 200; height: parent.height
model: PetsModel {}
height: 160; width: parent.width
model: PetsModel {id: aModel}
delegate: petDelegate
orientation: ListView.Horizontal
highlight: Rectangle { color: "lightsteelblue" }
currentIndex: root.current
......@@ -84,10 +105,11 @@ Rectangle {
ListView {
id: list2
x: list1.width
width: 200; height: parent.height
y: list1.height
height: 160; width: parent.width
model: PetsModel {}
delegate: petDelegate
orientation: ListView.Horizontal
highlight: Rectangle { color: "yellow" }
currentIndex: root.current
......@@ -97,10 +119,11 @@ Rectangle {
ListView {
id: list3
x: list1.width + list2.width
width: 200; height: parent.height
y: list1.height + list2.height
height: 160; width: parent.width
model: PetsModel {}
delegate: petDelegate
orientation: ListView.Horizontal
highlight: Rectangle { color: "yellow" }
currentIndex: root.current
......@@ -112,11 +135,20 @@ Rectangle {
// The delegate for each list
Component {
id: petDelegate
Column {
width: 200
Text { text: 'Name: ' + name }
Text { text: 'Type: ' + type }
Text { text: 'Age: ' + age }
Item {
width: 160
height: column.height
Column {
id: column
Text { text: 'Name: ' + name }
Text { text: 'Type: ' + type }
Text { text: 'Age: ' + age }
}
MouseArea {
anchors.fill: parent
onClicked: wrapper.ListView.view.currentIndex = index
}
}
}
}
......@@ -37,105 +37,5 @@
** $QT_END_LICENSE$
**
****************************************************************************/
import QtQuick 2.0
Rectangle {
width: 480; height: 640
Component {
id: numberDelegate
Text {
id: numberText
anchors { left: parent.left; right: parent.right }
text: number
horizontalAlignment: Text.AlignHCenter
font.pixelSize: 18
Text {
anchors { left: parent.left; baseline: parent.baseline }
text: index
horizontalAlignment: Text.AlignLeft
font.pixelSize: 12
}
Text {
anchors { right: parent.right; baseline: parent.baseline }
text: numberText.VisualDataModel.itemsIndex
horizontalAlignment: Text.AlignRight
font.pixelSize: 12
}
}
}
ListView {
anchors {
left: parent.left; top: parent.top;
right: parent.horizontalCenter; bottom: button.top
leftMargin: 2; topMargin: 2; rightMargin: 1; bottomMargin: 2
}
model: ListModel {
id: unsortedModel
}
delegate: numberDelegate
}
ListView {
anchors {
left: parent.horizontalCenter; top: parent.top;
right: parent.right; bottom: button.top
leftMargin: 1; topMargin: 2; rightMargin: 2; bottomMargin: 2
}
model: VisualDataModel {
model: unsortedModel
delegate: numberDelegate
items.onChanged: {
for (var i = 0; i < inserted.length; ++i) {
for (var j = inserted[i].index; j < inserted[i].index + inserted[i].count; ++j) {
var number = items.get(j).model.number
for (var l = 0, k = 0; l < unsortedModel.count; ++l) {
if (l == inserted[k].index) {
l += inserted[k].count - 1
++k
} else if (number < items.get(l).model.number) {
items.move(j, l, 1)
break
}
}
inserted[i].index += 1;
inserted[i].count -= 1;
}
}
}
}
}
Rectangle {
id: button
anchors { left: parent.left; right: parent.right; bottom: parent.bottom; margins: 2 }
height: moreText.implicitHeight + 4
color: "black"
Text {
id: moreText
anchors.fill: parent
text: "More"
color: "white"
font.pixelSize: 18
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
}
MouseArea {
anchors.fill: parent
onClicked: unsortedModel.append({ "number": Math.floor(Math.random() * 100) })
}
}
}
#include "../../shared/shared.h"
DECLARATIVE_EXAMPLE_MAIN(modelviews)
TEMPLATE = subdirs
TEMPLATE = app
SUBDIRS += \
abstractitemmodel \
objectlistmodel \
stringlistmodel
QT += quick qml
SOURCES += main.cpp
target.path = $$[QT_INSTALL_EXAMPLES]/qtdeclarative/qtquick/modelviews
qml.files = \
modelviews.qml \
gridview \
listview \
package \
parallax \
pathview \
visualdatamodel \
visualitemmodel
qml.path = $$[QT_INSTALL_EXAMPLES]/qtdeclarative/qtquick/modelviews
INSTALLS += target qml
......@@ -39,26 +39,49 @@
****************************************************************************/
import QtQuick 2.0
import "../../shared"
import "../../shared" as Examples
/*!
\title QtQuick Examples - ModelViews
\example quick/modelviews
\brief This is a collection of QML drag and drop examples
\image qml-modelviews-example.png
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.
Dynamic List demonstrates runtime modification of a ListModel.
Expanding Delegates demonstrates delegates that expand when activated.
Highlight demonstrates adding a custom highlight to a ListView.
Highlight Ranges shows the three different highlight range modes of ListView.
Sections demonstrates the various section headers and footers available to ListView.
Packages demonstrates using Packages to transition delegates between two views.
VisualItemModel uses a VisualItemModel for the model instead of a ListModel.
*/
Item {
height: 480
width: 480
LauncherList {
width: 320
Examples.LauncherList {
id: ll
anchors.fill: parent
Component.onCompleted: {
addExample("Dynamic List", "A ListView harboring dynamic data", Qt.resolvedUrl("listview/dynamiclist.qml"));
addExample("Expanding Delegates", "Delegates that expand to fill the list when clicked", Qt.resolvedUrl("listview/expandingdelegates.qml"));
addExample("Highlight", "Adding a highlight to the current item", Qt.resolvedUrl("listview/highlight.qml"));
addExample("Sections", "A ListView with section headers", Qt.resolvedUrl("listview/sections.qml"));
addExample("GridView", "A view laid out in a grid", Qt.resolvedUrl("gridview/gridview-example.qml"));
addExample("PathView", "A view laid out along a path", Qt.resolvedUrl("pathview/pathview-example.qml"));
addExample("Package", "Using a package to transition items between views", Qt.resolvedUrl("package/view.qml"));
addExample("Parallax", "Adds a background and a parallax effect to a ListView", Qt.resolvedUrl("parallax/parallax.qml"));
addExample("Slideshow", "A model demonstrating delayed image loading", Qt.resolvedUrl("visualdatamodel/slideshow.qml"));
addExample("Sorted Model", "Two views on a model, one of which is sorted", Qt.resolvedUrl("visualdatamodel/sortedmodel.qml"));
addExample("VisualItemModel", "A model that consists of the actual Items", Qt.resolvedUrl("visualitemmodel/visualitemmodel.qml"));
addExample("GridView", "A simple GridView", Qt.resolvedUrl("gridview/gridview-example.qml"))
addExample("Dynamic List", "A dynamically alterable list", Qt.resolvedUrl("listview/dynamiclist.qml"))
addExample("Expanding Delegates", "A ListView with delegates that expand", Qt.resolvedUrl("listview/expandingdelegates.qml"))
addExample("Highlight", "A ListView with a custom highlight", Qt.resolvedUrl("listview/highlight.qml"))
addExample("Highlight Ranges", "The three highlight ranges of ListView", Qt.resolvedUrl("listview/highlightranges.qml"))
addExample("Sections", "ListView section headers and footers", Qt.resolvedUrl("listview/sections.qml"))
addExample("Packages", "Transitions between a ListView and GridView", Qt.resolvedUrl("package/view.qml"))
addExample("PathView", "A simple PathView", Qt.resolvedUrl("pathview/pathview-example.qml"))
addExample("VisualItemModel", "Using a VisualItemModel", Qt.resolvedUrl("visualitemmodel/visualitemmodel.qml"))
}
}
}
......@@ -42,26 +42,16 @@ import QtQuick 2.0
//![0]
Package {
Text { id: listDelegate; width: 200; height: 25; text: 'Empty'; Package.name: 'list' }
Text { id: gridDelegate; width: 100; height: 50; text: 'Empty'; Package.name: 'grid' }
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' }
Rectangle {
id: wrapper
width: 200; height: 25
width: parent.width; height: 25
color: 'lightsteelblue'
Text { text: display; anchors.centerIn: parent }
MouseArea {
anchors.fill: parent
onClicked: {
if (wrapper.state == 'inList')
wrapper.state = 'inGrid';
else
wrapper.state = 'inList';
}
}
state: 'inList'
state: root.upTo > index ? 'inGrid' : 'inList'
states: [
State {
name: 'inList'
......
......@@ -41,9 +41,16 @@
import QtQuick 2.0
Rectangle {
id: root
color: "white"
width: 400
height: 200
width: 320
height: 480
property int upTo: 0
SequentialAnimation on upTo {
loops: -1
NumberAnimation { to: 8; duration: 3500 }
NumberAnimation { to: 0; duration: 3500 }
}
ListModel {
id: myModel
......@@ -64,17 +71,22 @@ Rectangle {
}
ListView {
width: 200; height:200
id: lv
height: parent.height/2
width: parent.width
model: visualModel.parts.list
}
GridView {
x: 200; width: 200; height:200
y: parent.height/2
height: parent.height/2
width: parent.width
cellWidth: width / 2
cellHeight: 50
model: visualModel.parts.grid
}
//![0]
Text {
anchors.bottom: parent.bottom
text: "Tap a delegate to move between views"
}
}
......@@ -69,7 +69,7 @@ Rectangle {
anchors { top: parent.top; topMargin: 10; horizontalCenter: parent.horizontalCenter }
width: 300; height: 400
clip: true;
source: "../../samegame/samegame.qml"
source: "../../../demos/samegame/samegame.qml"
}
}
}
......
TEMPLATE = subdirs
SUBDIRS = accessibility \
animation \
draganddrop
draganddrop \
#canvas \
#imageelements \
#keyinteraction \
#modelviews \
modelviews \
#mousearea \
#openglunderqml \
#painteditem \
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment