从右向左的用户界面

概览

本章讨论了实现 Qt Quick 应用右向左语言支持的多种方法和选项。一些常见的右向左语言包括阿拉伯语、希伯来语、波斯语和乌尔都语。大多数更改包括确保将文本正确对齐到右侧，并在视图、列表和网格中按从右至左的顺序正确流动。

在说右向左语言的文化中，人们自然从右到左扫描和阅读图形元素和文本。一般规则是，内容（如照片、视频和地图）不进行镜像，但内容的位置（如应用程序布局和视觉元素的流动）进行镜像。例如，按时间顺序显示的照片应从右至左流动，水平滑块的最低端应位于滑块的右侧，而行文应对齐到可用的文本区域的右侧。当位置与内容相关时，视觉元素的位置不应进行镜像；例如，当在地图上指示位置时，位置标记应显示。此外，还有一些特殊情况需要考虑，即右向左语言使用者习惯于从左到右的位置，例如在手机中使用数字拨号器以及在音乐播放器中使用播放、暂停、快进和快退按钮。

文本对齐

（适用于 Text、TextInput 和 TextEdit 类型。）

当未显式设置文本项的水平对齐时，文本元素会自动对齐到文本的自然阅读方向。默认情况下，英语等从左到右的文本对齐到文本区域的左侧，而阿拉伯语等从右到左的文本对齐到文本区域的右侧。具有空文本的文本元素的对其方式取决于 QInputMethod::inputDirection，该函数基于活动系统区域设置。

可以通过为文本元素设置 horizontalAlignment 属性或通过启用布局镜像属性来覆盖基于区域的默认对齐，使用具有 LayoutMirroring 的附件属性。这将使任何显式的左右水平对齐进行镜像。请注意，当设置 LayoutMirroring 时，horizontalAlignment 属性值保持不变；考虑镜像的有效对齐可从 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
}

坐标器和视图的布局方向

（适用于 Row、Grid、Flow、ListView 和 GridView 类型。）

用于水平和模型视图定位的类型具有用于控制布局水平方向的layoutDirection属性。将layoutDirection设置为Qt.RightToLeft会导致从右到左进行布局。默认情况下，Qt Quick遵循从左到右的布局方向。

水平布局方向也可以通过附加属性LayoutMirroring反向。这将导致定位器和视图的有效layoutDirection反向。请注意，layoutDirection属性的值将保持不变；考虑镜像是如何实现的，可以从前面的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 {}
}

布局镜像

附加属性LayoutMirroring提供了方便，用于轻松实现现有从左到右Qt Quick应用程序的从右到左支持。它会镜像项目锚点、定位器和模型视图的布局方向，以及QML文本类型的显式文本对齐。

您可以为特定的项目启用布局镜像

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

或者将所有子类型设置为继承布局方向

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

以这种方式应用镜像不会更改与相关锚点、layoutDirection或horizontalAlignment属性的实际值。可以通过单独的只读属性effectiveLayoutDirection来查询认为镜像的情况下的定位器和模型视图的有效布局方向。同样，Text、TextInput和TextEdit类型已获得只读属性effectiveHorizontalAlignment以查询文本的有效视觉对齐。对于锚点，只读属性anchors.mirrored反映了是否已镜像锚点。

请注意，使用x属性值（与锚点或定位器类型不同）定义的应用程序布局和动画不受LayoutMirroring附加属性的影响。因此，为这些类型的布局添加从右到左支持可能需要在应用程序中进行一些代码更改，尤其是在依赖于锚点和基于x坐标定位的视图。以下是使用LayoutMirroring附加属性对使用x坐标定位的项目应用镜像的一种方法：

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

并非所有布局都 necessarily 必须镜像。有一种情况，一个视觉类型被定位到屏幕的右侧以提高单手使用，因为大多数人都是右撇子，而不是因为阅读方向。如果子类型不应受镜像影响，则将此类型的LayoutMirroring.enabled属性设置为false。

Qt Quick是为开发动画流畅的用户界面而设计的。在镜像应用程序时，请记住测试动画和过渡是否按预期继续工作。如果您没有为应用程序添加从右到左支持的资源，则最好只保留应用程序布局左对齐，并确保文本已正确翻译和对齐。

镜像图标

（适用于Image、BorderImage和AnimatedImage类型。）

大多数图像不需要镜像，但一些方向图标，如箭头，可能需要镜像。这些图标的绘制可以使用专门的mirror属性进行镜像。

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

默认布局方向

使用 Qt.application.layoutDirection 属性来查询应用程序的活动布局方向。它继承自 QGuiApplication::layoutDirection()，该属性从活动语言翻译文件中确定布局方向。

为特定区域定义布局方向，请在 QGuiApplication 上下文中声明专用字符串字面量 QT_LAYOUT_DIRECTION 为 LTR 或 RTL。

首先，在您的 QML 源代码中某处引入此行

qsTr("QT_LAYOUT_DIRECTION","QGuiApplication");

然后使用 Using lupdate 生成交译源文件。

这将向翻译文件中添加以下声明，您可以在其中输入 LTR 或 RTL 作为该区域的翻译。

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

接下来，向您的应用程序根 QML 组件添加以下绑定

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

第一个绑定确保在设置为从右到左的区域时，用户界面将适当翻转。第二个绑定确保根组件的子项也会尊重翻转。

您可以通过运行编译后的带有翻译文件的 Qt Quick 应用程序来测试布局方向是否按预期工作

qml myapp.qml -translation myapp.qm

您可以通过调用静态函数 QGuiApplication::setLayoutDirection() 来测试应用程序在从右到左布局方向中的表现

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