Positionnement à l'aide d'ancres

Outre les propriétés plus traditionnelles telles que ` Grid`, ` Row` et ` Column`, ` Qt Quick ` offre également un moyen de mettre en page les éléments à l’aide du concept d’ancrages. On peut considérer que chaque élément dispose d’un ensemble de 7 « lignes d’ancrage » invisibles : ` left`, ` horizontalCenter`, ` right`, ` top`, ` verticalCenter`, ` baseline` et ` bottom`.

La ligne de base (non illustrée ci-dessus) correspond à la ligne imaginaire sur laquelle le texte serait aligné. Pour les éléments ne contenant pas de texte, elle est identique à la propriété « top ».

Le système d’ancrage « Qt Quick » vous permet de définir des relations entre les lignes d’ancrage de différents éléments. Par exemple, vous pouvez écrire :

Rectangle { id: rect1; ... }
Rectangle { id: rect2; anchors.left: rect1.right; ... }

Dans ce cas, le bord gauche de rect2 est lié au bord droit de rect1, ce qui donne le résultat suivant :

Vous pouvez spécifier plusieurs ancrages. Par exemple :

Rectangle { id: rect1; ... }
Rectangle { id: rect2; anchors.left: rect1.right; anchors.top: rect1.bottom; ... }

En spécifiant plusieurs ancrages horizontaux ou verticaux, vous pouvez contrôler la taille d’un élément. Ci-dessous, rect2 est ancré à droite de rect1 et à gauche de rect3. Si l’un des rectangles bleus est déplacé, rect2 s’étirera ou se rétrécira selon les besoins :

Rectangle { id: rect1; x: 0; ... }
Rectangle { id: rect2; anchors.left: rect1.right; anchors.right: rect3.left; ... }
Rectangle { id: rect3; x: 150; ... }

Il existe également des ancrages pratiques. « anchors.fill » est un ancrage pratique qui revient à définir les ancrages left, right, top et bottom respectivement à gauche, à droite, en haut et en bas de l’élément cible. « anchors.centerIn » est un autre ancrage pratique, qui revient à définir les ancrages verticalCenter et horizontalCenter respectivement à verticalCenter et horizontalCenter de l’élément cible.

Marges et décalages des ancrages

Le système d’ancrage permet également de spécifier des marges et des décalages pour les ancrages d’un élément. Les marges définissent l’espace vide à laisser à l’extérieur de l’ancrage d’un élément, tandis que les décalages permettent de modifier le positionnement à l’aide des lignes d’ancrage centrales. Un élément peut définir ses marges d’ancrage individuellement à l’aide de leftMargin, rightMargin, topMargin et bottomMargin, ou utiliser anchors.margins pour définir la même valeur de marge pour les quatre bords. Les décalages d’ancrage sont définis à l’aide de horizontalCenterOffset, verticalCenterOffset et baselineOffset.

L'exemple suivant spécifie une marge gauche :

Rectangle { id: rect1; ... }
Rectangle { id: rect2; anchors.left: rect1.right; anchors.leftMargin: 5; ... }

Dans ce cas, une marge de 5 pixels est réservée à gauche de rect2, ce qui donne le résultat suivant :

Modification des ancrages

Qt Quick fournit le type « AnchorChanges » pour spécifier les ancrages dans un état.

State {
    name: "anchorRight"
    AnchorChanges {
        target: rect2
        anchors.right: parent.right
        anchors.left: undefined  //remove the left anchor
    }
}

AnchorChanges peut être animé à l’aide du type d’ AnchorAnimation.

Transition {
    AnchorAnimation {}  //animates any AnchorChanges in the corresponding state change
}

Les ancrages peuvent également être modifiés de manière impérative en JavaScript. Cependant, ces modifications doivent être soigneusement ordonnées, sous peine de produire des résultats inattendus. L’exemple suivant illustre ce problème :

// May produce unexpected results
Rectangle {
    width: 50
    anchors.left: parent.left

    function reanchorToRight() {
        anchors.right = parent.right
        anchors.left = undefined
    }
}

Lorsque ` reanchorToRight ` est appelée, la fonction définit d’abord l’ancrage droit. À ce stade, les ancrages gauche et droit sont tous deux définis, et l’élément sera étiré horizontalement pour remplir son élément parent. Lorsque l’ancrage gauche est désactivé, la nouvelle largeur est conservée. Ainsi, lors de la mise à jour des ancrages en JavaScript, vous devez d’abord désactiver tous les ancrages qui ne sont plus nécessaires, puis définir les nouveaux ancrages requis, comme indiqué ci-dessous :

// Correct code
Rectangle {
    width: 50
    anchors.left: parent.left

    function reanchorToRight() {
        anchors.left = undefined
        anchors.right = parent.right
    }
}

L’ordre d’évaluation des liaisons n’étant pas défini, il n’est pas recommandé de modifier les ancrages via des liaisons conditionnelles, car cela peut entraîner le problème d’ordre décrit ci-dessus. Dans l’exemple suivant, l’élément ` Rectangle ` finira par s’étendre sur toute la largeur de son élément parent, car les ancrages gauche et droit seront définis simultanément lors de la mise à jour de la liaison.

// May produce unexpected results
Rectangle {
    width: 50; height: 50
    anchors.left: state == "right" ? undefined : parent.left;
    anchors.right: state == "right" ? parent.right : undefined;
}

Il convient de réécrire ce code pour utiliser plutôt ` AnchorChanges `, car ` AnchorChanges ` gère automatiquement les problèmes d’ordre en interne. Voici comment réécrire correctement l’exemple ci-dessus :

// Correct code
Rectangle {
    id: rect
    width: 50; height: 50
    anchors.left: parent.left  // initial position

    states: State {
        name: "rightAligned"
        AnchorChanges {
            target: rect
            anchors.left: undefined
            anchors.right: parent.right
        }
    }
    function toggleAnchoring() {
        parent.state = (parent.state == "" ? "rightAligned" : "")
    }
}

Restrictions

Pour des raisons de performances, vous ne pouvez ancrer un élément qu’à ses frères et à son parent direct. Par exemple, l’ancrage suivant n’est pas valide et générerait un avertissement :

//bad code
Item {
    id: group1
    Rectangle { id: rect1; ... }
}
Item {
    id: group2
    Rectangle { id: rect2; anchors.left: rect1.right; ... }    // invalid anchor!
}

De plus, les mises en page basées sur l’ancrage ne peuvent pas être combinées avec un positionnement absolu. Si un élément spécifie sa position « x » tout en définissant « anchors.left », ou s’il ancre ses bords gauche et droit tout en définissant en plus « width », le résultat est indéfini, car il serait impossible de déterminer si l’élément doit utiliser l’ancrage ou le positionnement absolu. Il en va de même lorsque l’on définit les propriétés y et height d’un élément avec anchors.top et anchors.bottom, ou lorsque l’on définit anchors.fill ainsi que width ou height. Il en va de même lors de l’utilisation de positionneurs tels que Row et Grid, qui peuvent définir les propriétés x et y de l’élément. Si vous souhaitez passer d’un positionnement basé sur un ancrage à un positionnement absolu, vous pouvez effacer une valeur d’ancrage en la définissant sur undefined.