User Tools

Site Tools


qt-quick-for-designers-1:positioning_elements

This is an old revision of the document!


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
    }
}

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
    }
}
  • 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 basic-positioners.mov FIXME


Resources

qt-quick-for-designers-1/positioning_elements.1371861470.txt.gz · Last modified: 2013/06/22 00:37 by mithat

Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki