examples/declarative/righttoleft/layoutdirection/layoutdirection.qml

   1 /****************************************************************************
   2 **
   3 ** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
   4 ** All rights reserved.
   5 ** Contact: http://www.qt-project.org/
   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 2.0
  42
  43 Rectangle {
  44     id: root
  45     property bool mirror
  46     property int direction: Qt.application.layoutDirection
  47     LayoutMirroring.enabled: mirror
  48     LayoutMirroring.childrenInherit: true
  49     width: column.width + 80
  50     height: column.height + 40
  51     Column {
  52         id: column
  53         width: 190
  54         spacing: 10
  55         anchors.centerIn: parent
  56
  57         Text {
  58             text: "Row"
  59             anchors.horizontalCenter: parent.horizontalCenter
  60         }
  61
  62         Row {
  63             layoutDirection: root.direction
  64             spacing: 10
  65             move: Transition {
  66                 NumberAnimation {
  67                     properties: "x"
  68                 }
  69             }
  70             Repeater {
  71                 model: 4
  72                 Loader {
  73                     property int value: index
  74                     sourceComponent: positionerDelegate
  75                 }
  76             }
  77         }
  78
  79         Text {
  80             text: "Grid"
  81             anchors.horizontalCenter: parent.horizontalCenter
  82         }
  83
  84         Grid {
  85             layoutDirection: root.direction
  86             spacing: 10; columns: 4
  87             move: Transition {
  88                 NumberAnimation {
  89                     properties: "x"
  90                 }
  91             }
  92             Repeater {
  93                 model: 11
  94                 Loader {
  95                     property int value: index
  96                     sourceComponent: positionerDelegate
  97                 }
  98             }
  99         }
 100
 101         Text {
 102             text: "Flow"
 103             anchors.horizontalCenter: parent.horizontalCenter
 104         }
 105
 106         Flow {
 107             layoutDirection: root.direction
 108             spacing: 10; width: parent.width
 109             move: Transition {
 110                 NumberAnimation {
 111                     properties: "x"
 112                 }
 113             }
 114             Repeater {
 115                 model: 10
 116                 Loader {
 117                     property int value: index
 118                     sourceComponent: positionerDelegate
 119                 }
 120             }
 121         }
 122
 123         Text {
 124             text: "ListView"
 125             anchors.horizontalCenter: parent.horizontalCenter
 126         }
 127
 128         ListView {
 129             id: listView
 130             clip: true
 131             width: parent.width; height: 40
 132             layoutDirection: root.direction
 133             orientation: Qt.Horizontal
 134             model: 48
 135             delegate: viewDelegate
 136         }
 137
 138         Text {
 139             text: "GridView"
 140             anchors.horizontalCenter: parent.horizontalCenter
 141         }
 142
 143         GridView {
 144             clip: true
 145             width: 200; height: 160
 146             cellWidth: 50; cellHeight: 50
 147             layoutDirection: root.direction
 148             model: 48
 149             delegate: viewDelegate
 150         }
 151
 152         Rectangle {
 153             height: 50; width: parent.width
 154             color: mouseArea.pressed ? "black" : "gray"
 155             Column {
 156                 anchors.centerIn: parent
 157                 Text {
 158                     text: root.direction ? "Right to left" : "Left to right"
 159                     color: "white"
 160                     font.pixelSize: 16
 161                     anchors.horizontalCenter: parent.horizontalCenter
 162                 }
 163                 Text {
 164                     text: "(click here to toggle)"
 165                     color: "white"
 166                     font.pixelSize: 10
 167                     font.italic: true
 168                     anchors.horizontalCenter: parent.horizontalCenter
 169                 }
 170             }
 171             MouseArea {
 172                 id: mouseArea
 173                 anchors.fill: parent
 174                 onClicked: {
 175                     if (root.direction == Qt.LeftToRight) {
 176                         root.direction = Qt.RightToLeft;
 177                     } else {
 178                         root.direction = Qt.LeftToRight;
 179                     }
 180                 }
 181             }
 182         }
 183
 184         Rectangle {
 185             height: 50; width: parent.width
 186             color: mouseArea2.pressed ? "black" : "gray"
 187             Column {
 188                 anchors.centerIn: parent
 189                 Text {
 190                     text: root.mirror ? "Mirrored" : "Not mirrored"
 191                     color: "white"
 192                     font.pixelSize: 16
 193                     anchors.horizontalCenter: parent.horizontalCenter
 194                 }
 195                 Text {
 196                     text: "(click here to toggle)"
 197                     color: "white"
 198                     font.pixelSize: 10
 199                     font.italic: true
 200                     anchors.horizontalCenter: parent.horizontalCenter
 201                 }
 202             }
 203             MouseArea {
 204                 id: mouseArea2
 205                 anchors.fill: parent
 206                 onClicked: {
 207                     root.mirror = !root.mirror;
 208                 }
 209             }
 210         }
 211     }
 212
 213     Component {
 214         id: positionerDelegate
 215         Rectangle {
 216             width: 40; height: 40
 217             color: Qt.rgba(0.8/(parent.value+1),0.8/(parent.value+1),0.8/(parent.value+1),1.0)
 218             Text {
 219                 text: parent.parent.value+1
 220                 color: "white"
 221                 font.pixelSize: 18
 222                 anchors.centerIn: parent
 223             }
 224         }
 225     }
 226     Component {
 227         id: viewDelegate
 228         Item {
 229             width: (listView.effectiveLayoutDirection == Qt.LeftToRight  ? (index == 48 - 1) : (index == 0)) ? 40 : 50
 230             Rectangle {
 231                 width: 40; height: 40
 232                 color: Qt.rgba(0.5+(48 - index)*Math.random()/48,
 233                                0.3+index*Math.random()/48,
 234                                0.3*Math.random(),
 235                                1.0)
 236                 Text {
 237                     text: index+1
 238                     color: "white"
 239                     font.pixelSize: 18
 240                     anchors.centerIn: parent
 241                 }
 242             }
 243         }
 244     }
 245 }
 246