qt-quick-for-designers-1:positioning_elements
This is an old revision of the document!
Table of Contents
Positioning elements
Absolute positioning
- You can define the item's position and size relative to 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 } }
- See basic-positioners.mov
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 } }
- See anchors-positioners.mov
- 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 } }
- See more-anchors.mov
————————————————————–
Resources
qt-quick-for-designers-1/positioning_elements.1371861570.txt.gz · Last modified: 2013/06/22 00:39 by mithat