Benutzeroberflächen mit Schreibrichtung von rechts nach links

Übersicht

In diesem Kapitel werden verschiedene Ansätze und Optionen zur Implementierung der Unterstützung von Sprachen mit Schreibrichtung von rechts nach links für „ Qt Quick “-Anwendungen behandelt. Zu den gängigen Sprachen mit Rechts-nach-Links-Schreibrichtung gehören Arabisch, Hebräisch, Persisch und Urdu. Die meisten Anpassungen bestehen darin, sicherzustellen, dass in diese Sprachen übersetzter Text korrekt rechtsbündig ausgerichtet ist und horizontal angeordnete Inhalte in Ansichten, Listen und Rastern korrekt von rechts nach links fließen.

In Kulturen, in denen Sprachen von rechts nach links gesprochen werden, nehmen Menschen grafische Elemente und Text ganz natürlich von rechts nach links wahr und lesen sie in dieser Reihenfolge. Als allgemeine Faustregel gilt, dass Inhalte (wie Fotos, Videos und Karten) nicht gespiegelt werden, die Positionierung der Inhalte (wie Anwendungslayouts und der Fluss visueller Elemente) jedoch gespiegelt wird. Beispielsweise sollten Fotos, die in chronologischer Reihenfolge angezeigt werden, von rechts nach links verlaufen, der untere Endbereich horizontaler Schieberegler sollte sich auf der rechten Seite des Schiebereglers befinden und Textzeilen sollten an der rechten Seite des verfügbaren Textbereichs ausgerichtet sein. Die Position visueller Elemente sollte nicht gespiegelt werden, wenn sie sich auf einen Inhalt bezieht; beispielsweise wenn eine Positionsmarkierung angezeigt wird, um einen Ort auf einer Karte zu kennzeichnen. Zudem gibt es einige Sonderfälle, die Sie möglicherweise berücksichtigen müssen, bei denen Sprecher von Sprachen mit Schreibrichtung von rechts nach links an die Positionierung von links nach rechts gewöhnt sind, beispielsweise bei der Verwendung von Wählfeldern in Telefonen und bei den Schaltflächen für Wiedergabe, Pause, Zurückspulen und Vorspulen in Musikplayern.

Textausrichtung

(Dies gilt für die Typen „ Text “, „ TextInput “ und „ TextEdit “.)

Wenn die horizontale Ausrichtung eines Textelements nicht explizit festgelegt ist, wird das Textelement automatisch an die natürliche Leserichtung des Textes angepasst. Standardmäßig wird von links nach rechts geschriebener Text wie Englisch am linken Rand des Textbereichs ausgerichtet, während von rechts nach links geschriebener Text wie Arabisch am rechten Rand des Textbereichs ausgerichtet wird. Die Ausrichtung eines Textelements mit leerem Text richtet sich nach der Eigenschaft ` QInputMethod::inputDirection()`, die auf der aktiven Systemlokalisierung basiert.

Diese standardmäßige, auf der Systemlokalisierung basierende Ausrichtung kann überschrieben werden, indem die Eigenschaft „ horizontalAlignment “ für das Textelement festgelegt wird oder indem die Layout-Spiegelung mithilfe der angehängten Eigenschaft „ LayoutMirroring “ aktiviert wird, wodurch alle expliziten horizontalen Ausrichtungen nach links und rechts gespiegelt werden. Beachten Sie, dass bei aktivierter Option „ LayoutMirroring “ der Wert der Eigenschaft „ horizontalAlignment “ unverändert bleibt; die tatsächliche Ausrichtung des Textelements unter Berücksichtigung der Spiegelung kann über die Eigenschaft „ effectiveHorizontalAlignment “ abgelesen werden.

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

Ausrichtungsrichtung von Positionierern und Ansichten

(Dies gilt für die Typen „ Row “, „ Grid “, „ Flow “, „ ListView “ und „ GridView “.)

Typen, die für die horizontale Positionierung und Modellansichten verwendet werden, verfügen über die Eigenschaft „ layoutDirection “ zur Steuerung der horizontalen Ausrichtungsrichtung. Wenn „ layoutDirection “ auf „ Qt.RightToLeft “ gesetzt wird, werden Elemente von rechts nach links angeordnet. Standardmäßig folgt „ Qt Quick “ der Ausrichtungsrichtung von links nach rechts.

Die horizontale Layout-Richtung kann auch über die angehängte Eigenschaft „ LayoutMirroring “ umgekehrt werden. Dies bewirkt, dass die effektive „ layoutDirection “-Eigenschaft von Positionierern und Ansichten gespiegelt wird. Beachten Sie, dass der tatsächliche Wert der Eigenschaft „ layoutDirection “ unverändert bleibt; die effektive Layout-Richtung von Positionierern und Ansichten, die die Spiegelung berücksichtigt, kann über die Eigenschaft „ effectiveLayoutDirection “ abgelesen werden.

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

Die angehängte Eigenschaft „ LayoutMirroring “ dient als Hilfsmittel zur einfachen Implementierung der Unterstützung für die Schreibrichtung von rechts nach links in bestehenden Anwendungen mit einer Layout-Richtung von links nach rechts ( Qt Quick ). Sie spiegelt das Verhalten von Elementverankerungen, die Layout-Richtung von Positionierern und Modellansichten sowie die explizite Textausrichtung von QML-Texttypen wider.

Sie können die Layout-Spiegelung für ein bestimmtes ` Item` aktivieren:

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

Oder legen Sie fest, dass alle untergeordneten Typen die Layoutrichtung ebenfalls erben:

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

Die Anwendung der Spiegelung auf diese Weise ändert den tatsächlichen Wert der entsprechenden Anker-, „ layoutDirection “- oder „ horizontalAlignment “-Eigenschaften nicht. Die separate, schreibgeschützte Eigenschaft „ effectiveLayoutDirection “ kann verwendet werden, um die effektive Layoutrichtung von Positionierern und Modellansichten abzufragen, die die Spiegelung berücksichtigt. In ähnlicher Weise verfügen die Typen „ Text “, „ TextInput “ und „ TextEdit “ nun über die schreibgeschützte Eigenschaft „ effectiveHorizontalAlignment “ zur Abfrage der effektiven visuellen Ausrichtung von Text.

Beachten Sie, dass Anwendungslayouts und Animationen, die mithilfe von „ x “-Eigenschaftswerten (im Gegensatz zu Ankerpunkten oder Positionierungstypen) definiert werden, von der angehängten Eigenschaft „ LayoutMirroring “ nicht betroffen sind. Daher kann die Erweiterung dieser Layouttypen um Unterstützung für die Schreibrichtung von rechts nach links einige Codeänderungen an Ihrer Anwendung erfordern, insbesondere in Ansichten, die sowohl auf Ankerpunkten als auch auf einer x-Koordinaten-basierten Positionierung beruhen. Hier ist eine Möglichkeit, die angehängte Eigenschaft „ LayoutMirroring “ zu verwenden, um ein Element, das mithilfe von „ x “-Koordinaten positioniert ist, zu spiegeln:

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

Nicht alle Layouts müssen zwangsläufig gespiegelt werden. Es gibt Fälle, in denen ein visuelles Element auf der rechten Seite des Bildschirms positioniert wird, um die Einhandbedienung zu verbessern – da die meisten Menschen Rechtshänder sind – und nicht aufgrund der Leserichtung. Falls ein untergeordnetes Element nicht von der Spiegelung betroffen sein soll, setzen Sie die Eigenschaft „ LayoutMirroring.enabled “ für dieses Element auf „false“.

Qt Quick ist für die Entwicklung animierter, flüssiger Benutzeroberflächen konzipiert. Denken Sie beim Spiegeln Ihrer Anwendung daran, zu testen, ob die Animationen und Übergänge weiterhin wie erwartet funktionieren. Wenn Sie nicht über die Ressourcen verfügen, um Ihre Anwendung um eine Unterstützung für die Schreibrichtung von rechts nach links zu erweitern, ist es möglicherweise besser, die Layouts der Anwendung einfach linksbündig zu belassen und nur sicherzustellen, dass der Text übersetzt und korrekt ausgerichtet ist.

Spiegelung von Symbolen

(Dies gilt für die Typen „ Image “, „ BorderImage “ und „ AnimatedImage “.)

Die meisten Bilder müssen nicht gespiegelt werden, aber einige richtungsbezogene Symbole, wie z. B. Pfeile, müssen möglicherweise gespiegelt werden. Die Darstellung dieser Symbole kann mit einer speziellen mirror -Eigenschaft gespiegelt werden:

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

Standard-Layoutrichtung

Verwenden Sie die Eigenschaft „ Qt.application.layoutDirection “, um die aktive Layoutrichtung der Anwendung abzufragen. Sie erbt von „ QGuiApplication::layoutDirection()“, das die Layoutrichtung anhand der aktiven Sprachübersetzungsdatei ermittelt.

Um die Layoutrichtung für eine bestimmte Locale zu definieren, deklarieren Sie das entsprechende String-Literal ` QT_LAYOUT_DIRECTION ` im Kontext ` QGuiApplication ` entweder als ` LTR ` oder als ` RTL`.

Fügen Sie zunächst irgendwo in Ihrem QML-Quellcode folgende Zeile ein:

qsTr("QT_LAYOUT_DIRECTION","QGuiApplication");

Verwenden Sie anschließend „lupdate“, um die Übersetzungsquelldatei zu generieren.

Dadurch wird die folgende Deklaration an die Übersetzungsdatei angehängt, in der Sie entweder LTR oder RTL als Übersetzung für die Sprachumgebung eingeben können.

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

Fügen Sie anschließend die folgenden Bindungen zur QML-Stammkomponente Ihrer Anwendung hinzu:

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

Die erste Bindung stellt sicher, dass die Benutzeroberfläche entsprechend gespiegelt wird, wenn eine von rechts nach links geschriebene Spracheinstellung festgelegt ist. Die zweite Bindung stellt sicher, dass auch untergeordnete Elemente der Stammkomponente die Spiegelung berücksichtigen.

Sie können testen, ob die Layoutrichtung wie erwartet funktioniert, indem Sie Ihre „ Qt Quick “-Anwendung mit der kompilierten Übersetzungsdatei ausführen:

qml myapp.qml -translation myapp.qm

Sie können Ihre Anwendung in der Layout-Richtung „von rechts nach links“ testen, indem Sie die statische Funktion ` QGuiApplication::setLayoutDirection()` aufrufen:

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