Le code précédent peut ainsi être réécrit à l'aide des ancres. Il sera bien plus lisible et
plus facile à composer : pour centrer les éléments, il n'est plus nécessaire de réfléchir à
un calcul un peu particulier.
Note > Cet exemple est disponible dans le dossier ancres .
import QtQuick 2.5
import QtQuick.Controls 1.4
ApplicationWindow {
visible: true
width: 640
height: 120
title: qsTr("Hello World")
TextField {
id: textField
width: 250
anchors.horizontalCenter: parent.horizontalCenter
y: 10 placeholderText: qsTr("Enter text") } TextField { id: colourField width:
250 anchors.top: textField.bottom anchors.topMargin: 10
anchors.horizontalCenter: textField.horizontalCenter placeholderText: qsTr("Enter
colour") } Label { color: colourField.text text: textField.text anchors.top:
colourField.bottom anchors.topMargin: 10 anchors.horizontalCenter:
colourField.horizontalCenter } }
La première ancre fait correspondre, sur l'axe horizontal, le centre du premier
champ avec le centre (selon l'axe horizontal) de la fenêtre. Tout comme
précédemment, lors du moindre redimensionnement de la fenêtre, le lien est
préservé et le champ sera toujours centré.
L'emploi des ancres n'interdit pas un positionnement absolu pour l'axe qui n'est pas
fixé, ici, sur la hauteur de la fenêtre.
Le dessus du deuxième champ correspondra au bas du premier, c'est-à-dire que le
champ de couleur sera en dessous du champ de texte.
Pour éviter que ces deux champs soient collés, cependant, il faut définir une certaine
marge, soit en dessous du premier, soit au-dessus du second. Ici, la marge
correspondra au-dessus du deuxième champ.
282