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

Обзор

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