Interfaces utilisateur de droite à gauche

Vue d'ensemble

Ce chapitre présente les différentes approches et options disponibles pour mettre en œuvre la prise en charge des langues de droite à gauche dans les applications Qt Quick. Les langues les plus courantes sont l'arabe, l'hébreu, le persan et l'urdu. La plupart des changements consistent à s'assurer que le texte traduit dans les langues de droite à gauche est correctement aligné à droite et que le contenu ordonné horizontalement dans les vues, les listes et les grilles s'écoule correctement de la droite vers la gauche.

Dans les cultures où l'on parle de droite à gauche, les gens scannent et lisent naturellement les éléments graphiques et le texte de droite à gauche. En règle générale, le contenu (comme les photos, les vidéos et les cartes) n'est pas reflété, mais le positionnement du contenu (comme la présentation des applications et le flux des éléments visuels) l'est. Par exemple, les photos affichées dans l'ordre chronologique doivent être présentées de droite à gauche, la partie inférieure des curseurs horizontaux doit être située à droite du curseur et les lignes de texte doivent être alignées sur le côté droit de la zone de texte disponible. L'emplacement des éléments visuels ne doit pas être reflété lorsque la 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 des cas particuliers dont il faut tenir compte lorsque les locuteurs d'une langue qui parle de droite à gauche sont habitués à un positionnement de gauche à droite, par exemple lors de l'utilisation de composeurs de numéros dans les téléphones et de boutons de lecture, de pause, de retour en arrière et d'avance dans 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é sur le sens de lecture naturel du texte. Par défaut, un texte de gauche à droite, comme l'anglais, est aligné sur le côté gauche de la zone de texte, et un texte de droite à gauche, comme l'arabe, est aligné sur le côté droit de la zone de texte. L'alignement d'un élément de texte vide est déterminé par QInputMethod::inputDirection(), en fonction de la locale active du système.

Cet alignement local par défaut peut être remplacé en définissant la propriété horizontalAlignment pour l'élément de texte, ou en activant la mise en miroir de la mise en page à l'aide de la propriété LayoutMirroring attached, qui entraîne la mise en miroir des alignements horizontaux explicites de gauche et de droite. Notez que lorsque LayoutMirroring est défini, la valeur de la propriété horizontalAlignment reste inchangée ; l'alignement effectif de l'élément de texte qui prend en compte 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 la 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 pour contrôler la direction horizontale des mises en page. La définition de layoutDirection à Qt.RightToLeft entraîne la disposition des éléments de la droite vers la gauche. Par défaut, Qt Quick suit le sens de présentation de gauche à droite.

La direction horizontale de la mise en page peut également être inversée grâce à la propriété attachée LayoutMirroring. Cela a pour effet d'inverser l'adresse layoutDirection des positionneurs et des vues. Notez que la valeur réelle de la propriété layoutDirection restera inchangée ; la direction effective de la disposition des positionneurs et des vues qui prend en compte 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 disposition

La propriété ci-jointe LayoutMirroring est fournie pour faciliter la mise en œuvre de la prise en charge de la droite vers la gauche pour les applications existantes de la gauche vers la droite Qt Quick. Elle reproduit le comportement des ancres d'éléments, la direction de la 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 une Item particulière :

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 la 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 de la mise en miroir de cette manière ne modifie pas la valeur réelle des propriétés anchor, layoutDirection ou horizontalAlignment concernées. La propriété distincte en lecture seule effectiveLayoutDirection peut être utilisée pour demander la direction effective de la disposition des positionneurs et des vues de modèle qui prend en compte la mise en miroir. De même, les types Text, TextInput et TextEdit ont obtenu la propriété en lecture seule effectiveHorizontalAlignment pour l'interrogation de l'alignement visuel effectif du texte.

Il convient de noter que les dispositions et animations d'application définies à l'aide des valeurs de la propriété x (par opposition aux ancres ou aux types de positionneurs) ne sont pas affectées par la propriété attachée LayoutMirroring. Par conséquent, l'ajout d'une prise en charge de droite à gauche à ces types de dispositions peut nécessiter quelques modifications du code de votre application, en particulier dans les vues qui reposent à la fois sur les ancres et sur le positionnement basé sur la coordonnée x. Voici une façon d'utiliser la propriété LayoutMirroring attached pour appliquer la mise en miroir à un élément positionné à l'aide des 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 mises en miroir. Dans certains cas, un type visuel est positionné à droite de l'écran pour une meilleure utilisation d'une seule main, parce que la plupart des gens sont droitiers, et non en raison du sens de lecture. Si un type enfant ne doit pas être affecté par l'effet miroir, définissez la propriété LayoutMirroring.enabled de ce type à false.

Qt Quick est conçu pour développer des interfaces utilisateur animées et fluides. Lors de la mise en miroir de votre application, n'oubliez pas de tester que les animations et les transitions continuent à fonctionner comme prévu. Si vous ne disposez pas des ressources nécessaires pour ajouter une prise en charge de droite à gauche pour votre application, il peut être préférable de conserver les dispositions de l'application alignées à gauche et de s'assurer que le texte est traduit et aligné correctement.

Icônes en miroir

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

La plupart des images n'ont pas besoin d'être mises en miroir, mais certaines icônes directionnelles, telles que les flèches, peuvent avoir besoin d'être mises en miroir. La peinture de ces icônes peut être reflétée à l'aide d'une propriété mirror:

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

Default Layout Direction (Direction par défaut de la mise en page)

La propriété Qt.application.layoutDirection permet d'interroger le sens de présentation actif de l'application. Elle hérite de QGuiApplication::layoutDirection(), qui détermine la direction de la présentation à partir du fichier de traduction de la langue active.

Pour définir la direction de la présentation pour une locale particulière, déclarez le littéral de la chaîne dédiée QT_LAYOUT_DIRECTION dans le contexte QGuiApplication comme étant LTR ou RTL.

Tout d'abord, introduisez cette ligne quelque part dans votre code source QML :

qsTr("QT_LAYOUT_DIRECTION","QGuiApplication");

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

Cela ajoute la déclaration suivante au fichier de traduction, où vous pouvez saisir LTR ou 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>

Ensuite, ajoutez 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 reflétée de manière approprié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 la mise en miroir.

Vous pouvez tester que la direction de la 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 dans le sens droite-gauche en appelant la fonction statique QGuiApplication::setLayoutDirection() :

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