Interfaces de usuario de derecha a izquierda

Visión general

En este capítulo se analizan los distintos enfoques y opciones disponibles para implementar el soporte de idiomas de derecha a izquierda en las aplicaciones Qt Quick. Algunos de los idiomas más comunes son el árabe, el hebreo, el persa y el urdu. La mayoría de los cambios incluyen asegurarse de que el texto traducido a idiomas de derecha a izquierda esté correctamente alineado a la derecha, y que el contenido ordenado horizontalmente en vistas, listas y cuadrículas fluya correctamente de derecha a izquierda.

En las culturas que hablan idiomas de derecha a izquierda, las personas escanean y leen de forma natural los elementos gráficos y el texto de derecha a izquierda. La regla general es que el contenido (como fotos, vídeos y mapas) no se refleja, pero sí la posición del contenido (como el diseño de aplicaciones y el flujo de elementos visuales). Por ejemplo, las fotos mostradas en orden cronológico deben fluir de derecha a izquierda, el extremo inferior de los deslizadores horizontales debe situarse a la derecha del deslizador y las líneas de texto deben alinearse a la derecha del área de texto disponible. La ubicación de los elementos visuales no debe reflejarse cuando la posición está relacionada con un contenido; por ejemplo, cuando se muestra un marcador de posición para indicar una ubicación en un mapa. Además, hay algunos casos especiales que hay que tener en cuenta cuando los hablantes de idiomas de derecha a izquierda están acostumbrados a la posición de izquierda a derecha, por ejemplo cuando se utilizan marcadores de números en teléfonos y botones de reproducción multimedia, pausa, rebobinado y avance en reproductores de música.

Alineación del texto

(Esto se aplica a los tipos Text, TextInput y TextEdit ).

Cuando no se establece explícitamente la alineación horizontal de un elemento de texto, éste se alinea automáticamente en la dirección natural de lectura del texto. Por defecto, el texto de izquierda a derecha, como el inglés, se alinea a la izquierda del área de texto, y el texto de derecha a izquierda, como el árabe, se alinea a la derecha del área de texto. La alineación de un elemento de texto con texto vacío se basa en QInputMethod::inputDirection(), que a su vez se basa en la configuración regional activa del sistema.

Esta alineación por defecto basada en la configuración regional puede ser anulada estableciendo la propiedad horizontalAlignment para el elemento de texto, o habilitando el reflejo del diseño utilizando la propiedad adjunta LayoutMirroring, que hace que cualquier alineación horizontal explícita izquierda y derecha sea reflejada. Tenga en cuenta que cuando se establece LayoutMirroring, el valor de la propiedad horizontalAlignment permanece inalterado; la alineación efectiva del elemento de texto que tiene en cuenta el reflejo puede leerse en la propiedad 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
}

Dirección de maquetación de posicionadores y vistas

(Esto se aplica a los tipos Row, Grid, Flow, ListView y GridView ).

Los tipos utilizados para posicionadores horizontales y vistas de modelos tienen la propiedad layoutDirection para controlar la dirección horizontal de las disposiciones. Establecer layoutDirection a Qt.RightToLeft hace que los elementos se dispongan de derecha a izquierda. Por defecto Qt Quick sigue la dirección de disposición de izquierda a derecha.

La dirección de la disposición horizontal también puede invertirse mediante la propiedad adjunta LayoutMirroring. Esto hace que el layoutDirection efectivo de los posicionadores y las vistas se reflejen. Tenga en cuenta que el valor real de la propiedad layoutDirection permanecerá inalterado; la dirección de diseño efectiva de los posicionadores y las vistas que tiene en cuenta el reflejo puede leerse en la propiedad 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 {}
}

Reflejo del diseño

La propiedad adjunta LayoutMirroring se proporciona para facilitar la implementación del soporte de derecha a izquierda en aplicaciones existentes de izquierda a derecha Qt Quick. Refleja el comportamiento de los anclajes de elemento, la dirección de diseño de los posicionadores y las vistas de modelo, y la alineación de texto explícita de los tipos de texto QML.

Puede activar la duplicación del diseño para un determinado tipo de texto 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 {}
    }
}

O configurar todos los tipos hijos para que también hereden la dirección del diseño:

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

La aplicación del reflejo de esta manera no cambia el valor real de las propiedades de anclaje, layoutDirection o horizontalAlignment relevantes. La propiedad independiente de sólo lectura effectiveLayoutDirection puede utilizarse para consultar la dirección de diseño efectiva de los posicionadores y las vistas modelo que tienen en cuenta el reflejo. Del mismo modo, los tipos Text, TextInput y TextEdit han ganado la propiedad de sólo lectura effectiveHorizontalAlignment para consultar la alineación visual efectiva del texto.

Tenga en cuenta que los diseños de aplicación y las animaciones que se definen utilizando los valores de la propiedad x (a diferencia de los anclajes o los tipos de posicionador) no se ven afectados por la propiedad adjunta LayoutMirroring. Por lo tanto, añadir soporte de derecha a izquierda a estos tipos de diseños puede requerir algunos cambios de código en tu aplicación, especialmente en vistas que dependen tanto de las anclas como del posicionamiento basado en coordenadas x. A continuación se muestra una forma de utilizar la propiedad adjunta LayoutMirroring para aplicar el reflejo a un elemento posicionado mediante coordenadas x:

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

No todas las vistas deben reflejarse necesariamente. Hay casos en los que un tipo visual se posiciona a la derecha de la pantalla para mejorar su uso con una sola mano, porque la mayoría de la gente es diestra, y no por la dirección de lectura. En el caso de que un tipo hijo no deba verse afectado por el reflejo, establezca la propiedad LayoutMirroring.enabled para ese tipo a false.

Qt Quick está diseñado para desarrollar interfaces de usuario animadas y fluidas. Cuando refleje su aplicación, recuerde probar que las animaciones y transiciones siguen funcionando como se esperaba. Si no dispone de los recursos necesarios para añadir soporte de derecha a izquierda a su aplicación, puede que sea mejor mantener los diseños de la aplicación alineados a la izquierda y asegurarse de que el texto se traduce y alinea correctamente.

Iconos reflejados

(Esto se aplica a los tipos Image, BorderImage y AnimatedImage.)

La mayoría de las imágenes no necesitan ser reflejadas, pero algunos iconos direccionales, como las flechas, pueden necesitar ser reflejados. La pintura de estos iconos puede reflejarse con una propiedad específica mirror:

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

Dirección predeterminada del diseño

Utilice la propiedad Qt.application.layoutDirection para consultar la dirección de diseño activa de la aplicación. Hereda de QGuiApplication::layoutDirection(), que determina la dirección del diseño a partir del archivo de traducción del idioma activo.

Para definir la dirección de diseño para una localización concreta, declare la cadena literal dedicada QT_LAYOUT_DIRECTION en el contexto QGuiApplication como LTR o RTL.

En primer lugar, introduzca esta línea en algún lugar de su código fuente QML:

qsTr("QT_LAYOUT_DIRECTION","QGuiApplication");

A continuación, utilice Using lupdate para generar el archivo fuente de traducción.

Esto añade la siguiente declaración al archivo de traducción, donde puede introducir LTR o RTL como traducción para la configuración regional.

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

A continuación, añade los siguientes enlaces al componente QML raíz de tu aplicación:

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

El primer enlace garantiza que la interfaz de usuario se reflejará adecuadamente cuando se establezca una configuración regional de derecha a izquierda. El segundo garantiza que los elementos hijos del componente raíz también respetarán el reflejo.

Puede comprobar que la dirección del diseño funciona correctamente ejecutando la aplicación Qt Quick con el archivo de traducción compilado:

qml myapp.qml -translation myapp.qm

Puede probar su aplicación en la dirección de maquetación de derecha a izquierda llamando a la función estática QGuiApplication::setLayoutDirection():

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