Rechts-nach-links-Benutzerschnittstellen

Überblick

In diesem Kapitel werden verschiedene Ansätze und Optionen für die Implementierung von Rechts-nach-Links-Sprachunterstützung für Qt Quick Anwendungen erörtert. Einige gängige Rechts-nach-links-Sprachen sind Arabisch, Hebräisch, Persisch und Urdu. Bei den meisten Änderungen muss sichergestellt werden, dass der in Rechts-nach-Links-Sprachen übersetzte Text korrekt rechts ausgerichtet ist und dass horizontal angeordnete Inhalte in Ansichten, Listen und Rastern korrekt von rechts nach links fließen.

In Kulturen, in denen von rechts nach links gesprochen wird, scannen und lesen die Menschen grafische Elemente und Text ganz natürlich von rechts nach links. Als Faustregel gilt, dass Inhalte (wie Fotos, Videos und Karten) nicht gespiegelt werden, aber die Positionierung der Inhalte (wie Anwendungslayouts und der Fluss der visuellen Elemente) wird gespiegelt. So sollten z. B. Fotos, die in chronologischer Reihenfolge angezeigt werden, von rechts nach links fließen, der untere Bereich der horizontalen Schieberegler sollte sich auf der rechten Seite des Schiebereglers befinden, und Textzeilen sollten an der rechten Seite des verfügbaren Textbereichs ausgerichtet werden. Die Position visueller Elemente sollte nicht gespiegelt werden, wenn die Position mit einem Inhalt zusammenhängt, z. B. wenn eine Positionsmarkierung angezeigt wird, um einen Standort auf einer Karte anzugeben. Außerdem gibt es einige Sonderfälle, die Sie berücksichtigen müssen, wenn Sprecher, die von rechts nach links sprechen, an die Positionierung von links nach rechts gewöhnt sind, z. B. bei der Verwendung von Nummernwählern in Telefonen und von Schaltflächen zum Abspielen, Anhalten, Zurück- und Vorspulen von Medien in Musikplayern.

Textausrichtung

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

Wenn die horizontale Ausrichtung eines Textelements nicht ausdrücklich festgelegt ist, wird das Textelement automatisch an der natürlichen Leserichtung des Textes ausgerichtet. Standardmäßig wird Text von links nach rechts (z. B. Englisch) an der linken Seite des Textbereichs ausgerichtet, und Text von rechts nach links (z. B. Arabisch) an der rechten Seite des Textbereichs. Die Ausrichtung eines Textelements mit leerem Text wird von QInputMethod::inputDirection() übernommen, das auf dem aktiven Gebietsschema des Systems basiert.

Diese standardmäßige, auf dem Gebietsschema basierende Ausrichtung kann außer Kraft gesetzt werden, indem die Eigenschaft horizontalAlignment für das Textelement gesetzt wird oder indem die Spiegelung des Layouts mit der angehängten Eigenschaft LayoutMirroring aktiviert wird, die bewirkt, dass alle expliziten linken und rechten horizontalen Ausrichtungen gespiegelt werden. Beachten Sie, dass, wenn LayoutMirroring gesetzt ist, der Wert der Eigenschaft horizontalAlignment unverändert bleibt; die effektive Ausrichtung des Textelements, die die Spiegelung berücksichtigt, kann aus der Eigenschaft effectiveHorizontalAlignment gelesen 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
}

Layout-Richtung von Positionierern und Ansichten

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

Typen, die für horizontale Positionierungen und Modellansichten verwendet werden, haben die Eigenschaft layoutDirection zur Steuerung der horizontalen Richtung der Layouts. Wenn Sie layoutDirection auf Qt.RightToLeft setzen, werden die Elemente von rechts nach links angeordnet. Standardmäßig folgt Qt Quick der Layout-Richtung von links nach rechts.

Die horizontale Layout-Richtung kann auch über die angehängte Eigenschaft LayoutMirroring umgekehrt werden. Dies bewirkt, dass die effektive layoutDirection 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 aus der Eigenschaft effectiveLayoutDirection gelesen 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 der einfachen Implementierung einer Rechts-nach-Links-Unterstützung für bestehende Links-nach-Rechts-Anwendungen Qt Quick. Sie spiegelt das Verhalten von Elementankern, die Layoutrichtung von Positionierern und Modellansichten und die explizite Textausrichtung von QML-Texttypen.

Sie können die Layout-Spiegelung für einen bestimmten 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 Sie legen fest, dass alle untergeordneten Typen auch die Layout-Richtung 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 nicht den tatsächlichen Wert der relevanten Eigenschaften Anker, layoutDirection oder horizontalAlignment. 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 haben die Typen Text, TextInput und TextEdit die Read-Only-Eigenschaft effectiveHorizontalAlignment zur Abfrage der effektiven visuellen Ausrichtung von Text erhalten.

Beachten Sie, dass Anwendungslayouts und Animationen, die unter Verwendung von x Eigenschaftswerten (im Gegensatz zu Ankern oder Positionierertypen) definiert werden, nicht von der angehängten Eigenschaft LayoutMirroring betroffen sind. Daher kann das Hinzufügen von Rechts-nach-Links-Unterstützung zu diesen Arten von Layouts einige Codeänderungen in Ihrer Anwendung erfordern, insbesondere in Ansichten, die sowohl auf die Anker als auch auf die x-Koordinaten-basierte Positionierung angewiesen sind. Hier ist eine Möglichkeit, die Eigenschaft LayoutMirroring attached zu verwenden, um die Spiegelung auf ein Element anzuwenden, das mit x Koordinaten positioniert ist:

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

Nicht alle Layouts sollten unbedingt gespiegelt werden. Es gibt Fälle, in denen ein visueller Typ auf der rechten Seite des Bildschirms positioniert wird, um die einhändige Bedienung zu erleichtern, weil die meisten Menschen Rechtshänder sind, und nicht wegen der Leserichtung. Wenn ein untergeordneter Typ nicht von der Spiegelung betroffen sein soll, setzen Sie die Eigenschaft LayoutMirroring.enabled für diesen Typ auf false.

Qt Quick ist für die Entwicklung animierter, flüssiger Benutzeroberflächen konzipiert. Wenn Sie Ihre Anwendung spiegeln, denken Sie daran zu testen, ob die Animationen und Übergänge weiterhin wie erwartet funktionieren. Wenn Sie nicht über die Ressourcen verfügen, um Ihrer Anwendung eine Rechts-nach-Links-Unterstützung hinzuzufügen, ist es möglicherweise besser, die Anwendungslayouts linksbündig zu halten und lediglich sicherzustellen, dass der Text richtig übersetzt und ausgerichtet ist.

Spiegeln von Icons

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

Die meisten Bilder müssen nicht gespiegelt werden, aber einige Richtungssymbole, wie z. B. Pfeile, müssen möglicherweise gespiegelt werden. Das Bild dieser Icons kann mit einer speziellen Eigenschaft mirror gespiegelt werden:

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

Standard-Layout-Richtung

Verwenden Sie die Eigenschaft Qt.application.layoutDirection, um die aktive Layout-Richtung der Anwendung abzufragen. Sie erbt QGuiApplication::layoutDirection(), die die Layoutrichtung aus der aktiven Sprachübersetzungsdatei ermittelt.

Um die Layout-Richtung für ein bestimmtes Gebietsschema festzulegen, deklarieren Sie das dedizierte String-Literal QT_LAYOUT_DIRECTION im Kontext QGuiApplication entweder als LTR oder RTL.

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

qsTr("QT_LAYOUT_DIRECTION","QGuiApplication");

Verwenden Sie dann Using lupdate, um die Übersetzungsquelldatei zu erzeugen.

Dadurch wird die folgende Deklaration an die Übersetzungsdatei angehängt, in der Sie entweder LTR oder RTL als Übersetzung für das Gebietsschema 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>

Als Nächstes fügen Sie die folgenden Bindungen zur Stamm-QML-Komponente 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 ein Gebietsschema von rechts nach links eingestellt ist. Die zweite Bindung stellt sicher, dass untergeordnete Elemente der Stammkomponente die Spiegelung ebenfalls 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 rechts-nach-links testen, indem Sie die statische Funktion QGuiApplication::setLayoutDirection() aufrufen:

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