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