QML - Урок 025. Динамический перевод мультиязычного приложения на QML

QTranslator, перевод, Qt, QML, translation

После того, как мы ознакомились с переводами интерфейса приложения на Qt/C++ , настало время изучить возможности динамического перевода приложения, интерфейс которого написан на QML.

При разработке на QML есть пара моментов, которые нужно учесть, в отличие от стандартного приложения на QWidgets, а именно:

1. Требуется дополнительная настройка .pro файла проекта;
2. Сам процесс загрузки переводов для нужного языка осуществляется в C++ слое;
3. Переинициализация перевода интерфейса осуществляется в QML слое с помощью функции qsTr();
4. После загрузки перевода, нужно отправить сигнал из C++ слоя в QML слой, чтобы заново перевести интерфейс приложения, что аналогично и для С++ приложения, но требует настройки взаимодействия С++ слоя с QML слоем.

Структура проекта

Создаём проект, в который будут входит следующие файлы:

• QmlLanguage.pro - профайл проекта;
• deployment.pri - файл настройки деплоя, создаётся по умолчанию;
• main.cpp - файл исходных кодов с функцией main;
• qmltranslator.h - заголовочный файл класса загрузки перевода;
• qmltranslator.cpp - файл исходных кодов класса загрузки перевода;
• main.qml - основной файл QML слоя.

QmlLanguage.pro

Создание файла перевода будет аналогичным тому, как это делается при создании переводов для Qt/C++ приложения. То есть нужно подключить файл перевода, с которым будет работать Qt Linguist :

# Добавляем файл переводов,
# который является по сути файлом "исходных кодов" для нашего перевода
TRANSLATIONS += QmlLanguage_ru.ts

Далее запускаем утилиту lupdate, чтобы создать данный файл переводов, редактируем его в Qt Linguist , и запустил утилиту lrelease создаём бинарный файл перевода, который будет подключаться в приложение.

Подробнее об этом Вы можете прочитать в предыдущей статье по использованию QTranslator .

Самый важный момент для работы с переводами в QML то, что нужно подключить все файлы QML в качестве исходников, как обычные C++ файлы. Но с отметкой, что только для использования lupdate_only.

lupdate_only {
    SOURCES += main.qml
}

Ниже полный листинг .pro файла проекта.

TEMPLATE = app
 
QT += qml quick widgets
 
CONFIG += c++11
 
SOURCES += main.cpp \
    qmltranslator.cpp
 
# Для того, чтобы создать файл переводов со строками из ресурсов qml
# понадобится включить файл qml в качестве обычных исходников в pro файле
# но только для использования утилиты lupdate, чтобы она могла узнать,
# какие строки нуждаются в переводе
lupdate_only {
    SOURCES += main.qml
}
 
RESOURCES += qml.qrc \
    translations.qrc
 
# Additional import path used to resolve QML modules in Qt Creator's code model
QML_IMPORT_PATH =
 
# Default rules for deployment.
include(deployment.pri)
 
# Добавляем файл переводов,
# который является по сути файлом "исходных кодов" для нашего перевода
TRANSLATIONS += QmlLanguage_ru.ts
 
HEADERS += \
    qmltranslator.h

main.cpp

Поскольку подключение файлов переводов осуществляется в C++ слое, то потребуется зарегистрировать объект класса переводов в контексте QML. В данном случае мы напишем класс QmlTranslator, который будет обёрткой над QTranslator, поскольку тот класс не имеет методов, с которыми мы могли бы работать через QML.

#include <QApplication>
#include <QQmlApplicationEngine>
#include <QtQml>
#include "qmltranslator.h"
 
int main(int argc, char *argv[])
{
    QApplication app(argc, argv);
 
    // Создаём объект для работы с переводами ...
    QmlTranslator qmlTranslator;
 
    QQmlApplicationEngine engine;
    // и регистрируем его в качестве контекста в Qml слое
    engine.rootContext()->setContextProperty("qmlTranslator", &qmlTranslator);
    engine.load(QUrl(QStringLiteral("qrc:/main.qml")));
 
    return app.exec();
}

qmltranslator.h

В классе присутствует метод установки перевода, в который передаётся префикс языка перевода. А из данного метода будет испускаться сигнал об изменении перевода, чтобы была возможность заново перевести весь интерфейс с новым переводом.

Метод установки перевода необходимо пометить макросом Q_INVOKABLE, чтобы была возможность использовать его в QML слое.

#ifndef QMLTRANSLATOR_H
#define QMLTRANSLATOR_H
 
#include <QObject>
#include <QTranslator>
 
class QmlTranslator : public QObject
{
    Q_OBJECT
 
public:
    explicit QmlTranslator(QObject *parent = 0);
 
signals:
    // Сигнал об изменении текущего языка для изменения перевода интерфейса
    void languageChanged();
 
public:
    // Метод установки перевода, который будет доступен в QML
    Q_INVOKABLE void setTranslation(QString translation);
 
private:
    QTranslator m_translator;
};
 
#endif // QMLTRANSLATOR_H

qmltranslator.cpp

#include "qmltranslator.h"
#include <QApplication>
 
QmlTranslator::QmlTranslator(QObject *parent) : QObject(parent)
{
 
}
 
void QmlTranslator::setTranslation(QString translation)
{
    m_translator.load(":/QmlLanguage_" + translation, "."); // Загружаем перевод
    qApp->installTranslator(&m_translator);                 // Устанавливаем его в приложение
    emit languageChanged();                                 // Сигнализируем об изменении текущего перевода
}

main.qml

Интерфейс приложения будет выглядеть следующим образом:

Логика приложения следующая: при смене языка в комбобоксе будет изменяться язык приложения.

Поскольку мы зарегистрировали qmlTranslator в контексте QML слоя, то в обработчике изменения текста в комбобоксе будем вызывать метод изменения языка в объекте qmlTranslator. А чтобы отслеживать сигнал изменения языка, необходимо с помощью типа Connections подключить к этому сигналу и написать обработчик, в котором будет вызываться функция retranslateUi(). В функции retranslateUi() вынесены все текстовые свойства всех объектов, которые необходимо подвергнуть переводу. Сделано это для упрощения логики и уменьшения избыточного кода.

import QtQuick 2.6
import QtQuick.Controls 1.5
 
ApplicationWindow {
    id: applicationWindow
    visible: true
    width: 640
    height: 480
 
    Label {
        id: helloLabel
        height: 50
        anchors {
            top: parent.top
            left: parent.left
            right: parent.horizontalCenter
            margins: 10
        }
    }
 
    ComboBox {
        id: comboBox
        anchors {
            top: parent.top
            left: parent.horizontalCenter
            right: parent.right
            margins: 10
        }
 
        model: ["ru_RU", "en_US"]
 
        // При изменении текста, инициализируем установку перевода через С++ слой
        onCurrentTextChanged: {
            qmlTranslator.setTranslation(comboBox.currentText)
        }
    }
 
    Label {
        id: labelText
        wrapMode: Text.Wrap
        anchors {
            top: helloLabel.bottom
            left: parent.left
            right: parent.right
            margins: 10
        }
    }
 
    // Подключаемся к объекту переводчика
    Connections {
        target: qmlTranslator   // был зарегистрирован в main.cpp
        onLanguageChanged: {    // при получении сигнала изменения языка
            retranslateUi()     // инициализируем перевод интерфейса
        }
    }
 
    // Функция перевода интерфейса
    function retranslateUi() {
        applicationWindow.title = qsTr("Hello World")
        helloLabel.text = qsTr("Hello World")
        labelText.text = qsTr("The QTranslator class provides internationalization" +
                              "support for text output.An object of this class contains " +
                              "a set of translations from a source language to a target language. " +
                              "QTranslator provides functions to look up translations in a translation file. " +
                              "Translation files are created using Qt Linguist.")
    }
 
    // Запускаем перевод приложения, когда окно приложения было создано
    Component.onCompleted: {
        retranslateUi();
    }
}

Итог

В целом динамический перевод приложения на Qt/QML мало чем отличается от перевода приложения с использованием только Qt/C++. Ключевым моментом является то, что нужно правильно подключить сигналы и слоты и правильно вызывать методы для инициализации перевода.

Скачать QML приложение с динамическим переводом

Видеоурок