Viadeo Twitter Google Bookmarks ! Facebook Digg del.icio.us MySpace Yahoo MyWeb Blinklist Netvouz Reddit Simpy StumbleUpon Bookmarks Windows Live Favorites 
Logo Documentation Qt ·  Page d'accueil  ·  Toutes les classes  ·  Toutes les fonctions  ·  Vues d'ensemble  · 

QML Right-to-left User Interfaces

Overview

This chapter discusses different approaches and options available for implementing right-to-left language support for Qt Quick applications. Some common right-to-left languages include Arabic, Hebrew, Persian and Urdu. Most changes include making sure that text translated to right-to-left languages is properly aligned to the right, and horizontally ordered content in views, lists and grids flows correctly from the right to left.

In right-to-left language speaking cultures, people naturally scan and read graphic elements and text from the right to left. The general rule of thumb is that content (like photos, videos and maps) is not mirrored, but positioning of the content (like application layouts and the flow of visual elements) is mirrored. For example, photos shown in chronological order should flow from right to left, the low end range of the horizontal sliders should be located at the right side of the slider, and text lines should should be aligned to the right side of the available text area. The location of visual elements should not be mirrored when the position is related to a content; for example, when a position marker is shown to indicate a location on a map. Also, there are some special cases you may need to take into account where right-to-left language speakers are used to left-to-right positioning, for example when using number dialers in phones and media play, pause, rewind and forward buttons in music players.

Text Alignment

(This applies to the Text, TextInput and TextEdit elements.)

When the horizontal alignment of a text item is not explicitly set, the text element is automatically aligned to the natural reading direction of the text. By default left-to-right text like English is aligned to the left side of the text area, and right-to-left text like Arabic is aligned to the right side of the text area. The alignment of a text element with empty text takes its alignment cue from QApplication::keyboardInputDirection(), which is based on the active system locale.

This default locale-based alignment can be overriden by setting the horizontalAlignment property for the text element, or by enabling layout mirroring using the LayoutMirroring attached property, which causes any explicit left and right horizontal alignments to be mirrored. Note that when LayoutMirroring is set, the horizontalAlignment property value remains unchanged; use the property LayoutMirroring.enabled instead to query whether the mirroring is in effect.

 // 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
 }

Layout direction of positioners and views

(This applies to the Row, Grid, Flow, ListView and GridView elements.)

From Qt Quick 1.1 onwards, elements used for horizontal positioning and model views have gained a layoutDirection property for controlling the horizontal direction of the layouts. Setting layoutDirection to Qt.RightToLeft causes items to be laid out from the right to left. By default Qt Quick follows the left-to-right layout direction.

The horizontal layout direction can also be reversed through the LayoutMirroring attached property. This causes the effective layoutDirection of positioners and views to be mirrored. Note though that the actual value of the layoutDirection property will remain unchanged; use the property LayoutMirroring.enabled instead to query whether the mirroring is in effect.

 // 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 {}
 }

Layout mirroring

The attached property LayoutMirroring is provided as a convenience for easily implementing right-to-left support for existing left-to-right Qt Quick applications. It mirrors the behavior of Item anchors, the layout direction of positioners and model views, and the explicit text alignment of QML text elements.

You can enable layout mirroring for a particular Item:

 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 {}
     }
 }

Or set all child elements to also inherit the layout direction:

 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 {}
     }
 }

Applying mirroring in this manner does not change the actual value of the relevant anchor, layoutDirection or horizontalAlignment properties. You can use LayoutMirroring.enabled to query whether the mirroring is in effect.

Note that application layouts and animations that are defined using x property values (as opposed to anchors or positioner elements) are not affected by the LayoutMirroring attached property. Therefore, adding right-to-left support to these types of layouts may require some code changes to your application, especially in views that rely on both the anchors and x coordinate-based positioning. Here is one way to use the LayoutMirroring attached property to apply mirroring to an item that is positioned using x coordinates:

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

Not all layouts should necessarily be mirrored. There are cases where a visual element is positioned to the right side of the screen for improved one-handed use, because most people are right-handed, and not because of the reading direction. In the case that a child element should not be affected by mirroring, set the LayoutMirroring.enabled property for that element to false.

Qt Quick is designed for developing animated, fluid user interfaces. When mirroring your application, remember to test that the animations and transitions continue to work as expected. If you do not have the resources to add right-to-left support for your application, it may be better to just keep the application layouts left aligned and just make sure that text is translated and aligned properly.

Mirroring icons

(This applies to Image, BorderImage and AnimatedImage elements.)

Most images do not need to be mirrored, but some directional icons, such as arrows, may need to be mirrored. The painting of these icons can be mirrored with a dedicated mirror property introduced in Qt Quick 1.1:

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

Default layout direction

The Qt.application.layoutDirection property can be used to query the active layout direction of the application. It is based on QApplication::layoutDirection(), which most commonly determines the layout direction from the active language translation file.

To define the layout direction for a particular locale, declare the dedicated string literal QT_LAYOUT_DIRECTION in context QApplication as either "LTR" or "RTL".

You can do this by first introducing this line

 QT_TRANSLATE_NOOP("QApplication", "QT_LAYOUT_DIRECTION");

somewhere in your QML source code and calling lupdate to generate the translation source file.

 lupdate myapp.qml -ts myapp.ts

This will append the following declaration to the translation file, where you can fill in either "LTR" or "RTL" as the translation for the locale.

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

You can test that the layout direction works as expected by running your Qt Quick application with the compiled translation file:

 qmlviewer myapp.qml -translation myapp.qm

You can test your application in right-to-left layout direction simply by executing qmlviewer with a command-line parameter "-reverse":

 qmlviewer myapp.qml -reverse

The layout direction can also be set from C++ by calling the static function QApplication::setLayoutDirection():

 QApplication app(argc, argv);
 app.setLayoutDirection(Qt::RightToLeft);
Publicité

Best Of

Actualités les plus lues

Semaine
Mois
Année
  1. « Quelque chose ne va vraiment pas avec les développeurs "modernes" », un développeur à "l'ancienne" critique la multiplication des bibliothèques 94
  2. Apercevoir la troisième dimension ou l'utilisation multithreadée d'OpenGL dans Qt, un article des Qt Quarterly traduit par Guillaume Belz 0
  3. Les développeurs ignorent-ils trop les failles découvertes dans leur code ? Prenez-vous en compte les remarques des autres ? 17
  4. Pourquoi les programmeurs sont-ils moins payés que les gestionnaires de programmes ? Manquent-ils de pouvoir de négociation ? 42
  5. Quelles nouveautés de C++11 Visual C++ doit-il rapidement intégrer ? Donnez-nous votre avis 10
  6. Adieu qmake, bienvenue qbs : Qt Building Suite, un outil déclaratif et extensible pour la compilation de projets Qt 17
  7. 2017 : un quinquennat pour une nouvelle version du C++ ? Possible, selon Herb Sutter 8
Page suivante

Le Qt Labs au hasard

Logo

Utiliser OpenCL avec Qt

Les Qt Labs sont les laboratoires des développeurs de Qt, où ils peuvent partager des impressions sur le framework, son utilisation, ce que pourrait être son futur. Lire l'article.

Communauté

Ressources

Liens utiles

Contact

  • Vous souhaitez rejoindre la rédaction ou proposer un tutoriel, une traduction, une question... ? Postez dans le forum Contribuez ou contactez-nous par MP ou par email (voir en bas de page).

Qt dans le magazine

Cette page est une traduction d'une page de la documentation de Qt, écrite par Nokia Corporation and/or its subsidiary(-ies). Les éventuels problèmes résultant d'une mauvaise traduction ne sont pas imputables à Nokia. Qt 4.7-snapshot
Copyright © 2012 Developpez LLC. Tous droits réservés Developpez LLC. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents et images sans l'autorisation expresse de Developpez LLC. Sinon, vous encourez selon la loi jusqu'à 3 ans de prison et jusqu'à 300 000 E de dommages et intérêts. Cette page est déposée à la SACD.
Vous avez déniché une erreur ? Un bug ? Une redirection cassée ? Ou tout autre problème, quel qu'il soit ? Ou bien vous désirez participer à ce projet de traduction ? N'hésitez pas à nous contacter ou par MP !
 
 
 
 
Partenaires

Hébergement Web