Интерфейсы пользователей с направлением справа налево

Обзор

В этом разделе рассматриваются различные подходы и варианты реализации поддержки языков с направлением справа налево для приложений 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:

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

Не все макеты обязательно должны отображаться в зеркальном виде. Есть случаи, когда визуальный тип позиционируется справа от экрана для улучшения одноручного использования, потому что большинство людей правши, а не из-за направления чтения. В случае, если дочерний тип не должен быть затронут зеркальным отображением, установите свойство LayoutMirroring.enabled для этого типа в значение false.

Qt Quick разработан для разработки анимированных, плавных пользовательских интерфейсов. При отображении вашего приложения в зеркальном виде не забудьте проверить, работают ли анимации и переходы как ожидалось. Если у вас нет ресурсов для добавления поддержки направления справа налево в ваше приложение, лучше просто сохранить макеты приложения слева направо и просто убедиться, что текст переведён и правильно выровнен.

Зеркальное отображение иконок

(Это относится к типам Image, BorderImage и AnimatedImage.)

Большинство изображений не нужно отображать в зеркальном виде, но некоторые направленные значки, такие как стрелки, могут потребовать зеркального отображения. Отображение этих значков в зеркальном виде можно выполнить с помощью специального свойства mirror.

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

Направление макета по умолчанию

Свойство Qt.application.layoutDirection можно использовать для запроса активного направления макета приложения. Оно основано на QGuiApplication::layoutDirection(), которое чаще всего определяет направление макета из активного файла перевода языка.

Для определения направления макета для конкретного языкового окружения, объявите специальную строковую литерал QT_LAYOUT_DIRECTION в контексте QGuiApplication как "LTR" или "RTL".

Вы можете сделать это, сначала добавив эту строку

QT_TRANSLATE_NOOP("QGuiApplication", "QT_LAYOUT_DIRECTION");

в ваш исходный код QML и вызвав lupdate для генерации файла исходного перевода.

lupdate myapp.qml -ts myapp.ts

Это добавит следующее объявление в файл перевода, где вы можете заполнить либо "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>

Вы можете проверить, что направление макета работает как ожидается, запустив приложение Qt Quick с скомпилированным файлом перевода:

qmlscene myapp.qml -translation myapp.qm

Вы можете протестировать ваше приложение в направлении макета справа налево, просто выполнив qmlscene с параметром командной строки "-reverse":

qmlscene myapp.qml -reverse

Направление макета также можно установить из C++ с помощью вызова статической функции QGuiApplication::setLayoutDirection():

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