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

Обзор

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

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

qsTr("QT_LAYOUT_DIRECTION","QGuiApplication");

где-то в вашем коде 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);