Пользовательские интерфейсы с направленностью справа налево

Обзор

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

Начиная с Qt Quick 1.1, типы, используемые для горизонтального позиционирования и представлений моделей, получили свойство 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 введенного в Qt Quick 1.1:

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