examples/quick/positioners/positioners.qml

   1 /****************************************************************************
   2 **
   3 ** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
   4 ** Contact: http://www.qt-project.org/
   5 **
   6 ** This file is part of the examples of the Qt Toolkit.
   7 **
   8 ** $QT_BEGIN_LICENSE:BSD$
   9 ** You may use this file under the terms of the BSD license as follows:
  10 **
  11 ** "Redistribution and use in source and binary forms, with or without
  12 ** modification, are permitted provided that the following conditions are
  13 ** met:
  14 **   * Redistributions of source code must retain the above copyright
  15 **     notice, this list of conditions and the following disclaimer.
  16 **   * Redistributions in binary form must reproduce the above copyright
  17 **     notice, this list of conditions and the following disclaimer in
  18 **     the documentation and/or other materials provided with the
  19 **     distribution.
  20 **   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
  21 **     the names of its contributors may be used to endorse or promote
  22 **     products derived from this software without specific prior written
  23 **     permission.
  24 **
  25 ** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
  26 ** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
  27 ** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
  28 ** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
  29 ** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
  30 ** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
  31 ** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
  32 ** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
  33 ** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
  34 ** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
  35 ** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
  36 **
  37 ** $QT_END_LICENSE$
  38 **
  39 ****************************************************************************/
  40
  41 import QtQuick 2.0
  42 import "content"
  43
  44 Rectangle {
  45     id: page
  46     width: 320; height: 480
  47     Flickable {
  48         anchors.fill: parent
  49     contentWidth: 420; contentHeight: 420
  50
  51     Column {
  52         id: layout1
  53         y: 0
  54         move: Transition {
  55             NumberAnimation { properties: "y"; easing.type: Easing.OutBounce }
  56         }
  57         add: Transition {
  58             NumberAnimation { properties: "y"; easing.type: Easing.OutQuad }
  59         }
  60
  61         Rectangle { color: "red"; width: 100; height: 50; border.color: "black"; radius: 15 }
  62
  63         Rectangle {
  64             id: blueV1
  65             visible: opacity != 0
  66             width: 100; height: 50
  67             color: "lightsteelblue"
  68             border.color: "black"
  69             radius: 15
  70             Behavior on opacity { NumberAnimation {} }
  71         }
  72
  73         Rectangle { color: "green"; width: 100; height: 50; border.color: "black"; radius: 15 }
  74
  75         Rectangle {
  76             id: blueV2
  77             visible: opacity != 0
  78             width: 100; height: 50
  79             color: "lightsteelblue"
  80             border.color: "black"
  81             radius: 15
  82             Behavior on opacity { NumberAnimation {} }
  83         }
  84
  85         Rectangle { color: "orange"; width: 100; height: 50; border.color: "black"; radius: 15 }
  86     }
  87
  88     Row {
  89         id: layout2
  90         y: 300
  91         move: Transition {
  92             NumberAnimation { properties: "x"; easing.type: Easing.OutBounce }
  93         }
  94         add: Transition {
  95             NumberAnimation { properties: "x"; easing.type: Easing.OutQuad }
  96         }
  97
  98         Rectangle { color: "red"; width: 50; height: 100; border.color: "black"; radius: 15 }
  99
 100         Rectangle {
 101             id: blueH1
 102             visible: opacity != 0
 103             width: 50; height: 100
 104             color: "lightsteelblue"
 105             border.color: "black"
 106             radius: 15
 107             Behavior on opacity { NumberAnimation {} }
 108         }
 109
 110         Rectangle { color: "green"; width: 50; height: 100; border.color: "black"; radius: 15 }
 111
 112         Rectangle {
 113             id: blueH2
 114             visible: opacity != 0
 115             width: 50; height: 100
 116             color: "lightsteelblue"
 117             border.color: "black"
 118             radius: 15
 119             Behavior on opacity { NumberAnimation {} }
 120         }
 121
 122         Rectangle { color: "orange"; width: 50; height: 100; border.color: "black"; radius: 15 }
 123     }
 124
 125     Button {
 126         x: 135; y: 90
 127         text: "Remove"
 128         icon: "del.png"
 129
 130         onClicked: {
 131             blueH2.opacity = 0
 132             blueH1.opacity = 0
 133             blueV1.opacity = 0
 134             blueV2.opacity = 0
 135             blueG1.opacity = 0
 136             blueG2.opacity = 0
 137             blueG3.opacity = 0
 138             blueF1.opacity = 0
 139             blueF2.opacity = 0
 140             blueF3.opacity = 0
 141         }
 142     }
 143
 144     Button {
 145         x: 145; y: 140
 146         text: "Add"
 147         icon: "add.png"
 148
 149         onClicked: {
 150             blueH2.opacity = 1
 151             blueH1.opacity = 1
 152             blueV1.opacity = 1
 153             blueV2.opacity = 1
 154             blueG1.opacity = 1
 155             blueG2.opacity = 1
 156             blueG3.opacity = 1
 157             blueF1.opacity = 1
 158             blueF2.opacity = 1
 159             blueF3.opacity = 1
 160         }
 161     }
 162
 163     Grid {
 164         x: 260; y: 0
 165         columns: 3
 166
 167         move: Transition {
 168             NumberAnimation { properties: "x,y"; easing.type: Easing.OutBounce }
 169         }
 170
 171         add: Transition {
 172             NumberAnimation { properties: "x,y"; easing.type: Easing.OutBounce }
 173         }
 174
 175         Rectangle { color: "red"; width: 50; height: 50; border.color: "black"; radius: 15 }
 176
 177         Rectangle {
 178             id: blueG1
 179             visible: opacity != 0
 180             width: 50; height: 50
 181             color: "lightsteelblue"
 182             border.color: "black"
 183             radius: 15
 184             Behavior on opacity { NumberAnimation {} }
 185         }
 186
 187         Rectangle { color: "green"; width: 50; height: 50; border.color: "black"; radius: 15 }
 188
 189         Rectangle {
 190             id: blueG2
 191             visible: opacity != 0
 192             width: 50; height: 50
 193             color: "lightsteelblue"
 194             border.color: "black"
 195             radius: 15
 196             Behavior on opacity { NumberAnimation {} }
 197         }
 198
 199         Rectangle { color: "orange"; width: 50; height: 50; border.color: "black"; radius: 15 }
 200
 201         Rectangle {
 202             id: blueG3
 203             visible: opacity != 0
 204             width: 50; height: 50
 205             color: "lightsteelblue"
 206             border.color: "black"
 207             radius: 15
 208             Behavior on opacity { NumberAnimation {} }
 209         }
 210
 211         Rectangle { color: "red"; width: 50; height: 50; border.color: "black"; radius: 15 }
 212         Rectangle { color: "green"; width: 50; height: 50; border.color: "black"; radius: 15 }
 213         Rectangle { color: "orange"; width: 50; height: 50; border.color: "black"; radius: 15 }
 214     }
 215
 216     Flow {
 217         id: layout4
 218         x: 260; y: 250; width: 150
 219
 220         move: Transition {
 221             NumberAnimation { properties: "x,y"; easing.type: Easing.OutBounce }
 222         }
 223
 224         add: Transition {
 225             NumberAnimation { properties: "x,y"; easing.type: Easing.OutBounce }
 226         }
 227
 228         Rectangle { color: "red"; width: 50; height: 50; border.color: "black"; radius: 15 }
 229
 230         Rectangle {
 231             id: blueF1
 232             visible: opacity != 0
 233             width: 60; height: 50
 234             color: "lightsteelblue"
 235             border.color: "black"
 236             radius: 15
 237             Behavior on opacity { NumberAnimation {} }
 238         }
 239
 240         Rectangle { color: "green"; width: 30; height: 50; border.color: "black"; radius: 15 }
 241
 242         Rectangle {
 243             id: blueF2
 244             visible: opacity != 0
 245             width: 60; height: 50
 246             color: "lightsteelblue"
 247             border.color: "black"
 248             radius: 15
 249             Behavior on opacity { NumberAnimation {} }
 250         }
 251
 252         Rectangle { color: "orange"; width: 50; height: 50; border.color: "black"; radius: 15 }
 253
 254         Rectangle {
 255             id: blueF3
 256             visible: opacity != 0
 257             width: 40; height: 50
 258             color: "lightsteelblue"
 259             border.color: "black"
 260             radius: 15
 261             Behavior on opacity { NumberAnimation {} }
 262         }
 263
 264         Rectangle { color: "red"; width: 80; height: 50; border.color: "black"; radius: 15 }
 265     }
 266
 267     }
 268 }