Графические интерфейсы с ориентацией справа налево

Обзор

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

qml myapp.qml -translation myapp.qm

Вы можете протестировать приложение в направлении макета справа налево, вызвав статическую функцию QGuiApplication::setLayoutDirection():

QGuiApplication app(argc, argv);
app.setLayoutDirection(Qt::RightToLeft);