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

Обзор

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

В культурах, где говорят на языках справа налево, люди естественным образом сканируют и читают графические элементы и текст справа налево. Общее правило заключается в том, что содержимое (например, фотографии, видео и карты) не переворачивается, но позиционирование содержимого (например, макеты приложений и порядок визуальных элементов) переворачивается. Например, фотографии, показанные в хронологическом порядке, должны отображаться справа налево, нижний предел диапазона горизонтальных ползунков должен располагаться справа от ползунка, а строки текста должны выравниваться по правому краю доступной области текста. Положение визуальных элементов не должно переворачиваться, если позиция связана с содержимым; например, когда маркер позиции отображается для обозначения местоположения на карте. Также есть некоторые особые случаи, которые необходимо учитывать, когда носители языков справа налево привыкли к позиционированию слева направо, например, при использовании циферблатов номеров в телефонах и кнопок воспроизведения, паузы, перемотки назад и вперёд в проигрывателях музыки.

Выравнивание текста

(Это относится к типам Text, TextInput и TextEdit.)

Когда горизонтальное выравнивание элемента текста не задано явно, элемент текста автоматически выравнивается по естественному направлению чтения текста. По умолчанию текст слева направо, например, английский, выравнивается по левому краю области текста, а текст справа налево, например, арабский, выравнивается по правому краю области текста. Выравнивание элемента текста с пустым текстом берёт свой ориентир по QInputMethod::inputDirection(), которое основано на активном системном языке.

Это выравнивание по умолчанию, основанное на языке, может быть переопределено путём установки свойства `text.horizontalAlignment` для элемента текста или путём включения зеркального отображения макета с помощью присоединённого свойства LayoutMirroring, которое вызывает зеркальное отображение всех явных горизонтальных выравниваний по левому и правому краю. Обратите внимание, что при установке LayoutMirroring значение свойства `text.horizontalAlignment` остаётся неизменным; эффективное выравнивание элемента текста, которое учитывает зеркальное отображение, может быть прочитано из свойства `text.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` останется неизменным; эффективное направление макета позиционеров и представлений, которое учитывает зеркальное отображение, может быть прочитано из свойства `layoutDirectionMirrored`.

// 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 {
    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 {}
    }
}

Применение зеркального отображения таким образом не изменяет фактического значения соответствующих якорей, `x`-координат или `width` свойств. Отдельное свойство только для чтения `layoutDirectionMirrored` может использоваться для запроса эффективного направления макета позиционеров и представлений моделей, которое учитывает зеркальное отображение. Аналогичным образом типы 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.)

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

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

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

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

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

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

QT_TRANSLATE_NOOP("QGuiApplication", "QT_LAYOUT_DIRECTION");

в какой-либо части вашего кода QML и вызвав `qmlscene -translate` для генерации файла исходного перевода.

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