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) }
+ }
}
}
// 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
transitions: Transition {
NumberAnimation { properties: "x"; duration: 200 }
}
+ MouseArea {
+ anchors.fill: parent
+ onClicked: wrapper.ListView.view.currentIndex = index
+ }
}
}
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
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
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
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
// 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
+ }
}
}
}
--- /dev/null
+/****************************************************************************
+**
+** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/
+**
+** This file is part of the examples of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** You may use this file under the terms of the BSD license as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+** * Redistributions of source code must retain the above copyright
+** notice, this list of conditions and the following disclaimer.
+** * Redistributions in binary form must reproduce the above copyright
+** notice, this list of conditions and the following disclaimer in
+** the documentation and/or other materials provided with the
+** distribution.
+** * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
+** the names of its contributors may be used to endorse or promote
+** products derived from this software without specific prior written
+** permission.
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+#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
****************************************************************************/
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"))
}
}
}
//![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'
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
}
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"
}
}
anchors { top: parent.top; topMargin: 10; horizontalCenter: parent.horizontalCenter }
width: 300; height: 400
clip: true;
- source: "../../samegame/samegame.qml"
+ source: "../../../demos/samegame/samegame.qml"
}
}
}
+++ /dev/null
-/****************************************************************************
-**
-** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
-** Contact: http://www.qt-project.org/
-**
-** This file is part of the examples of the Qt Toolkit.
-**
-** $QT_BEGIN_LICENSE:BSD$
-** You may use this file under the terms of the BSD license as follows:
-**
-** "Redistribution and use in source and binary forms, with or without
-** modification, are permitted provided that the following conditions are
-** met:
-** * Redistributions of source code must retain the above copyright
-** notice, this list of conditions and the following disclaimer.
-** * Redistributions in binary form must reproduce the above copyright
-** notice, this list of conditions and the following disclaimer in
-** the documentation and/or other materials provided with the
-** distribution.
-** * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
-** the names of its contributors may be used to endorse or promote
-** products derived from this software without specific prior written
-** permission.
-**
-** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
-** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
-** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
-** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
-** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
-** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
-** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
-** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
-** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
-** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
-** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
-**
-** $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) })
- }
- }
-}
TEMPLATE = subdirs
SUBDIRS = accessibility \
animation \
- draganddrop
+ draganddrop \
#canvas \
#imageelements \
#keyinteraction \
- #modelviews \
+ modelviews \
#mousearea \
#openglunderqml \
#painteditem \
projects / profile / ivi / qtdeclarative.git / commitdiff