examples/declarative/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: 420; height: 420
  47
  48     Column {
  49         id: layout1
  50         y: 0
  51         move: Transition {
  52             NumberAnimation { properties: "y"; easing.type: Easing.OutBounce }
  53         }
  54         add: Transition {
  55             NumberAnimation { properties: "y"; easing.type: Easing.OutQuad }
  56         }
  57
  58         Rectangle { color: "red"; width: 100; height: 50; border.color: "black"; radius: 15 }
  59
  60         Rectangle {
  61             id: blueV1
  62             visible: opacity != 0
  63             width: 100; height: 50
  64             color: "lightsteelblue"
  65             border.color: "black"
  66             radius: 15
  67             Behavior on opacity { NumberAnimation {} }
  68         }
  69
  70         Rectangle { color: "green"; width: 100; height: 50; border.color: "black"; radius: 15 }
  71
  72         Rectangle {
  73             id: blueV2
  74             visible: opacity != 0
  75             width: 100; height: 50
  76             color: "lightsteelblue"
  77             border.color: "black"
  78             radius: 15
  79             Behavior on opacity { NumberAnimation {} }
  80         }
  81
  82         Rectangle { color: "orange"; width: 100; height: 50; border.color: "black"; radius: 15 }
  83     }
  84
  85     Row {
  86         id: layout2
  87         y: 300
  88         move: Transition {
  89             NumberAnimation { properties: "x"; easing.type: Easing.OutBounce }
  90         }
  91         add: Transition {
  92             NumberAnimation { properties: "x"; easing.type: Easing.OutQuad }
  93         }
  94
  95         Rectangle { color: "red"; width: 50; height: 100; border.color: "black"; radius: 15 }
  96
  97         Rectangle {
  98             id: blueH1
  99             visible: opacity != 0
 100             width: 50; height: 100
 101             color: "lightsteelblue"
 102             border.color: "black"
 103             radius: 15
 104             Behavior on opacity { NumberAnimation {} }
 105         }
 106
 107         Rectangle { color: "green"; width: 50; height: 100; border.color: "black"; radius: 15 }
 108
 109         Rectangle {
 110             id: blueH2
 111             visible: opacity != 0
 112             width: 50; height: 100
 113             color: "lightsteelblue"
 114             border.color: "black"
 115             radius: 15
 116             Behavior on opacity { NumberAnimation {} }
 117         }
 118
 119         Rectangle { color: "orange"; width: 50; height: 100; border.color: "black"; radius: 15 }
 120     }
 121
 122     Button {
 123         x: 135; y: 90
 124         text: "Remove"
 125         icon: "del.png"
 126
 127         onClicked: {
 128             blueH2.opacity = 0
 129             blueH1.opacity = 0
 130             blueV1.opacity = 0
 131             blueV2.opacity = 0
 132             blueG1.opacity = 0
 133             blueG2.opacity = 0
 134             blueG3.opacity = 0
 135             blueF1.opacity = 0
 136             blueF2.opacity = 0
 137             blueF3.opacity = 0
 138         }
 139     }
 140
 141     Button {
 142         x: 145; y: 140
 143         text: "Add"
 144         icon: "add.png"
 145
 146         onClicked: {
 147             blueH2.opacity = 1
 148             blueH1.opacity = 1
 149             blueV1.opacity = 1
 150             blueV2.opacity = 1
 151             blueG1.opacity = 1
 152             blueG2.opacity = 1
 153             blueG3.opacity = 1
 154             blueF1.opacity = 1
 155             blueF2.opacity = 1
 156             blueF3.opacity = 1
 157         }
 158     }
 159
 160     Grid {
 161         x: 260; y: 0
 162         columns: 3
 163
 164         move: Transition {
 165             NumberAnimation { properties: "x,y"; easing.type: Easing.OutBounce }
 166         }
 167
 168         add: Transition {
 169             NumberAnimation { properties: "x,y"; easing.type: Easing.OutBounce }
 170         }
 171
 172         Rectangle { color: "red"; width: 50; height: 50; border.color: "black"; radius: 15 }
 173
 174         Rectangle {
 175             id: blueG1
 176             visible: opacity != 0
 177             width: 50; height: 50
 178             color: "lightsteelblue"
 179             border.color: "black"
 180             radius: 15
 181             Behavior on opacity { NumberAnimation {} }
 182         }
 183
 184         Rectangle { color: "green"; width: 50; height: 50; border.color: "black"; radius: 15 }
 185
 186         Rectangle {
 187             id: blueG2
 188             visible: opacity != 0
 189             width: 50; height: 50
 190             color: "lightsteelblue"
 191             border.color: "black"
 192             radius: 15
 193             Behavior on opacity { NumberAnimation {} }
 194         }
 195
 196         Rectangle { color: "orange"; width: 50; height: 50; border.color: "black"; radius: 15 }
 197
 198         Rectangle {
 199             id: blueG3
 200             visible: opacity != 0
 201             width: 50; height: 50
 202             color: "lightsteelblue"
 203             border.color: "black"
 204             radius: 15
 205             Behavior on opacity { NumberAnimation {} }
 206         }
 207
 208         Rectangle { color: "red"; width: 50; height: 50; border.color: "black"; radius: 15 }
 209         Rectangle { color: "green"; width: 50; height: 50; border.color: "black"; radius: 15 }
 210         Rectangle { color: "orange"; width: 50; height: 50; border.color: "black"; radius: 15 }
 211     }
 212
 213     Flow {
 214         id: layout4
 215         x: 260; y: 250; width: 150
 216
 217         move: Transition {
 218             NumberAnimation { properties: "x,y"; easing.type: Easing.OutBounce }
 219         }
 220
 221         add: Transition {
 222             NumberAnimation { properties: "x,y"; easing.type: Easing.OutBounce }
 223         }
 224
 225         Rectangle { color: "red"; width: 50; height: 50; border.color: "black"; radius: 15 }
 226
 227         Rectangle {
 228             id: blueF1
 229             visible: opacity != 0
 230             width: 60; height: 50
 231             color: "lightsteelblue"
 232             border.color: "black"
 233             radius: 15
 234             Behavior on opacity { NumberAnimation {} }
 235         }
 236
 237         Rectangle { color: "green"; width: 30; height: 50; border.color: "black"; radius: 15 }
 238
 239         Rectangle {
 240             id: blueF2
 241             visible: opacity != 0
 242             width: 60; height: 50
 243             color: "lightsteelblue"
 244             border.color: "black"
 245             radius: 15
 246             Behavior on opacity { NumberAnimation {} }
 247         }
 248
 249         Rectangle { color: "orange"; width: 50; height: 50; border.color: "black"; radius: 15 }
 250
 251         Rectangle {
 252             id: blueF3
 253             visible: opacity != 0
 254             width: 40; height: 50
 255             color: "lightsteelblue"
 256             border.color: "black"
 257             radius: 15
 258             Behavior on opacity { NumberAnimation {} }
 259         }
 260
 261         Rectangle { color: "red"; width: 80; height: 50; border.color: "black"; radius: 15 }
 262     }
 263
 264 }