Positionnement à l'aide d'ancres

En plus des méthodes traditionnelles Grid, Row, et Column, Qt Quick propose également un moyen de mettre en page les éléments en utilisant le concept d'ancres. Chaque élément peut être considéré comme ayant 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 se situerait le texte. Pour les éléments sans texte, c'est la même chose que top.

Le système d'ancrage de 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 du rect2 est lié au bord droit du rect1, ce qui donne ce qui suit :

Vous pouvez spécifier plusieurs lignes d'ancrage. Vous pouvez spécifier plusieurs ancrages :

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, le rect2 est ancré à la droite du rect1 et à la gauche du rect3. Si l'un des rectangles bleus est déplacé, rect2 s'étire et se rétrécit en fonction des 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 ancres de commodité. anchors.fill est une ancre de commodité qui revient à placer les ancres gauche, droite, haut et bas à la gauche, à la droite, au haut et au bas de l'élément cible. anchors.centerIn est une autre ancre de commodité qui revient à placer les ancres verticalCenter et horizontalCenter à la verticalCenter et à la horizontalCenter de l'élément cible.

Marges et décalages des ancres

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

L'exemple suivant indique une marge de 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 à la gauche de rect2, ce qui donne ce qui suit :

Modification des ancres

Qt Quick fournit le type AnchorChanges pour spécifier les ancres dans un état.

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

AnchorChanges Les ancres peuvent être animées à l'aide du type AnchorAnimation.

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

Les ancres peuvent également être modifiées de manière impérative en JavaScript. Toutefois, 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é, la fonction définit d'abord l'ancre droite. À ce stade, les ancres gauche et droite sont toutes deux définies et l'élément est étiré horizontalement pour remplir son parent. Lorsque l'ancre gauche est désactivée, la nouvelle largeur est conservée. Ainsi, lorsque vous mettez à jour les ancres en JavaScript, vous devez d'abord désactiver les ancres qui ne sont plus nécessaires, puis définir les nouvelles ancres qui sont nécessaires, 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 ancres par le biais de liaisons conditionnelles, car cela peut entraîner le problème d'ordre décrit ci-dessus. Dans l'exemple suivant, le site Rectangle finira par atteindre la largeur totale de son parent, car les ancres gauche et droite seront définies 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;
}

Cet exemple devrait être réécrit pour utiliser AnchorChanges à la place, car AnchorChanges gérera 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 performance, vous ne pouvez ancrer un élément qu'à ses frères et sœurs et à son parent direct. Par exemple, l'ancre suivante n'est pas valide et produirait un avertissement :

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

En outre, les mises en page basées sur les ancres ne peuvent pas être mélangées avec le positionnement absolu. Si un élément spécifie sa position x et définit également anchors.left, ou ancre ses bords gauche et droit mais définit également width, le résultat est indéfini, car il n'est pas clair si l'élément doit utiliser l'ancrage ou le positionnement absolu. Il en va de même pour la définition des propriétés y et height d'un élément avec anchors.top et anchors.bottom, ou pour la définition de anchors.fill ainsi que de width ou height. Il en va de même pour 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 l'ancre à un positionnement absolu, vous pouvez effacer une valeur d'ancre en lui attribuant la valeur undefined.