Qt之Qml 国际化—实现简易语言切换功能

目标：实现一个下拉框，具有切换语言的功能

GIF展示:

版本Qt5.14.2，版本不能低于5.10

qml控件

1、在QML文件中把需要翻译显示的文本用qsTr(” ”)包裹起来

 Label{
            id:test_label
            anchors.horizontalCenter: parent.horizontalCenter
            font.pointSize: 18
            text: qsTr("test")

}

2、添加一个ComboBox 控件用来切换语言

		//切换语言控件
        Row {
            id: switch_language_row
            anchors.right: parent.right
            Label {
                text: qsTr("Language")
                anchors.verticalCenter: switch_language_row.verticalCenter
            }
            ComboBox {
                id:switch_language_combox
                model: ['English','简体中文']
            }
        }

翻译工作

1、在pro文件中添加：

RESOURCES += qml.qrc \
    translator.qrc

TRANSLATIONS += \
    zh_CN.ts \
    en_US.ts

2、在qml文件所在的文件夹中利用命令生成zh_CN.ts和en_us.ts文件

lupdate main.qml -ts zh_CN.ts en_us.ts

3、或者利用 工具 --> 外部 --> Qt语言家 --> 更新翻译(lupdate) 来完成相同工作
4、得到ts文件后，用 Linguist(Qt语言家) 软件打开ts文件完成词条翻译工作

5、保存之后进行发布 (文件–>发布)，此时得到两个同名qm文件：zh_CN.qm和en_us.qm
6、将qm文件添加至资源文件中

新建c++类完成语言切换逻辑

1、qmllanguage.h

#pragma once
#pragma once
#include <QObject>
#include <QTranslator>
#include <QGuiApplication>
#include <QQmlApplicationEngine>

class QmlLanguage : public QObject
{
    Q_OBJECT
public:
    QmlLanguage(QGuiApplication& app, QQmlApplicationEngine &engine);
    //设置为当前系统语言
    void setLocalLanguage();
    //获取当前系统语言，必须添加 Q_INVOKABLE 后才能在前端调用该函数
    Q_INVOKABLE int getLocalLanguage();
    //设置为indexOfLanguage指定的语言
    Q_INVOKABLE void setLanguage(int indexOfLanguage);

private:
    QGuiApplication *m_app;
    QQmlApplicationEngine *m_engine;
};

2、qmllanguage.cpp中实现方法

#include "qmllanguage.h"

QmlLanguage::QmlLanguage(QGuiApplication &app, QQmlApplicationEngine& engine)
{
    m_app = &app;
    m_engine = &engine;
}

void QmlLanguage::setLocalLanguage(){
    QTranslator translator;
    QLocale locale;
    if( locale.language() == QLocale::English ) {
        translator.load(":/en_us.qm");
    }
    else if( locale.language() == QLocale::Chinese ) {
        translator.load(":/zh_CN.qm");
    }
    m_app->installTranslator(&translator);
    //重新载入语言包
    m_engine->retranslate();
}

void QmlLanguage::setLanguage(int indexOfLanguage)
{
    QTranslator translator;
    if (indexOfLanguage == 0)
    {
        translator.load(":/en_US.qm");
    }else if (indexOfLanguage == 1) {
        translator.load(":/zh_CN.qm");
    }else{
        translator.load(":/en_US.qm");
    }
    m_app->installTranslator(&translator);
    m_engine->retranslate();
}

int QmlLanguage::getLocalLanguage(){
    QLocale locale;
    if(locale.language() == QLocale::English){
        return 0;
    }else if(locale.language() == QLocale::Chinese){
        return 1;
    }
    return 0;
}

将函数暴露给qml

main.cpp

#include <QGuiApplication>
#include <QQmlApplicationEngine>
#include <QTranslator>
#include <QDebug>
#include <QQmlContext>
#include "qmllanguage.h"


int main(int argc, char *argv[])
{
    QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
    //解决窗口拖拽时闪烁的问题
    QCoreApplication::setAttribute(Qt::AA_UseSoftwareOpenGL);

    QGuiApplication app(argc, argv);
    QQmlApplicationEngine engine;

    //切换为本地语言
    //检测本系统语言自动装载翻译文件
	//使用qt的QLocale这个类，通过这个类来获取系统本地语言环境
	//QTranslator的load方法装载语言包
	//QGuiApplication的实例化对象的installTranslator去实现语言翻译
    QTranslator translator;
    QLocale locale;
    if( locale.language() == QLocale::English ) {
        translator.load(":/en_us.qm");
    }
    else if( locale.language() == QLocale::Chinese ) {
        translator.load(":/zh_CN.qm");
    }
    app.installTranslator(&translator);

    //将QmlLanguage中的所有函数暴露给qml调用
    QmlLanguage qmlLanguage(app, engine);
    engine.rootContext()->setContextProperty("qmlLanguage", &qmlLanguage);

    const QUrl url(QStringLiteral("qrc:/main.qml"));
    QObject::connect(&engine, &QQmlApplicationEngine::objectCreated,
                     &app, [url](QObject *obj, const QUrl &objUrl) {
        if (!obj && url == objUrl)
            QCoreApplication::exit(-1);
    }, Qt::QueuedConnection);

    engine.load(url);
    return app.exec();
}

前端调用

        Row {
            id: switch_language_row
            anchors.right: parent.right
            Label {
                text: qsTr("Language")
                anchors.verticalCenter: switch_language_row.verticalCenter
            }
            ComboBox {
                id:switch_language_combox
                model: ['English','简体中文']
                //首先设置ComboBox显示当前系统语言
                currentIndex: qmlLanguage.getLocalLanguage()
                onActivated: {
                	//用户使用ComboBox后根据index调用cpp中的方法
                    qmlLanguage.setLanguage(index)
                    //设置ComboBox的显示语言
                    currentIndex = index
                }
            }
        }

---

Done!