qt-quick-for-designers-1:positioning_elements
Differences
This shows you the differences between two versions of the page.
| Both sides previous revisionPrevious revisionNext revision | Previous revision | ||
| qt-quick-for-designers-1:positioning_elements [2013/06/21 23:39] – [Absolute positioning] mithat | qt-quick-for-designers-1:positioning_elements [2013/07/06 22:52] (current) – mithat | ||
|---|---|---|---|
| Line 2: | Line 2: | ||
| ===== Absolute positioning ===== | ===== Absolute positioning ===== | ||
| - | * You can define the item's position and size relative to its parent: | + | {{youtube> |
| + | * You can define an item's position and size within its parent. | ||
| <file javascript basic-positioners.qml> | <file javascript basic-positioners.qml> | ||
| import QtQuick 1.0 | import QtQuick 1.0 | ||
| Line 12: | Line 13: | ||
| Image { | Image { | ||
| + | anchors.fill: | ||
| source: " | source: " | ||
| } | } | ||
| - | | + | |
| id: spaceship | id: spaceship | ||
| - | | + | |
| - | | + | |
| + | anchors.horizontalCenter: | ||
| } | } | ||
| }</ | }</ | ||
| ===== Relative positioning ===== | ===== Relative positioning ===== | ||
| + | {{youtube> | ||
| * **Anchors** provide a way to position an item by specifying its relationship with other items. | * **Anchors** provide a way to position an item by specifying its relationship with other items. | ||
| <file javascript anchors-positioners.qml> | <file javascript anchors-positioners.qml> | ||
| Line 42: | Line 46: | ||
| } | } | ||
| }</ | }</ | ||
| + | ==== Multiple items ==== | ||
| + | {{youtube> | ||
| * Many ways to specify how an item is related to another: | * Many ways to specify how an item is related to another: | ||
| * '' | * '' | ||
| Line 56: | Line 62: | ||
| } | } | ||
| - | | + | |
| id: spaceship | id: spaceship | ||
| + | source: " | ||
| anchors.verticalCenter: | anchors.verticalCenter: | ||
| anchors.horizontalCenter: | anchors.horizontalCenter: | ||
| } | } | ||
| - | | + | |
| id: anotherSpaceship | id: anotherSpaceship | ||
| + | source: " | ||
| scale: 0.5 | scale: 0.5 | ||
| + | smooth: true | ||
| anchors.top: | anchors.top: | ||
| anchors.right: | anchors.right: | ||
| anchors.rightMargin: | anchors.rightMargin: | ||
| } | } | ||
| - | }</ | + | } |
| + | </ | ||
| + | ====== Resources ====== | ||
| + | * {{: | ||
| + | * All source code is subject to this [[copyright header|copyright]]. | ||
qt-quick-for-designers-1/positioning_elements.1371857985.txt.gz · Last modified: 2013/06/21 23:39 by mithat