examples/declarative/modelviews/listview/dynamiclist.qml

   1 /****************************************************************************
   2 **
   3 ** Copyright (C) 2011 Nokia Corporation and/or its subsidiary(-ies).
   4 ** All rights reserved.
   5 ** Contact: Nokia Corporation (qt-info@nokia.com)
   6 **
   7 ** This file is part of the examples of the Qt Toolkit.
   8 **
   9 ** $QT_BEGIN_LICENSE:BSD$
  10 ** You may use this file under the terms of the BSD license as follows:
  11 **
  12 ** "Redistribution and use in source and binary forms, with or without
  13 ** modification, are permitted provided that the following conditions are
  14 ** met:
  15 **   * Redistributions of source code must retain the above copyright
  16 **     notice, this list of conditions and the following disclaimer.
  17 **   * Redistributions in binary form must reproduce the above copyright
  18 **     notice, this list of conditions and the following disclaimer in
  19 **     the documentation and/or other materials provided with the
  20 **     distribution.
  21 **   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
  22 **     the names of its contributors may be used to endorse or promote
  23 **     products derived from this software without specific prior written
  24 **     permission.
  25 **
  26 ** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
  27 ** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
  28 ** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
  29 ** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
  30 ** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
  31 ** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
  32 ** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
  33 ** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
  34 ** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
  35 ** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
  36 ** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
  37 ** $QT_END_LICENSE$
  38 **
  39 ****************************************************************************/
  40 import QtQuick 1.0
  41 import "content"
  42
  43 // This example shows how items can be dynamically added to and removed from
  44 // a ListModel, and how these list modifications can be animated.
  45
  46 Rectangle {
  47     id: container
  48     width: 500; height: 400
  49     color: "#343434"
  50
  51     // The model:
  52     ListModel {
  53         id: fruitModel
  54
  55         ListElement {
  56             name: "Apple"; cost: 2.45
  57             attributes: [
  58                 ListElement { description: "Core" },
  59                 ListElement { description: "Deciduous" }
  60             ]
  61         }
  62         ListElement {
  63             name: "Banana"; cost: 1.95
  64             attributes: [
  65                 ListElement { description: "Tropical" },
  66                 ListElement { description: "Seedless" }
  67             ]
  68         }
  69         ListElement {
  70             name: "Cumquat"; cost: 3.25
  71             attributes: [
  72                 ListElement { description: "Citrus" }
  73             ]
  74         }
  75         ListElement {
  76             name: "Durian"; cost: 9.95
  77             attributes: [
  78                 ListElement { description: "Tropical" },
  79                 ListElement { description: "Smelly" }
  80             ]
  81         }
  82     }
  83
  84     // The delegate for each fruit in the model:
  85     Component {
  86         id: listDelegate
  87
  88         Item {
  89             id: delegateItem
  90             width: listView.width; height: 55
  91             clip: true
  92
  93             Row {
  94                 anchors.verticalCenter: parent.verticalCenter
  95                 spacing: 10
  96
  97                 Column {
  98                     Image {
  99                         source: "content/pics/arrow-up.png"
 100                         MouseArea { anchors.fill: parent; onClicked: fruitModel.move(index, index-1, 1) }
 101                     }
 102                     Image { source: "content/pics/arrow-down.png"
 103                         MouseArea { anchors.fill: parent; onClicked: fruitModel.move(index, index+1, 1) }
 104                     }
 105                 }
 106
 107                 Column {
 108                     anchors.verticalCenter: parent.verticalCenter
 109
 110                     Text {
 111                         text: name
 112                         font.pixelSize: 15
 113                         color: "white"
 114                     }
 115                     Row {
 116                         spacing: 5
 117                         Repeater {
 118                             model: attributes
 119                             Text { text: description; color: "White" }
 120                         }
 121                     }
 122                 }
 123             }
 124
 125             Row {
 126                 anchors.verticalCenter: parent.verticalCenter
 127                 anchors.right: parent.right
 128                 spacing: 10
 129
 130                 PressAndHoldButton {
 131                     anchors.verticalCenter: parent.verticalCenter
 132                     source: "content/pics/plus-sign.png"
 133                     onClicked: fruitModel.setProperty(index, "cost", cost + 0.25)
 134                 }
 135
 136                 Text {
 137                     id: costText
 138                     anchors.verticalCenter: parent.verticalCenter
 139                     text: '$' + Number(cost).toFixed(2)
 140                     font.pixelSize: 15
 141                     color: "white"
 142                     font.bold: true
 143                 }
 144
 145                 PressAndHoldButton {
 146                     anchors.verticalCenter: parent.verticalCenter
 147                     source: "content/pics/minus-sign.png"
 148                     onClicked: fruitModel.setProperty(index, "cost", Math.max(0,cost-0.25))
 149                 }
 150
 151                 Image {
 152                     source: "content/pics/list-delete.png"
 153                     MouseArea { anchors.fill:parent; onClicked: fruitModel.remove(index) }
 154                 }
 155             }
 156
 157             // Animate adding and removing of items:
 158
 159             ListView.onAdd: SequentialAnimation {
 160                 PropertyAction { target: delegateItem; property: "height"; value: 0 }
 161                 NumberAnimation { target: delegateItem; property: "height"; to: 55; duration: 250; easing.type: Easing.InOutQuad }
 162             }
 163
 164             ListView.onRemove: SequentialAnimation {
 165                 PropertyAction { target: delegateItem; property: "ListView.delayRemove"; value: true }
 166                 NumberAnimation { target: delegateItem; property: "height"; to: 0; duration: 250; easing.type: Easing.InOutQuad }
 167
 168                 // Make sure delayRemove is set back to false so that the item can be destroyed
 169                 PropertyAction { target: delegateItem; property: "ListView.delayRemove"; value: false }
 170             }
 171         }
 172     }
 173
 174     // The view:
 175     ListView {
 176         id: listView
 177         anchors.fill: parent; anchors.margins: 20
 178         model: fruitModel
 179         delegate: listDelegate
 180     }
 181
 182     Row {
 183         anchors { left: parent.left; bottom: parent.bottom; margins: 20 }
 184         spacing: 10
 185
 186         TextButton {
 187             text: "Add an item"
 188             onClicked: {
 189                 fruitModel.append({
 190                     "name": "Pizza Margarita",
 191                     "cost": 5.95,
 192                     "attributes": [{"description": "Cheese"}, {"description": "Tomato"}]
 193                 })
 194             }
 195         }
 196
 197         TextButton {
 198             text: "Remove all items"
 199             onClicked: fruitModel.clear()
 200         }
 201     }
 202 }
 203