从右到左的用户界面

概述

本章讨论了为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 ）的应用程序提供便捷支持，以便轻松实现从右到左（right-to-left）功能。该属性会镜像项锚点、定位器和模型视图的布局方向，以及QML文本类型的显式文本对齐行为。

您可以为特定的 `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 {}
    }
}

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

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 ，用于查询文本的实际视觉对齐方式。

请注意，使用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;
    }
}

并非所有布局都必须进行镜像处理。在某些情况下，视觉元素被定位在屏幕右侧是为了改善单手操作体验——因为大多数人是右利手，而非出于阅读方向的考虑。如果某个子元素不应受镜像处理影响，请将其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");

然后使用 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);