Interfaces utilisateur de droite à gauche

Présentation

Ce chapitre présente les différentes approches et options disponibles pour implémenter la prise en charge des langues s'écrivant de droite à gauche dans les applications Qt Quick. Parmi les langues courantes s'écrivant de droite à gauche, on trouve notamment l'arabe, l'hébreu, le persan et l'ourdou. La plupart des modifications consistent à s'assurer que le texte traduit dans ces langues est correctement aligné à droite et que le contenu organisé horizontalement dans les vues, les listes et les grilles s'affiche correctement de droite à gauche.

Dans les cultures où l’on parle des langues s’écrivant de droite à gauche, les utilisateurs parcourent et lisent naturellement les éléments graphiques et le texte de droite à gauche. La règle générale est que le contenu (comme les photos, les vidéos et les cartes) n’est pas inversé, mais que le positionnement du contenu (comme la mise en page des applications et le flux des éléments visuels) est inversé. Par exemple, les photos affichées par ordre chronologique doivent s’enchaîner de droite à gauche, l’extrémité inférieure des curseurs horizontaux doit se situer à droite du curseur, et les lignes de texte doivent être alignées à droite de la zone de texte disponible. L’emplacement des éléments visuels ne doit pas être inversé lorsque sa position est liée à un contenu ; par exemple, lorsqu’un marqueur de position est affiché pour indiquer un emplacement sur une carte. Il existe également certains cas particuliers dont vous devrez peut-être tenir compte, notamment lorsque les locuteurs de langues s’écrivant de droite à gauche sont habitués à un positionnement de gauche à droite, par exemple lors de l’utilisation des touches numériques sur les téléphones ou des boutons de lecture, de pause, de retour en arrière et d’avance rapide sur les lecteurs de musique.

Alignement du texte

(Ceci s’applique aux types Text, TextInput et TextEdit.)

Lorsque l’alignement horizontal d’un élément de texte n’est pas explicitement défini, l’élément de texte est automatiquement aligné selon le sens de lecture naturel du texte. Par défaut, les textes s’écrivant de gauche à droite, comme l’anglais, sont alignés à gauche de la zone de texte, tandis que les textes s’écrivant de droite à gauche, comme l’arabe, sont alignés à droite de la zone de texte. L’alignement d’un élément de texte vide est déterminé par la propriété ` QInputMethod::inputDirection()`, qui dépend des paramètres régionaux actifs du système.

Cet alignement par défaut basé sur les paramètres régionaux peut être remplacé en définissant la propriété ` horizontalAlignment ` de l’élément de texte, ou en activant la mise en miroir de la mise en page à l’aide de la propriété associée ` LayoutMirroring `, ce qui entraîne la mise en miroir de tout alignement horizontal explicite à gauche et à droite. Notez que lorsque l'option « LayoutMirroring » est activée, la valeur de la propriété « horizontalAlignment » reste inchangée ; l'alignement effectif de l'élément de texte, qui tient compte de la mise en miroir, peut être lu à partir de la propriété « effectiveHorizontalAlignment ».

// automatically aligned to the left
Text {
    text: "Phone"
    width: 200
}

// automatically aligned to the right
Text {
    text: "خامل"
    width: 200
}

// aligned to the left
Text {
    text: "خامل"
    horizontalAlignment: Text.AlignLeft
    width: 200
}

// aligned to the right
Text {
    text: "خامل"
    horizontalAlignment: Text.AlignLeft
    LayoutMirroring.enabled: true
    width: 200
}

Direction de mise en page des positionneurs et des vues

(Ceci s’applique aux types Row, Grid, Flow, ListView et GridView.)

Les types utilisés pour le positionnement horizontal et les vues de modèle disposent de la propriété layoutDirection permettant de contrôler la direction horizontale de la disposition. Définir layoutDirection sur Qt.RightToLeft entraîne une disposition des éléments de droite à gauche. Par défaut, Qt Quick suit la direction de disposition de gauche à droite.

La direction de mise en page horizontale peut également être inversée via la propriété attachée LayoutMirroring. Cela entraîne la mise en miroir de l’ layoutDirection effective des positionneurs et des vues. Notez que la valeur réelle de la propriété layoutDirection restera inchangée ; la direction de mise en page effective des positionneurs et des vues, qui tient compte de la mise en miroir, peut être lue à partir de la propriété effectiveLayoutDirection.

// by default child items are positioned from left to right
Row {
    Child {}
    Child {}
}

// position child items from right to left
Row {
    layoutDirection: Qt.RightToLeft
    Child {}
    Child {}
}

// position child items from left to right
Row {
    LayoutMirroring.enabled: true
    layoutDirection: Qt.RightToLeft
    Child {}
    Child {}
}

Mise en miroir de la mise en page

La propriété associée LayoutMirroring est fournie pour faciliter la mise en œuvre de la prise en charge de l’écriture de droite à gauche dans les applications existantes utilisant une Qt Quick de gauche à droite. Elle inverse le comportement des ancrages d’éléments, la direction de mise en page des positionneurs et des vues de modèle, ainsi que l’alignement explicite du texte des types de texte QML.

Vous pouvez activer la mise en miroir de la mise en page pour un élément « Item » particulier :

Item {
    height: 50; width: 150

    LayoutMirroring.enabled: true
    anchors.left: parent.left   // anchor left becomes right

    Row {
        // items flow from left to right (as per default)
        Child {}
        Child {}
        Child {}
    }
}

Ou définir tous les types enfants pour qu’ils héritent également de la direction de mise en page :

Item {
    height: 50; width: 150

    LayoutMirroring.enabled: true
    LayoutMirroring.childrenInherit: true
    anchors.left: parent.left   // anchor left becomes right

    Row {
        // setting childrenInherit in the parent causes these
        // items to flow from right to left instead
        Child {}
        Child {}
        Child {}
    }
}

L’application du reflet de cette manière ne modifie pas la valeur réelle des propriétés d’ancrage, d’ layoutDirection ou d’ horizontalAlignment concernées. La propriété distincte en lecture seule ` effectiveLayoutDirection ` peut être utilisée pour interroger la direction de mise en page effective des positionneurs et des vues de modèle en tenant compte du reflet. De même, les types ` Text`, ` TextInput ` et ` TextEdit ` disposent désormais de la propriété en lecture seule ` effectiveHorizontalAlignment ` permettant d’interroger l’alignement visuel effectif du texte.

Notez que les mises en page et les animations d’application définies à l’aide de valeurs de propriété ` x ` (par opposition aux ancrages ou aux types de positionneurs) ne sont pas affectées par la propriété associée ` LayoutMirroring `. Par conséquent, l’ajout de la prise en charge de l’écriture de droite à gauche à ces types de mises en page peut nécessiter certaines modifications du code de votre application, en particulier dans les vues qui s’appuient à la fois sur les ancrages et sur le positionnement basé sur les coordonnées x. Voici une façon d’utiliser la propriété attachée ` LayoutMirroring ` pour appliquer un effet de miroir à un élément positionné à l’aide de coordonnées ` x ` :

Rectangle {
    color: "black"
    height: 50; width: 50
    x: mirror(10)
    function mirror(value) {
        return LayoutMirroring.enabled ? (parent.width - width - value) : value;
    }
}

Toutes les mises en page ne doivent pas nécessairement être inversées. Dans certains cas, un élément visuel est positionné à droite de l’écran pour faciliter l’utilisation d’une seule main, car la plupart des personnes sont droitières, et non en raison du sens de lecture. Si un élément enfant ne doit pas être affecté par l’inversion, définissez la propriété ` LayoutMirroring.enabled ` de cet élément sur `false`.

Qt Quick est conçu pour développer des interfaces utilisateur animées et fluides. Lorsque vous effectuez le renversement de votre application, n’oubliez pas de vérifier que les animations et les transitions continuent de fonctionner comme prévu. Si vous ne disposez pas des ressources nécessaires pour ajouter la prise en charge de la lecture de droite à gauche à votre application, il peut être préférable de simplement conserver les mises en page de l’application alignées à gauche et de vous assurer que le texte est traduit et aligné correctement.

Mise en miroir des icônes

(Ceci s’applique aux types Image, BorderImage et AnimatedImage.)

La plupart des images n’ont pas besoin d’être inversées, mais certaines icônes directionnelles, telles que les flèches, peuvent nécessiter une inversion. Le tracé de ces icônes peut être inversé à l’aide d’une propriété dédiée mirror:

Image {
    source: "arrow.png"
    mirror: true
}

Direction de mise en page par défaut

Utilisez la propriété Qt.application.layoutDirection pour interroger la direction de mise en page active de l’application. Elle hérite de QGuiApplication::layoutDirection(), qui détermine la direction de mise en page à partir du fichier de traduction de la langue active.

Pour définir la direction de mise en page pour une locale particulière, déclarez la chaîne littérale dédiée ` QT_LAYOUT_DIRECTION ` dans le contexte ` QGuiApplication ` sous la forme ` LTR ` ou ` RTL`.

Commencez par ajouter cette ligne quelque part dans votre code source QML :

qsTr("QT_LAYOUT_DIRECTION","QGuiApplication");

Utilisez ensuite lupdate pour générer le fichier source de traduction.

Cela ajoute la déclaration suivante au fichier de traduction, dans laquelle vous pouvez saisir soit LTR, soit RTL comme traduction pour la locale.

<context>
    <name>QGuiApplication</name>
    <message>
        <location filename="myapp.qml" line="33"/>
        <source>QT_LAYOUT_DIRECTION</source>
        <translation type="unfinished">RTL</translation>
    </message>
</context>

Ajoutez ensuite les liaisons suivantes au composant QML racine de votre application :

LayoutMirroring.enabled: Qt.application.layoutDirection === Qt.RightToLeft
LayoutMirroring.childrenInherit: true

La première liaison garantit que l’interface utilisateur sera correctement inversée lorsqu’une locale de droite à gauche est définie. La deuxième liaison garantit que les éléments enfants du composant racine respecteront également cette inversion.

Vous pouvez vérifier que le sens de mise en page fonctionne comme prévu en exécutant votre application Qt Quick avec le fichier de traduction compilé :

qml myapp.qml -translation myapp.qm

Vous pouvez tester votre application avec une orientation de mise en page de droite à gauche en appelant la fonction statique QGuiApplication::setLayoutDirection():

QGuiApplication app(argc, argv);
app.setLayoutDirection(Qt::RightToLeft);