Differences

This shows you the differences between two versions of the page.

--- qt-quick-for-designers-1:positioning_elements [2013/06/21 22:49] – created mithat
+++ qt-quick-for-designers-1:positioning_elements [2013/07/06 22:52] (current) – mithat
@@ Line 1: / Line 1: @@
 ====== Positioning elements ======
+===== Absolute positioning =====
+{{youtube>sgQbKeIGf5M?small}}
+    * You can define an item's position and size within its parent.
+<file javascript basic-positioners.qml>
 import QtQuick 1.0
@@ Line 8: / Line 13: @@
     Image {
+        anchors.fill: parent
+        source: "images/background.png"
+    }
+    Image {
+        id: spaceship
+        source: "images/spaceship.png"
+        anchors.verticalCenter: parent.verticalCenter
+        anchors.horizontalCenter: parent.horizontalCenter
+    }
+}</file>
+===== Relative positioning =====
+{{youtube>2BpsjJmhmH0?small}}
+  * **Anchors** provide a way to position an item by specifying its relationship with other items.
+<file javascript anchors-positioners.qml>
+import QtQuick 1.0
+Item {
+    width: 400
+    height: 400
+    Image {
+        anchors.fill: parent
         source: "images/background.png"
     }
@@ Line 13: / Line 42: @@
     Spaceship {
         id: spaceship
-        x: 50
+        anchors.verticalCenter: parent.verticalCenter
-        y: 60
+        anchors.horizontalCenter: parent.horizontalCenter
     }
 }</file>
+==== Multiple items ====
+{{youtube>fNOgIexwe2w?small}}
+  * Many ways to specify how an item is related to another:
+    * ''anchors.right'', ''anchors.rightMargin'' ...
+<file javascript more-anchors-positioners.qml>
+import QtQuick 1.0
+Item {
+    width: 400
+    height: 400
+    Image {
+        anchors.fill: parent
+        source: "images/background.png"
+    }
+    Image {
+        id: spaceship
+        source: "images/spaceship.png"
+        anchors.verticalCenter: parent.verticalCenter
+        anchors.horizontalCenter: parent.horizontalCenter
+    }
+    Image {
+        id: anotherSpaceship
+        source: "images/spaceship.png"
+        scale: 0.5
+        smooth: true
+        anchors.top: spaceship.bottom
+        anchors.right: spaceship.right
+        anchors.rightMargin: 100
+    }
+}
+</file>
+====== Resources ======
+  * {{:qt-quick-for-designers-1:images.zip|}}
+  * All source code is subject to this [[copyright header|copyright]].