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

Обзор

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