qt-quick-for-designers-1:positioning_elements
Table of Contents
Positioning elements
Absolute positioning
- You can define an item's position and size within its parent.
- basic-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 } }
Relative positioning
- Anchors provide a way to position an item by specifying its relationship with other items.
- anchors-positioners.qml
import QtQuick 1.0 Item { width: 400 height: 400 Image { anchors.fill: parent source: "images/background.png" } Spaceship { id: spaceship anchors.verticalCenter: parent.verticalCenter anchors.horizontalCenter: parent.horizontalCenter } }
Multiple items
- Many ways to specify how an item is related to another:
anchors.right,anchors.rightMargin…
- 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 } }
Resources
- All source code is subject to this copyright.
qt-quick-for-designers-1/positioning_elements.txt · Last modified: 2013/07/06 22:52 by mithat